* {
  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: transparent;

  /* 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;
}

input:-internal-autofill-selected {
  background-color: unset !important;
}
:root {
  /* Colors v1 */
  --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 v1 */
  --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";

  /* Colors v2 */
  --black: #000000;

  --white: #ffffff;
  --white-80: color-mix(in srgb, var(--white) 80%, transparent 20%);
  --white-50: color-mix(in srgb, var(--white) 50%, transparent 50%);
  --white-25: color-mix(in srgb, var(--white) 25%, transparent 75%);
  --white-15: color-mix(in srgb, var(--white) 15%, transparent 85%);
  --white-10: color-mix(in srgb, var(--white) 10%, transparent 90%);
  --white-5: color-mix(in srgb, var(--white) 5%, transparent 95%);

  --midnight-teal: #0e2232;
  --midnight-teal-80: color-mix(
    in srgb,
    var(--midnight-teal) 80%,
    transparent 20%
  );

  --abbyss-blue: #15354e;
  --abbyss-blue-50: color-mix(in srgb, var(--abbyss-blue) 50%, transparent 50%);
  --abbyss-blue-darker: #102a3e;
  --abbyss-blue-lighter: #213f57;

  --nordic-blue: #1b5271;
  --nordic-blue-50: color-mix(in srgb, var(--nordic-blue) 50%, transparent 50%);

  --verdant-cyan: #2e7d7c;

  --amber-dawn: #f39149;
  --amber-dawn-30: color-mix(in srgb, var(--amber-dawn) 30%, transparent 70%);
  --amber-dawn-darker: #da8241;
  --amber-dawn-lighter: #f49c5b;

  --sunlit-sand: #f9e294;
  --sunlit-sand-lighter: #fefdcd;

  --red: #ff4444;
  --red-60: color-mix(in srgb, var(--red) 60%, transparent 40%);
  --red-25: color-mix(in srgb, var(--red) 25%, transparent 75%);
  --red-10: color-mix(in srgb, var(--red) 10%, transparent 90%);

  --green: #15ff00;
  --green-60: color-mix(in srgb, var(--green) 60%, transparent 40%);

  --gradient-amber-dawn-to-sunlit-sand: linear-gradient(
    90deg,
    var(--amber-dawn),
    var(--sunlit-sand)
  );

  /* Fonts v2 */

  /* Font Family */
  --ff-main: "Manrope";

  /* Font Weight */
  --fw-thin: 100;
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900;

  /* Font Styles */
  --font-body-1: var(--fw-regular) 1.25rem / 120% var(--ff-main);
  --font-body-2: var(--fw-regular) 1rem / 140% var(--ff-main);
  --font-body-2-medium: var(--fw-medium) 1rem / 140% var(--ff-main);
  --font-body-3: var(--fw-regular) 0.875rem / 140% var(--ff-main);
  --font-body-4: var(--fw-regular) 0.75rem / 120% var(--ff-main);
  --font-body-5: var(--fw-regular) 1.125rem / 160% var(--ff-main);
  --font-header-1: var(--fw-bold) 2.25rem / 104% var(--ff-main);
  --font-header-2: var(--fw-bold) 2rem / 112% var(--ff-main);
  --font-header-3: var(--fw-bold) 1.5rem / 112% var(--ff-main);
  --font-header-4: var(--fw-bold) 1.25rem / 112% var(--ff-main);
  --font-button: var(--fw-semi-bold) 1.125rem / 120% var(--ff-main);
  --font-tiny: var(--fw-medium) 0.625rem / 100% var(--ff-main);

  /* Max content width */
  --max-content-width: 35rem; /* 560px */
}

html * {
  font-family: "Manrope";
  color: var(--white);
}

button,
.button {
  font-family: "Manrope";
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25rem;
  color: var(--white);
}

p,
li,
.paragraph,
.text,
.router-link {
  font-family: "Manrope";
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--white-80);
}

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

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 slide-right {
  from {
    transform: translateX(-2rem);
  }
  to {
    transform: translateX(0);
  }
}

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

@keyframes slide-out-left {
  from {
    transform: translateX(0rem);
  }
  to {
    transform: translateX(-2rem);
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0rem);
  }
  to {
    transform: translateX(2rem);
  }
}

@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: var(--midnight-teal);
  background-size: 100%;

  -ms-scroll-chaining: none;

      overscroll-behavior: none;
}

#root {
  height: 100%;
}

html::-webkit-scrollbar,
html *::-webkit-scrollbar {
  display: none;
}
.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;
}

.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: var(--red-60);
  box-shadow: 0 0 6px 0 var(--red-60);
}

.dropdown__title,
.dropdown__item {
  position: relative;
  width: 100%;
  height: 40px;
  padding: 10px;
  overflow: hidden;
  background: var(--midnight-teal);

  text-align: left;
  font-family: var(--ff-main) !important;
  font-size: 1rem !important;
  line-height: 1.25rem !important;
  font-weight: var(--fw-regular) !important;
  color: var(--white-80) !important;
  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 var(--white-80);
}

.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 var(--white-80);
}

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

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

.dropdown__scrollbar {
  max-height: inherit;
  background: var(--midnight-teal);
  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: var(--abbyss-blue-50);
}

.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;
}
.text {
  display: block;
  color: #424242;
}

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

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

.text.multiline { 
  white-space: pre-wrap;
}
.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: var(--abbyss-blue);
  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: 1.25rem;
  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(--sunlit-sand)
}

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

.dash-loader span::after {
  border: 3px solid var(--amber-dawn-lighter);
}

/* Слабо-прозрачный фон */
.modal {
  background: color-mix(in srgb, var(--black) 40%, transparent 60%);
}

.modal__wrap {
  border-radius: 12px;
}

/* В случае если браузер поддерживает блюр - добавляем фону блюр и делаем его чуть более прозрачным */
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .modal {
    background: color-mix(in srgb, var(--black) 40%, transparent 60%);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
}

/* hot-fix верстки выпадающего списка */
.dropdown__item:first-child {
  border-top: none;
}
html * {
  font-family: "Manrope";
  color: var(--white);
}

button,
.button {
  font-family: "Manrope";
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25rem;
  color: var(--white);
}

p,
li,
.paragraph,
.text,
.router-link {
  font-family: "Manrope";
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--white-80);
}

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

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); */
}

.rounded-button {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  /* max-width: 335px; */
  height: 3.5rem;
  
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 1.125rem;
  padding: 1.125rem;

  font: var(--font-button);
  text-align: center;

  cursor: pointer;
  outline: none;
}

.rounded-button:active {
  transform: scale(0.98);
}
.accent-button {
  background: var(--amber-dawn);
  color: var(--white);
}

.accent-button:active {
  background: var(--amber-dawn-darker);
}

.accent-button:disabled {
  background: color-mix(in srgb, var(--amber-dawn) 40%, transparent 60%);
  color: var(--white-80);
}

.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__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;
}
.icon {
  display: flex;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;

  color: var(--midnight-teal);
}

.icon * {
  color: inherit;
}
.back-button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;

  cursor: pointer;
}

.back-button__icon {
  width: 100%;
  height: 100%;

  color: var(--white);
}


.subpage-header {
  position: fixed;
  width: 100%;
  max-width: var(--max-content-width);
  align-items: center;
  top: 0;
  padding: 1.25rem 1.25rem 1.25rem;
  height: calc(
    1.25rem + 1.5rem + 1.25rem
  ); /* Padding Top + Content Height + Padding Bottom */
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 15%
  );
}

.subpage-header__title {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;

  font: var(--font-header-4);
  text-align: center;
  color: var(--white);
}

.profile-page-section-button {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1.125rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-radius: 1.125rem;
  background: var(--abbyss-blue);
  cursor: pointer;
}

.profile-page-section-button__label {
  font: var(--font-body-2);
  color: var(--white);
  text-align: left;
}

.profile-page-section-button__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--white);
}
.dev-menu-root-screen {
  width: 100%;
  height: 100%;

  animation: fade-in ease-in 125ms;
}

.dev-menu-root-screen__content {
  padding: 2rem 1.25rem 1.25rem;
  width: 100%;
  margin-top: 3.5rem;
  align-items: flex-start;
  justify-content: center;

  gap: 1.5rem;
}

.primary-input {
  width: 100%;
  position: relative;
  align-items: flex-start;
  gap: 0.625rem;
}

.primary-input__top-row {
  width: 100%;
  height: 0.75rem;
  padding: 0 0.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.primary-input__label {
  font: var(--font-tiny);
  color: var(--white-50);
  text-align: left;
  flex-shrink: 0;
}

.primary-input__error {
  margin-left: auto;

  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.primary-input__error__icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--red-60);
}

.primary-input__error__text {
  font: var(--font-tiny);
  color: var(--red-60);
  text-align: right;
}

.primary-input__input {
  width: 100%;
  height: 3.5rem;
  padding: 1.125rem;
  border: none;
  border-radius: 1.125rem;
  background: var(--abbyss-blue-50);

  font-family: var(--ff-main);
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: var(--fw-regular);
  color: var(--white-80);
}

.primary-input.with-error > .primary-input__input {
  box-shadow: 0 0 0 1.5px var(--red-60);
}

.primary-input__input:focus {
  border: none;
  box-shadow: 0 0 0 1.5px var(--white-15);
}

.primary-input__input:-ms-input-placeholder {
  color: var(--white-50);
}

.primary-input__input::placeholder {
  color: var(--white-50);
}

.primary-input__input:disabled {
  opacity: 0.5;
  background: var(--abbyss-blue-50);
}
.haptics-pattern-step-config {
  align-items: center;
  gap: 0.5rem;
}

.haptics-pattern-step-config__type-dropdown {
  width: 100%;
}

.haptics-pattern-step-config__delay-input {
  width: 7rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.haptics-pattern-step-config__delay-input .primary-input__input {
  height: 2.5rem;
  padding: 0.25rem 0.75rem;
  background: var(--midnight-teal);
  border-radius: 5px;
  border: 1px solid var(--white-80);
}

.haptics-pattern-step-config__remove-button {
  display: flex;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: 100%;
  border: 1px solid var(--white-80);
}

.haptics-pattern-step-config__remove-icon {
  width: 100%;
  height: 100%;
  color: var(--white-80);
}
.haptics-pattern-testing-widget {
  background: var(--abbyss-blue-50);
  padding: 1rem;
  border-radius: 0.75rem;
  gap: 1.25rem;
}

.haptics-pattern-testing-widget__header {
  align-items: center;
  gap: 1.25rem;
}

.haptics-pattern-testing-widget__title {
  font: var(--font-body-2);
  color: var(--white-80);
}

.haptics-pattern-testing-widget__add-step-button {
  display: flex;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.125rem;
  border-radius: 100%;
  border: 1px solid var(--white-80);
}

.haptics-pattern-testing-widget__add-step-button__icon {
  width: 100%;
  height: 100%;
  color: var(--white-80);
}

.haptics-pattern-testing-widget__step-list {
  width: 100%;
  gap: 0.75rem;
}

.haptics-pattern-testing-widget__step-config {
  width: 100%;
}

.haptics-pattern-testing-widget__test-button {
  width: 100%;
  height: 3.5rem;
  border: 1.5px solid var(--amber-dawn);
  color: var(--amber-dawn);
  border-radius: 0.75rem;
}

.haptics-pattern-testing-widget__test-button:active {
  transform: scale(0.98);
}
.haptics-sandbox-screen {
  width: 100%;
  height: 100%;

  animation: fade-in ease-in 125ms;
}

.haptics-sandbox-screen__content {
  padding: 2rem 1.25rem 1.25rem;
  width: 100%;
  margin-top: 3.5rem;
  align-items: flex-start;
  justify-content: center;

  gap: 1.5rem;
}

.haptics-sandbox-screen__pattern-testing-widget {
  width: 100%;
}
.sticky-footer-overlay-v2 {
  position: -webkit-sticky;
  position: sticky;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  bottom: 0px;
  margin-top: auto;
  pointer-events: none; /* Allow clicking through the gradient part of the sticky footer */

  padding: 2.75rem 0 1.25rem;

  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 35%
  );
}

.sticky-footer-overlay-v2__content {
  display: flex;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* Re-enable pointer events for the footer content */
}

.personal-info-screen {
  width: 100%;
  height: 100%;

  animation: fade-in ease-in 125ms;
}

.personal-info-screen__content {
  padding: 4rem 1.25rem 1.25rem;
  width: 100%;
  margin-top: 3.5rem;
  align-items: flex-start;
  justify-content: center;

  gap: 1.5rem;
}

.personal-info-screen__password-input-wrap {
  position: relative;
  width: 100%;
}

.personal-info-screen__change-password-button {
  position: absolute;
  top: 0rem;
  right: 0.5rem;
  display: flex;
  cursor: pointer;

  font: var(--font-tiny);
  color: var(--amber-dawn);
  text-align: left;
}

.personal-info-screen__footer {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.toggle-switch {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.toggle-switch.disabled {
  opacity: 0.2;
}

.toggle-switch__label {
  font: var(--font-body-4);
  color: var(--white-80);
  text-align: left;
}

.toggle-switch__button {
  display: flex;
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  background: var(--white-15);
  padding: 0.125rem;
  border-radius: 3.75rem;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;

  transition: all linear 50ms;
}

.toggle-switch__button:disabled {
  cursor: default;
}

.toggle-switch.enabled > .toggle-switch__button {
  background: var(--amber-dawn);
  justify-content: flex-end;
}

.toggle-switch__button__circle {
  position: absolute;
  left: 0.125rem; /* padding */
  width: 1rem;
  height: 1rem;
  background: var(--white);
  border-radius: 100%;

  transition: all linear 50ms;
}

.toggle-switch.enabled
  > .toggle-switch__button
  > .toggle-switch__button__circle {
  left: calc(
    100% - 1rem - 0.125rem
  ); /* toggle width - circle width - padding */
}

.translation-language-dropdown-item {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 3.5rem;
  padding: 1rem 1.125rem;
  border-radius: 1.125rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}

.translation-language-dropdown-item__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.translation-language-dropdown-item__text {
  font: var(--font-body-2);
  color: var(--white);
  text-align: left;
}
.translation-language-dropdown {
  gap: 0.625rem;
  align-items: flex-start;
}

.translation-language-dropdown__label {
  padding: 0 0.5rem;
  font: var(--font-tiny);
  color: var(--white-50);
  text-align: left;
}

.translation-language-dropdown__dropdown-wrap {
  width: 100%;
  position: relative;
}

.translation-language-dropdown__toggle-wrap {
  position: relative;
  width: 100%;
}

.translation-language-dropdown__toggle-button {
  background: var(--abbyss-blue-50);
}

.translation-language-dropdown__toggle-icon {
  position: absolute;
  top: 1rem;
  right: 1.125rem;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--white);
  pointer-events: none;
}

.translation-language-dropdown__item-list {
  position: absolute;
  top: 3.75rem;
  width: 100%;
  height: 12rem;
  background: var(--abbyss-blue);
  border-radius: 1.125rem;
  z-index: 1;
  overflow: hidden;
}

.translation-language-dropdown__item:hover {
  background: var(--nordic-blue);
}
.course-tag-badge {
  display: flex;
  flex-shrink: 0;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  height: -webkit-fit-content;
  height: fit-content;
  background: var(--abbyss-blue-50);
  align-items: center;
  justify-content: center;

  pointer-events: none;
  cursor: default;
}

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

.course-tag-badge.selected {
  background: var(--verdant-cyan);
}

.course-tag-badge__text {
  font: var(--font-tiny);
  color: var(--white);
  text-align: center;
}
.favorite-topics-widget {
  gap: 1rem;
}

.favorite-topics-widget__header {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.5rem;
}

.favorite-topics-widget__label {
  font: var(--font-tiny);
  color: var(--white-50);
  text-align: left;
}

.favorite-topics-widget__change-button {
  display: flex;
  font: var(--font-tiny);
  color: var(--amber-dawn);
  text-align: right;
  cursor: pointer;
}

.favorite-topics-widget__list {
  width: 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 0.5rem;
}

.favorite-topics-widget__list__item {
  height: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.625rem;
  font: var(--font-body-3);
}
.preferences-screen {
  width: 100%;
  height: 100%;

  animation: fade-in ease-in 125ms;
}

.preferences-screen__content {
  padding: 2.5rem 1.25rem 1.25rem;
  width: 100%;
  margin-top: 3.5rem;
  align-items: flex-start;
  justify-content: center;

  gap: 2.5rem;
}

.preferences-screen__language-preferences {
  width: 100%;
  gap: 0.625rem;
}

.preferences-screen__translation-language-dropdown {
  width: 100%;
}

.preferences-screen__ui-translation-toggle {
  width: 100%;
  padding: 0 0.5rem;
}

.preferences-screen__favorite-topics-widget {
  width: 100%;
}

.preferences-screen__footer {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.page-header {
  width: 100%;
  flex-shrink: 0;

  padding: 1.25rem;
  background: var(--abbyss-blue-darker);
  box-shadow: 0 0 0.5rem 0.25rem var(--midnight-teal);
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;

  position: -webkit-sticky;

  position: sticky;
  top: 0px;
  z-index: 1;
}

.profile-root-screen-header {
  height: 4.75rem;
}

.profile-root-screen-header__text {
  font: var(--font-header-2);
  color: var(--white);
  text-align: left;
}
.subscription-info {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}

.subscription-info__label {
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: left;
}

.subscription-info__value {
  font: var(--font-body-4);
  color: var(--amber-dawn);
  text-align: right;
}
.profile-general-info {
  width: 100%;
  align-items: flex-start;
  gap: 0.625rem;
}

.profile-general-info__name {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}
.additional-legal-info {
  width: 100%;
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: center;
}
.external-link {
  background: transparent;
  font-weight: unset;
}




.delete-account-button {
  background: var(--red-10);
}

.delete-account-button > .profile-page-section-button__label {
  color: var(--red-60);
}

.delete-account-button > .profile-page-section-button__icon {
  color: var(--red-60);
}




.subscription-offer-banner {
  padding: 1.125rem;
  border-radius: 1.25rem;
  background: var(--nordic-blue);
  align-items: flex-start;
  gap: 1.25rem;
}

.subscription-offer-banner__info-wrap {
  width: 100%;
  align-items: flex-start;
  gap: 1rem;
}

.subscription-offer-banner__icon {
  width: 2rem;
  height: 2rem;
  color: var(--white);
}

.subscription-offer-banner__text {
  font: var(--font-header-3);
  color: var(--white);
  text-align: left;
}

.subscription-offer-banner__cta {
  width: 100%;
  height: 3rem;
  padding: 0.875rem;
  border-radius: 0.875rem;
  font: var(--font-body-2-medium);
}

.debug-mode-button {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  right: 1.25rem;
  top: 1.25rem;
  z-index: 1;
}

.debug-mode-button * {
  visibility: hidden;
}

.debug-mode-button.enabled * {
  visibility: visible;
}

.debug-mode-button__icon {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1.5px solid var(--amber-dawn);
  color: var(--amber-dawn);
}


.profile-root-screen {
  position: relative;
  width: 100%;
  height: 100%;
}

.profile-root-screen__content {
  width: 100%;
  height: 100%;
  padding: 1.5rem 1.25rem 1.75rem;
  gap: 2rem;
  overflow: auto;
  animation: fade-in ease-in 125ms;
}

.profile-root-screen__button-group {
  width: 100%;
  gap: 0.625rem;
}
.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;
}
.skeleton-loader {
  display: flex;
  background-color: var(--white-15);
  border-radius: 0.25rem;
  position: relative;
  overflow: hidden;

  color: transparent;
  white-space: pre-wrap;
}

.skeleton-loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--white-50),
    transparent
  );
  animation: skeleton-loader-shimmer 1.5s infinite;
}

@keyframes skeleton-loader-shimmer {
  100% {
    left: 100%;
  }
}

.vocabulary-page-header-skeleton {
  height: 7.75rem;
  align-items: flex-start;
  gap: 1rem;
}

.vocabulary-page-header-skeleton__title {
  font: var(--font-header-2);
  color: var(--white);
  text-align: left;
}

.vocabulary-page-header-skeleton__top-bar {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vocabulary-page-header-skeleton__entry-count {
  width: 7.5rem;
  font: var(--font-body-4);
}

.vocabulary-page-header-skeleton__add-new-entry-button {
  width: 10rem;
  height: 2rem;
  border-radius: 0.625rem;
}
.vocabulary-entry-skeleton {
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 1.125rem;
  border-radius: 1.25rem;
  background: var(--abbyss-blue);
  align-items: flex-start;
  gap: 0.625rem;
}

.vocabulary-entry-skeleton__top-row {
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.vocabulary-entry-skeleton__word {
  font: var(--header-4);
}

.vocabulary-entry-skeleton__remove-button {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
}

.vocabulary-entry-skeleton__sentence {
  width: 100%;
  gap: 0.25rem;
}

.vocabulary-entry-skeleton__sentence-line {
  font: var(--font-body-4);
}

.vocabulary-entry-skeleton.variant-1 .vocabulary-entry-skeleton__word {
  width: 30%;
}

.vocabulary-entry-skeleton.variant-2 .vocabulary-entry-skeleton__word {
  width: 65%;
}

.vocabulary-entry-skeleton.variant-3 .vocabulary-entry-skeleton__word {
  width: 45%;
}

.vocabulary-entry-skeleton.variant-4 .vocabulary-entry-skeleton__word {
  width: 20%;
}

.vocabulary-entry-skeleton.variant-5 .vocabulary-entry-skeleton__word {
  width: 75%;
}

.vocabulary-entry-skeleton.variant-1 .vocabulary-entry-skeleton__sentence-line {
  width: 90%;
}

.vocabulary-entry-skeleton.variant-2 .vocabulary-entry-skeleton__sentence-line {
  width: 90%;
}
.vocabulary-entry-skeleton.variant-2 .vocabulary-entry-skeleton__sentence-line:nth-of-type(2) {
  width: 35%;
}

.vocabulary-entry-skeleton.variant-3 .vocabulary-entry-skeleton__sentence-line {
  width: 90%;
}
.vocabulary-entry-skeleton.variant-3 .vocabulary-entry-skeleton__sentence-line:nth-of-type(2) {
  width: 95%;
}
.vocabulary-entry-skeleton.variant-3 .vocabulary-entry-skeleton__sentence-line:nth-of-type(3) {
  width: 55%;
}

.vocabulary-entry-skeleton.variant-4 .vocabulary-entry-skeleton__sentence-line {
  width: 95%;
}
.vocabulary-entry-skeleton.variant-4 .vocabulary-entry-skeleton__sentence-line:nth-of-type(2) {
  width: 70%;
}

.vocabulary-entry-skeleton.variant-5 .vocabulary-entry-skeleton__sentence-line {
  width: 70%;
}
.vocabulary-page-skeleton {
  width: 100%;
  height: 100%;
}

.vocabulary-page-skeleton__content {
  width: 100%;
  overflow: hidden;
  padding: 2rem 1.25rem;
  gap: 0.625rem;
}
.neutral-button {
  background: transparent;
  border: 1.5px solid var(--amber-dawn);
  color: var(--amber-dawn);
}

.neutral-button:active {
  border-color: var(--amber-dawn-darker);
  color: var(--amber-dawn-darker);
}

.neutral-button:disabled {
  border-color: color-mix(in srgb, var(--amber-dawn) 40%, transparent 60%);
  color: color-mix(in srgb, var(--amber-dawn) 40%, transparent 60%);
}

.vocabulary-page-header {
  height: 7.75rem;
  align-items: flex-start;
  gap: 1rem;
}

.vocabulary-page-header__title {
  font: var(--font-header-2);
  color: var(--white);
  text-align: left;
}

.vocabulary-page-header__top-bar {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vocabulary-page-header__entry-count {
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.vocabulary-page-header__entry-count__icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--white-50);
}

.vocabulary-page-header__entry-count__text {
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: left;
}

.vocabulary-page-header__add-new-entry-button {
  display: flex;
  flex-direction: row;
  width: -webkit-fit-content;
  width: fit-content;
  height: 2rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
}

.vocabulary-page-header__add-new-entry-button__icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--amber-dawn);
}

.vocabulary-page-header__add-new-entry-button__text {
  font: var(--font-body-4);
  color: var(--amber-dawn);
  text-align: left;
}
.markdown-youtube-player {
  width: 640px;
  aspect-ratio: 16 / 9;
}
.markdown {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

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

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

.markdown blockquote {
  margin: unset;
}

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

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

.markdown .external-link {
  padding: unset;
  border: unset;
  color: var(--amber-dawn);
}
.vocabulary-entry {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 1.125rem;
  border-radius: 1.25rem;
  background: var(--abbyss-blue);
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}

.vocabulary-entry__top-row {
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.vocabulary-entry__word {
  font: var(--header-4);
  color: var(--white);
  text-align: left;
}

.vocabulary-entry__remove-button {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  cursor: pointer;
}

.vocabulary-entry__remove-button__icon {
  width: 100%;
  height: 100%;
  color: var(--white);
}

.vocabulary-entry__sentence * {
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: left;
}

.vocabulary-entry__sentence strong {
  color: var(--sunlit-sand);
}
.vocabulary-page {
  position: relative;
  width: 100%;
  height: 100%;
}

.vocabulary-page__skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  opacity: 1;
  transition: opacity ease-out 350ms;
}

.vocabulary-page__skeleton.hidden {
  opacity: 0;
}

.vocabulary-page__content {
  width: 100%;
  overflow: auto;
  padding: 2rem 1.25rem;
  gap: 0.625rem;

  animation: fade-in ease-in 125ms;
}

.ai-character-avatar {
  object-fit: cover;
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
}
.ai-character-selection-card {
  width: 20.5rem;
  height: 9.25rem;
  align-items: flex-start;
  justify-content: center;
  padding: 1.125rem;
  gap: 1rem;
  border-radius: 1.25rem;

  background: var(--abbyss-blue);
}

.ai-character-selection-card__character-info {
  gap: 1rem;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
}

.ai-character-selection-card__avatar {
  width: 3.5rem;
  height: 3.5rem;
}

.ai-character-selection-card__name {
  font: var(--font-header-3);
  color: var(--white);
  text-align: left;
}

.ai-character-selection-card__description {
  font: var(--font-body-3);
  color: var(--white-80);
  text-align: left;
}
.ai-character-selection-carousel {
  position: relative;
  width: 100%;
  height: 11.875rem;
  overflow: hidden;
  gap: 1.25rem;
}

.ai-character-selection-carousel__title {
  font: var(--font-body-2);
  color: var(--white-80);
  text-align: left;
}

.ai-character-selection-carousel__carousel {
  width: calc(100% + 42.5rem);
  margin-left: -21.25rem;
  padding: 0 1.25rem;
}

.ai-character-selection-carousel__carousel > .swiper-wrapper {
  align-items: center;
}

.ai-character-selection-carousel__carousel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ai-character-selection-carousel__carousel
  .swiper-slide-active
  .ai-character-selection-carousel__character-card {
  background: var(--verdant-cyan);
}

.ai-chat-type-card {
  width: 20.5rem;
  height: 6rem;
  padding: 1.125rem 0.75rem;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  border-radius: 1.25rem;
  background: var(--abbyss-blue);
}

.ai-chat-type-card.locked {
  opacity: 0.8;
}

.ai-chat-type-card__info-wrap {
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
}

.ai-chat-type-card__icon-wrap {
  display: flex;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.75rem;
  border-radius: 0.875rem;
  background: var(--white-5);
}

.ai-chat-type-card__icon {
  object-fit: contain;
  width: 100%;
  height: 100%;
  color: var(--white);
}

.ai-chat-type-card__name {
  font: var(--font-header-3);
  color: var(--white);
  text-align: left;
}
.ai-chat-type-selection-carousel {
  position: relative;
  width: 100%;
  height: 8.625rem;
  overflow: hidden;
  gap: 1.25rem;
}

.ai-chat-type-selection-carousel__title {
  font: var(--font-body-2);
  color: var(--white-80);
  text-align: left;
}

.ai-chat-type-selection-carousel__carousel {
  width: calc(100% + 42.5rem);
  margin-left: -21.25rem;
  padding: 0 1.25rem;
}

.ai-chat-type-selection-carousel__carousel > .swiper-wrapper {
  align-items: center;
}

.ai-chat-type-selection-carousel__carousel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ai-chat-type-selection-carousel__carousel
  .swiper-slide-active
  .ai-chat-type-selection-carousel__chat-type-card {
  background: var(--verdant-cyan);
}

.ai-chat-creation-process-animation {
  background: var(--midnight-teal);
  align-items: center;
  justify-content: center;

  animation: fade-in ease-in 500ms;
}

.ai-chat-creation-process-animation__cards-wrap {
  border-radius: 1.25rem;

  animation: ai-chat-cards-wrap-glow infinite 3s 1.25s,
    ai-chat-cards-wrap-initial-zoom-in forwards 1s 1.25s,
    ai-chat-cards-wrap-float infinite 3s 2.25s;
  transition: all ease-in;
}

.ai-chat-creation-process-animation__character-card {
  animation: fade-in ease-in 1s,
    slide-down ease-out 1.25s,
    character-card-border-transform forwards 250ms 1s;
  background: var(--verdant-cyan);
}

.ai-chat-creation-process-animation__chat-type-card {
  animation: fade-in ease-in 1s,
    slide-up ease-out 1.25s,
    chat-type-card-border-transform forwards 250ms 1s;
  background: var(--verdant-cyan);
}

.ai-chat-creation-process-animation.transitioning
  > .ai-chat-creation-process-animation__cards-wrap {
  animation: ai-chat-cards-wrap-glow infinite 3s,
    ai-chat-cards-wrap-float infinite 3s,
    ai-chat-cards-wrap-transitioning-zoom-in forwards 1s;
}

.ai-chat-creation-process-animation.transitioning
  .ai-chat-creation-process-animation__character-card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ai-chat-creation-process-animation.transitioning
  .ai-chat-creation-process-animation__chat-type-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@keyframes character-card-border-transform {
  0% {
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
  }
  100% {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@keyframes chat-type-card-border-transform {
  0% {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
  }
  100% {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

@keyframes ai-chat-cards-wrap-initial-zoom-in {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.05);
  }
}

@keyframes ai-chat-cards-wrap-float {
  0% {
    transform: translateY(0) scale(1.05);
  }
  50% {
    transform: translateY(-0.25rem) scale(1);
  }
  100% {
    transform: translateY(0) scale(1.05);
  }
}

@keyframes ai-chat-cards-wrap-glow {
  0% {
    box-shadow: 0 0 0.5rem 0.125rem var(--sunlit-sand);
    border: 2px solid var(--light-yellow);
  }
  50% {
    box-shadow: 0 0 1rem 0.125rem var(--sunlit-sand);
    border: 2px solid var(--light-yellow);
  }
  100% {
    box-shadow: 0 0 0.5rem 0.125rem var(--sunlit-sand);
    border: 2px solid var(--light-yellow);
  }
}

@keyframes ai-chat-cards-wrap-transitioning-zoom-in {
  0% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.ai-chat-start-page {
  position: relative;
  width: 100%;
  height: 100%;
  animation: fade-in ease-in 250ms;
}

.ai-chat-start-page__content {
  width: 100%;
  height: 100%;
  padding: 3.75rem 0 0;
}

.ai-chat-start-page__content.hidden {
  opacity: 0;
  transition: opacity ease-in 500ms;
}

.ai-chat-start-page__character-selection-carousel {
  margin-top: 2.5rem;
}

.ai-chat-start-page__chat-type-selection-carousel {
  margin-top: 2.5rem;
}

.ai-chat-start-page__title,
.ai-chat-start-page__character-selection-carousel > .ai-character-selection-carousel__title,
.ai-chat-start-page__chat-type-selection-carousel > .ai-chat-type-selection-carousel__title {
  padding: 0 1.25rem;
}

.ai-chat-start-page__creation-process-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ai-chat-start-page__footer {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.ai-chat-character-card {
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.ai-chat-character-card__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 100%;
}

.ai-chat-character-card__name {
  font: var(--font-header-3);
  color: var(--white);
  text-align: left;
}
.content-level-switch {
  height: 1.75rem;
  border-radius: 0.625rem;
  padding: 0.125rem;
  background-color: var(--abbyss-blue);
}

.content-level-switch__button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 5rem;
  height: 1.5rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0.125rem;

  font-family: var(--ff-main);
  font-size: 0.75rem;
  line-height: 100%;
  font-weight: var(--fw-medium);
  text-align: center;
  color: var(--white-50);

  cursor: pointer;
}

.content-level-switch__button.active {
  background-color: var(--nordic-blue);
  color: var(--white);
}


.ai-chat-header {
  height: 8rem;
  gap: 1rem;
}

.ai-chat-header__top-bar {
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.ai-chat-header__content-level-switch {
  margin-left: auto;
}
.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: auto;
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--white);
  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%;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0.25rem;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
}

.audio-message-player.playing {
  background: var(--amber-dawn-30);
  animation: message-audio-playback-glow infinite 2s;
}

.audio-message-player__icon {
  width: 100%;
  height: 100%;
  color: var(--white);
}

.audio-message-player.playing > .audio-message-player__icon {
  color: var(--amber-dawn);
}

@keyframes message-audio-playback-glow {
  0% {
    box-shadow: 0 0 2px 1px var(--amber-dawn-lighter);
  }
  50% {
    box-shadow: 0 0 8px 1px var(--amber-dawn-lighter);
  }
  100% {
    box-shadow: 0 0 2px 1px var(--amber-dawn-lighter);
  }
}

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

.ai-chat-message.from-chatbot {
  padding-right: 0.5rem;
}

.ai-chat-message.from-user {
  padding-left: 0.5rem;
}

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

.ai-chat-message.from-chatbot
  > .ai-chat-message__content-wrap {
  background: var(--white-5);
  align-items: flex-start;
  border-bottom-left-radius: 0.25rem;
}

.ai-chat-message.from-user
  > .ai-chat-message__content-wrap {
  background: var(--verdant-cyan);
  align-items: flex-end;
  border-bottom-right-radius: 0.25rem;
}

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

.ai-chat-message__content * {
  font-family: var(--ff-main);
  font-size: 0.875rem;
  line-height: 140%;
  font-weight: var(--fw-medium);
  color: var(--white);
  word-wrap: break-word;
}

.ai-chat-message__content strong {
  font-weight: var(--fw-bold);
  color: var(--sunlit-sand);
}

.ai-chat-message__audio-controls > * {
  animation: fade-in 0.5s ease-out forwards;
}

.inline-hint-content {
  gap: 0.75rem;
}

.inline-hint-content * {
  font: var(--font-body-3) !important;
  color: var(--black) !important;
}

.inline-hint-content.markdown * {
  text-align: center;
  margin: unset;
}

.inline-hint-content.column {
  text-align: left;
}

.inline-hint-content__title * {
  font: var(--font-body-2) !important;
}

.inline-hint-content__body * {
  font: var(--font-body-3) !important;
}

.inline-hint-content strong {
  font-weight: var(--fw-bold) !important;
}

.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.8);
  z-index: 20001;

  animation: fade-in ease 500ms;
}

.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__focused-element.no-pointer-events > * {
  pointer-events: none;
  cursor: default;
}

.inline-hint-wrapper__tooltip {
  z-index: 20003;
  min-width: 15rem;
  max-width: 90%;
  padding: 0.5rem;
}

.inline-hint-wrapper__tooltip__content-wrap {
  position: relative;
  background: var(--sunlit-sand);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  width: -webkit-fit-content;
  width: fit-content;
  min-width: 15rem;
  animation: inline-hint-tooltip-float infinite 4s;
}

.inline-hint-wrapper__tooltip__arrow {
  fill: var(--sunlit-sand);
}

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

  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  flex-shrink: 0;

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

.inline-hint-wrapper__tooltip__close-button__icon {
  width: 1rem;
  height: 1rem;
  color: var(--black) !important;
}
.inline-hint-wrapper__tooltip__close-button__icon * {
  color: var(--black) !important;
}

@keyframes inline-hint-tooltip-float {
  0% {
    transform: translateY(-0.25rem);
  }
  50% {
    transform: translateY(0.25rem);
  }
  100% {
    transform: translateY(-0.25rem);
  }
}
.ai-chat-response-suggestion {
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  align-items: flex-end;
  opacity: 0;
  transition: opacity ease-in 150ms;
  transition-delay: 0s;
}

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

.ai-chat-response-suggestion.visible.with-hint {
  z-index: 1;
}

.ai-chat-response-suggestion__button {
  cursor: pointer;
}

.ai-chat-response-suggestion__button,
.ai-chat-response-suggestion__loader {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  border-radius: 100%;
  background: var(--abbyss-blue);
}

.ai-chat-response-suggestion__button__icon {
  width: 100%;
  height: 100%;
  color: var(--sunlit-sand);
}

.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: var(--sunlit-sand);
}

.ai-chat-response-suggestion__suggestion {
  min-height: 2rem;
  min-width: 2rem;
  max-width: 70%;
  padding: 0.625rem 0.875rem;
  z-index: 0;
  border-radius: 0.75rem;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--abbyss-blue);

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

.ai-chat-response-suggestion__suggestion__label {
  font-family: var(--ff-main);
  font-size: 0.875rem;
  line-height: 140%;
  font-weight: var(--fw-bold);
  color: var(--sunlit-sand);
  word-wrap: break-word;
}

.ai-chat-response-suggestion__suggestion__text * {
  font-family: var(--ff-main);
  font-size: 0.875rem;
  line-height: 140%;
  font-weight: var(--fw-medium);
  color: var(--white);
  word-wrap: break-word;
}

.ai-chat-response-suggestion__suggestion__text strong {
  font-weight: var(--fw-bold);
  color: var(--sunlit-sand);
}

.ai-chat-response-suggestion__inline-hint-wrapper
  > .inline-hint-wrapper__focused-element {
  border-radius: 100%;
}

@keyframes response-suggestion-slide-up {
  0% {
    transform: translateY(2rem);
  }
  99% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(unset) !important;
  }
}

.ai-chat-message-list {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

.ai-chat-message-list__fade-gradient__bottom {
  position: absolute;
  left: 0;
  content: "";
  display: flex;
  width: 100%;
  height: 1rem;
  flex-shrink: 0;
}
.ai-chat-message-list__fade-gradient__bottom {
  bottom: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 70%
  );
}

.ai-chat-message-list__scroll {
  width: 100%;
  height: 100%;
  padding: 2rem 1.25rem 1.25rem;
  gap: 0.625rem;
  overflow-y: auto;
  
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
}
.ai-chat-message-list__scroll::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari, Opera */
}

.ai-chat-message-list__loader {
  margin: auto;
}

.ai-chat-message-list__message.message-sequence-start {
  margin-top: 0.875rem;
}

.ai-chat-message-list__message.from-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-chat-message-list__response-suggestion {
  align-self: flex-end;
  margin-top: 0.875rem;
}

.audio-recorder-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  border: none;
  background: var(--amber-dawn);
  cursor: pointer;
}

.audio-recorder-button.recording {
  animation: audio-recording-glow infinite 2s;
}

.audio-recorder-button__microphone-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--white);
}

.audio-recorder-button__inline-hint-wrapper {
  position: absolute;
  left: calc(50% - 2rem);
}

.audio-recorder-button__inline-hint-wrapper
  > .inline-hint-wrapper__focused-element {
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}

@keyframes audio-recording-glow {
  0% {
    box-shadow: 0 0 1rem var(--amber-dawn-lighter);
  }
  50% {
    box-shadow: 0 0 2rem var(--amber-dawn-lighter);
  }
  100% {
    box-shadow: 0 0 1rem var(--amber-dawn-lighter);
  }
}

.audio-message-input {
  width: 100%;
  align-items: center;
  
  animation: fade-in ease-in 250ms;
}

.audio-message-input__switch-to-text-input-button,
.audio-message-input__stop-audio-recording-button {
  display: flex;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 100%;
  padding: 0.625rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  animation: fade-in ease-in 250ms;
}

.audio-message-input__switch-to-text-input-button {
  margin-left: 1.25rem;
  margin-right: auto;
  background: var(--abbyss-blue);
}

.audio-message-input__stop-audio-recording-button {
  margin-right: 1.25rem;
  margin-left: auto;
  background: var(--white-10);
}

.audio-message-input__switch-to-text-input-button__icon {
  width: 2rem;
  height: 2rem;
  color: var(--white);
}

.audio-message-input__stop-audio-recording-button__icon  {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--white);
}

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

.text-message-input {
  width: 100%;
  gap: 0.625rem;
  align-items: flex-end;
  padding: 0.25rem;
  border-radius: 2.5rem;
  background: var(--abbyss-blue-50);
  
  animation: fade-in ease-in 250ms;
}

.text-message-input__textarea-wrap {
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.25rem 0.5rem 0.875rem;
}

.text-message-input__textarea {
  width: 100%;
  max-height: calc(1.5rem * 2);
  min-height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0;

  font: var(--font-body-2);
  color: var(--white);
  line-height: 1.5rem;

  overflow: auto;
  background: none;
}

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

.text-message-input__textarea::placeholder {
  color: var(--white-50);
}

.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.5rem;
  height: 100%;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.text-message-input__character-counter {
  font-family: var(--ff-main);
  font-size: 0.375rem;
  line-height: 0.5rem;
  font-weight: var(--fw-semi-bold);
  color: var(--white-80);
  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: transparent;
  cursor: pointer;

  transition: background-color ease-in-out 100ms;
}

.text-message-input__send-button {
  background-color: var(--amber-dawn);
}

.text-message-input__send-button:disabled {
  background-color: transparent;
}

.text-message-input__send-button__icon,
.text-message-input__switch-to-audio-button__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--white);
}

.text-message-input__send-button:disabled,
.text-message-input__switch-to-audio-button:disabled {
  opacity: 0.5;
}

.ai-chat-input {
  width: 100%;
  gap: 0.5rem;
  align-items: center;
  padding: 0 1.25rem;
}

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

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

.ai-chat-area__header {
  position: relative;
}

.ai-chat-area__message-list {
  flex-grow: 1;
  overflow-y: auto;
}

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

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

.ai-chat-area__input-wrap {
  width: 100%;
  height: 5.75rem;
  margin: 0 auto;
  align-items: flex-start;
  flex-shrink: 0;
}

.ai-chat-area__finish-button {
  width: calc(100% - 1.25rem - 1.25rem);
  margin: auto;
}

.ai-chat-area__input {
  height: 100%;
}

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

  animation: fade-in ease-in 250ms;
}

.statistics-item-card {
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  gap: 0.75rem;
  background: var(--abbyss-blue);
  border-radius: 1.25rem;
  padding-right: 1.125rem;
}

.statistics-item-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  padding: 1rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  background: var(--white-5);
  color: var(--white);
}

.statistics-item-card__label {
  font: var(--font-body-2-medium);
  color: var(--white);
  text-align: left;
}

.statistics-item-card__value {
  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
  margin-left: auto;
}


.task-statistics-screen {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 1.25rem;

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

  animation: fade-in ease-in 500ms;
}

.task-statistics-screen__title {
  margin-top: 2.5rem;

  font: var(--font-header-1);
  color: var(--white);
  text-align: center;
}

.task-statistics-screen__subtitle {
  margin-top: 1rem;
  margin-bottom: 2.5rem;

  font: var(--font-body-2-medium);
  color: var(--white-80);
  text-align: center;
}

.task-statistics-screen__card-list {
  margin: auto;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
}

.ai-chat-page {
  height: 100%;
}

.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(--white-15);
}

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

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

.progress-bar.with-growth.growing .progress-bar__thumb::after {
  position: absolute;
  height: 100%;
  width: 0.75rem;
  content: "";
  right: 0;
  background: linear-gradient(
    90deg,
    var(--amber-dawn-lighter) 0%,
    var(--amber-dawn) 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(--amber-dawn);
  }
  50% {
    box-shadow: 2px 0 8px 2px var(--amber-dawn);
  }
  100% {
    box-shadow: 2px 0 8px 1px var(--amber-dawn);
  }
}

.question-card {
  height: 100%;
  gap: 1rem;
}

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

.question-card__header__text-wrap {
  align-items: flex-start;
}

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

.question-card__header__subtitle {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  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;
}
.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;
}

.dictionary-entry-audio__button {
  display: flex;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  align-items: center;
  justify-content: center;
  background-color: var(--amber-dawn);
  cursor: pointer;
}

.dictionary-entry-audio__button.playing {
  animation: message-audio-playback-glow infinite 2s;
}

.dictionary-entry-audio__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: white;
}

@keyframes dictionary-entry-audio-playback-glow {
  0% {
    box-shadow: 0 0 2px 1px var(--amber-dawn-lighter);
  }
  50% {
    box-shadow: 0 0 8px 1px var(--amber-dawn-lighter);
  }
  100% {
    box-shadow: 0 0 2px 1px var(--amber-dawn-lighter);
  }
}

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

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

.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);
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-height: 700px) {
  .answer-result-card {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }
}

.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;
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-height: 700px) {
  .phrase-scramble-form__option-list {
    gap: 0.75rem;
    row-gap: 0.75rem;
  }

  .word-scramble-form__option {
    height: 3rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.word-scramble-form__hints {
  gap: 1.75rem;
}

.word-scramble-form__definition {
  font-family: "Mulish";
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 800;
  text-align: center;
}

.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;
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-height: 700px) {
  .word-scramble-form__hints {
    gap: 1.25rem;
  }

  .word-scramble-form__option-list {
    gap: 0.75rem;
    row-gap: 0.75rem;
  }

  .word-scramble-form__option {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.375rem;
  }
}

.question-card-scramble__form {
  width: 100%;
  margin: auto;
  margin-bottom: 2rem;
  gap: 1.75rem;
}

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

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

/* Extra-small devices, like iPhone SE */
@media screen and (max-height: 700px) {
  .question-card-scramble__form {
    gap: 1.25rem;
  }
}
.dictionary-entry-image {
  display: flex;
  flex-shrink: 0;

  object-fit: contain;
  width: auto;
  height: 7.5rem;
  border-radius: 0.625rem;

  align-self: center;
}

.dictionary-entry-image:not(.loaded) {
  visibility: hidden;
  height: 0 !important;
}

.dictionary-entry-image.loaded {
  visibility: visible;
  animation: fade-in ease-in 750ms;
  transition: height ease 250ms;
}
.dictionary-entry-header {
  justify-content: center;
  width: 100%;
  gap: 1.25rem;
  padding: 2rem 1rem;
  border-radius: 1rem;
  background: var(--midnight-teal-80);
}

.dictionary-entry-header__word {
  width: 100%;
  font-family: var(--ff-main);
  font-size: 2.25rem;
  line-height: 112%;
  font-weight: var(--fw-bold);
  color: var(--white);
  text-align: center;
}

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

.dictionary-entry-header__transcript {
  font: var(--font-body-2-medium);
  color: var(--white);
}

.dictionary-entry-image {
  margin-bottom: -2rem;
}
.dictionary-entry-meaning {
  flex-shrink: 0;
  gap: 0.5rem;
  align-items: flex-start;
}

.dictionary-entry-meaning__label {
  font: var(--font-body-4);
  color: var(--white-50);
}

.dictionary-entry-meaning__value {
  font: var(--font-body-2-medium);
  color: var(--white);
}
.dictionary-entry-example {
  flex-shrink: 0;
  align-items: flex-start;
  gap: 0.625rem;
}

.dictionary-entry-example__sentence * {
  font: var(--font-body-2-medium);
  color: var(--white);
}

.dictionary-entry-example__sentence strong {
  color: var(--sunlit-sand);
}

.dictionary-entry-example__translation {
  animation: fade-in ease-in 500ms, slide-down ease-in 500ms;
}

.dictionary-entry-example__translation * {
  font: var(--font-body-4);
  color: color-mix(in srgb, var(--white) 70%, transparent 30%);
}

.dictionary-entry-example__translation strong {
  color: color-mix(in srgb, var(--sunlit-sand) 70%, transparent 30%);
}

.dictionary-entry-example-list {
  flex-shrink: 0;
  gap: 0.5rem;
  align-items: flex-start;
}

.dictionary-entry-example-list__label {
  font: var(--font-body-4);
  color: var(--white-50);
}

.dictionary-entry-example-list__list {
  gap: 1rem;
}
.dictionary-entry-synonym-list {
  flex-shrink: 0;
  gap: 0.5rem;
  align-items: flex-start;

  padding: 0.75rem 1rem;
  background-color: color-mix(in srgb, var(--white) 5%, transparent 95%);
  border-radius: 0.625rem;
}

.dictionary-entry-synonym-list__label {
  font: var(--font-body-4);
  color: var(--white-50);
}

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

.dictionary-entry-synonym-list__list-item {
  font: var(--font-body-2-medium);
  color: var(--sunlit-sand);
}

.dictionary-entry-synonym-list__synonym * {
  font: var(--font-body-2-medium);
  color: var(--white);
}
.generic-dictionary-entry-card {
  width: 100%;
  gap: 1.5rem;
}

.dictionary-entry-card-skeleton {
  width: 100%;
  gap: 1.5rem;
}

.dictionary-entry-card-skeleton__header {
  width: 100%;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  border-radius: 1rem;
  background: var(--midnight-teal-80);
}

.dictionary-entry-card-skeleton__word {
  width: 12rem;
  font-family: var(--ff-main);
  font-size: 2.25rem;
  line-height: 112%;
  font-weight: var(--fw-bold);
}

.dictionary-entry-card-skeleton__transcription-wrap {
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.dictionary-entry-card-skeleton__transcription {
  width: 7rem;
  font: var(--font-body-2-medium);
}

.dictionary-entry-card-skeleton__audio {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
}

.dictionary-entry-card-skeleton__wrap-with-label,
.dictionary-entry-card-skeleton__synonym-list {
  flex-shrink: 0;
  gap: 0.5rem;
  align-items: flex-start;
}

.dictionary-entry-card-skeleton__label {
  width: 5rem;
  font: var(--font-body-4);
}

.dictionary-entry-card-skeleton__meaning {
  width: 10rem;
  font: var(--font-body-2-medium);
}

.dictionary-entry-card-skeleton__example-list {
  width: 100%;
  gap: 1rem;
  align-items: flex-start;
}

.dictionary-entry-card-skeleton__example-list__item {
  width: 80%;
  font: var(--font-body-2-medium);
}

.dictionary-entry-card-skeleton__example-list__item:nth-of-type(2) {
  width: 95%;
}

.dictionary-entry-card-skeleton__synonym-list {
  flex-shrink: 0;
  gap: 0.5rem;
  align-items: flex-start;

  padding: 0.75rem 1rem;
  background-color: color-mix(in srgb, var(--white) 5%, transparent 95%);
  border-radius: 0.625rem;
}

.dictionary-entry-card-skeleton__synonym-list__title {
  width: 8rem;
  height: 1.75rem;
}

.dictionary-entry-card-skeleton__synonym-list__list {
  gap: 0.25rem;
}

.dictionary-entry-card-skeleton__synonym-list__item {
  width: 12rem;
  height: 1rem;
}

.question-card-card-review-skeleton {
  width: 100%;
  height: 100%;
}

.question-card-card-review-skeleton__card {
  width: 100%;
}

.question-card-card-review-skeleton__card > .dictionary-entry-card-skeleton__header {
  background: var(--abbyss-blue);
}

.question-card-card-review-skeleton__controls {
  margin-top: auto;
  width: 100%;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.question-card-card-review-skeleton__controls__question {
  width: 15rem;
  font: var(--font-body-2);
}

.question-card-card-review-skeleton__controls__button-wrap {
  width: 100%;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.question-card-card-review-skeleton__controls__button {
  width: calc((100% - 0.625rem) / 2);
  height: 3.5rem;
  border-radius: 1.125rem;
}
.question-card-card-review-controls {
  width: 100%;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.question-card-card-review-controls__question {
  font: var(--font-body-2);
  color: var(--white-80);
  text-align: center;
}

.question-card-card-review-controls__button-wrap {
  width: 100%;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
}

.question-card-card-review-controls__button {
  width: calc((100% - 0.625rem) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.question-card-card-review-controls__forgot-button,
.question-card-card-review-controls__incorrect-button {
  background-color: white;
  color: var(--midnight-teal);
}

.question-card-card-review-controls__repeat-again-button {
  width: 100%;
}
.question-card-card-review {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 1.25rem;

  animation: fade-in forwards 500ms, slide-left forwards 500ms;
}

.question-card-card-review > .question-card__content {
  position: relative;
  background-color: transparent;
}

.question-card-card-review__skeleton {
  position: absolute;
  top: 0rem;
  left: 0;
  padding: 0 1.25rem 1.25rem;
  pointer-events: none;

  opacity: 1;
  transition: opacity ease-out 350ms;
}

.question-card-card-review__skeleton.hidden {
  opacity: 0;
}

.question-card-card-review__entry-card > .dictionary-entry-header {
  background: var(--abbyss-blue);
}

.question-card-card-review__entry-card
  > .dictionary-entry-header
  > .dictionary-entry-image {
  margin-bottom: -1rem;
}

.question-card-card-review__entry-card > * {
  animation: fade-in ease-in 250ms;
}

.question-card-card-review__footer {
  margin-top: auto;
  padding-top: 4.5rem;
}

.vocabulary-practice-view {
  width: 100%;
  height: 100%;
  gap: 1rem;
  margin: auto;
}

.vocabulary-practice-view__header {
  gap: 2rem;
}

.vocabulary-practice-view__progress-bar {
  width: 100%;
  height: 0.375rem;
  margin: auto;
}

.vocabulary-practice-view__progress-bar > .progress-bar__thumb {
  background: var(--gradient-amber-dawn-to-sunlit-sand);
}

.vocabulary-practice-view__content {
  width: 100%;
  height: 100%;
  padding-top: 4rem; /* Height of the header */
}


.onboarding-screen-title {
  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 0ms;

  font: var(--font-header-1);
  color: var(--white);
  text-align: left;
}
.onboarding-screen-subtitle {
  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 150ms;
  margin-top: 1.25rem;

  font: var(--font-body-2);
  color: var(--white-80);
  text-align: left;
}

.onboarding-screen-cta {
  margin-top: auto;
  flex-shrink: 0;

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

.onboarding-screen-cta:disabled {
  opacity: 0;
}
.onboarding-intro-screen {
  height: 100%;
}

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

  opacity: 0;
  animation: fade-in forwards 750ms, slide-down forwards 750ms;
  animation-delay: 500ms;
}
.language-selection-option {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 3rem;
  border-radius: 3.5rem;
  padding: 0.375rem;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  background: var(--abbyss-blue-50);
  cursor: pointer;
}

.language-selection-option.selected {
  box-shadow: 0 0 1px 1px var(--verdant-cyan);
}

.language-selection-option__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: var(--white);
}

.language-selection-option__text {
  font: var(--font-body-2);
  color: var(--white);
  text-align: left;
}

.language-selection-option__selection-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--verdant-cyan);
}
.language-selection-screen {
  height: 100%;
}

.language-selection-screen__answer-list {
  margin-top: 2.5rem;
}

.language-level-selection-screen {
  height: 100%;
}

.language-level-selection-screen__answer-list {
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.language-level-selection-screen__option-button {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  flex-shrink: 0;
  padding: 1.125rem;
  border-radius: 1.25rem;
  cursor: pointer;

  align-items: flex-start;
  gap: 0.625rem;

  background: var(--abbyss-blue-50);
}

.language-level-selection-screen__option-button.selected {
  background: var(--verdant-cyan);
}

.language-level-selection-screen__option-button__title {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.language-level-selection-screen__option-button__label {
  font: var(--font-body-3);
  color: var(--white-50);
  text-align: left;
}

.course-tag-badge-cloud {
  flex-wrap: wrap;
  gap: 0.625rem;
  row-gap: 0.625rem;
  align-items: center;
  justify-content: flex-start;
}

.course-tag-badge-cloud__tag {
  flex-grow: 1;
  max-width: 45%;
  min-width: -webkit-fit-content;
  min-width: fit-content;
  height: 2rem;
  padding: 0.375rem 0.75rem;
}

.course-tag-badge-cloud__tag > .course-tag-badge__text {
  font: var(--font-body-3);
}
.interest-selection-screen {
  height: 100%;
}

.interest-selection-screen__content {
  position: relative;
  width: 100%;
  margin: 2.5rem 0;

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

.interest-selection-screen__content > div:first-of-type {
  padding: 0.5rem 0;
}

.interest-selection-screen__content__top-fade,
.interest-selection-screen__content__bottom-fade {
  position: fixed;
  left: 0;
  width: 100%;
  height: 0.5rem;
}

.interest-selection-screen__content__top-fade {
  top: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 75%
  );
}

.interest-selection-screen__content__bottom-fade {
  bottom: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 75%
  );
}
.target-level-screen {
  height: 100%;
}

.target-level-screen__answer-list {
  margin-top: 2.5rem;
}

.target-level-screen__option {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  width: 100%;
  padding-right: 1.125rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  border-radius: 1.25rem;
  background: var(--abbyss-blue-50);
  cursor: pointer;
}

.target-level-screen__option.selected {
  background: var(--verdant-cyan);
}

.target-level-screen__option__level {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  background: var(--white-5);

  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.target-level-screen__option__description {
  font: var(--font-body-2-medium);
  color: var(--white);
  text-align: left;
}
.reading-intro-screen {
  height: 100%;
}
.close-button {
  display: flex;
  flex-shrink: 0;
  position: absolute; 
  top: 1.25rem; 
  right: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;

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

  cursor: pointer;
}

.close-button__icon {
  display: flex;
  color: var(--white);
}

.course-lesson-content-header {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--midnight-teal);
}

.course-lesson-content-header__close-button {
  position: relative;
  top: unset;
  right: unset;
}

.course-lesson-content-header__switch__inline-hint-wrapper {
  margin-left: auto;
}

.course-lesson-content-header__switch__inline-hint-wrapper
  .inline-hint-wrapper__focused-element {
  border-radius: 0.625rem;
}

.markdown-vocabulary-word__inline-hint-wrapper {
  display: inline-flex;
}

.markdown-vocabulary-word__inline-hint-wrapper > .inline-hint-wrapper__focused-element {
  background-color: var(--midnight-teal);
  padding: 0 0.125rem;
  border-radius: 0.375rem;
}

.markdown-vocabulary-word {
  cursor: pointer;
  padding: 0 0.125rem;
  border-radius: 0.375rem;
  margin: 0 -1px;
}

@media (hover: hover) {
  .markdown-vocabulary-word:hover {
    animation: highlight-on-focus 350ms forwards 250ms;
  }
}

.markdown-vocabulary-word.focused {
  animation: highlight-on-focus 350ms forwards;
}

.markdown-vocabulary-word.unfocusing {
  color: var(--white);
  background-color: var(--verdant-cyan);
  animation: remove-highlight-on-unfocus 750ms forwards 150ms;
}

@keyframes highlight-on-focus {
  0% {
    background-color: transparent;
    color: revert;
  }
  100% {
    background-color: var(--verdant-cyan);
    color: var(--white);
  }
}

@keyframes remove-highlight-on-unfocus {
  0% {
    background-color: var(--verdant-cyan);
    color: var(--white);
  }
  100% {
    background-color: transparent;
    color: revert;
  }
}
.course-lesson-content-page {
  position: relative;
}

.course-lesson-content-page > .markdown * {
  font: var(--font-body-5);
  color: var(--white-80);
  letter-spacing: 0.25px;
}

.course-lesson-content-page > .markdown strong,
.course-lesson-content-page > .markdown strong * {
  color: var(--white);
  font-weight: var(--fw-bold);
}

.course-lesson-content-page > .markdown em,
.course-lesson-content-page > .markdown em * {
  color: var(--sunlit-sand);
}

.course-lesson-content-page > .markdown blockquote {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  background: var(--abbyss-blue-50);
  border-radius: 0.875rem;
  align-items: center;
  text-align: center;
}
.course-lesson-content-page > .markdown blockquote * {
  color: var(--white);
}

.course-lesson-content-page > .markdown h1,
.course-lesson-content-page > .markdown h1 *,
.course-lesson-content-page > .markdown h2,
.course-lesson-content-page > .markdown h2 * {
  font: var(--font-header-2);
}

.course-lesson-content-page > .markdown h3,
.course-lesson-content-page > .markdown h3 * {
  font: var(--font-body-1);
  color: var(--white-50);
}

.course-lesson-content-page > .markdown .markdown-image {
  background-color: var(--white);
  border-radius: 0.625rem;
}

/* Cascade appearance animation for markdown content */

.course-lesson-content-page > .markdown > * {
  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 1500ms, 1500ms; /* This will only be applied to child elements starting from 11th element and onwards. For the first 10 elements, a progressive delay increase will be applied */
}

.course-lesson-content-page > .markdown > *:nth-child(1) {
  animation-delay: 0ms, 0ms;
}
.course-lesson-content-page > .markdown > *:nth-child(2) {
  animation-delay: 150ms, 150ms;
}
.course-lesson-content-page > .markdown > *:nth-child(3) {
  animation-delay: 300ms, 300ms;
}
.course-lesson-content-page > .markdown > *:nth-child(4) {
  animation-delay: 450ms, 450ms;
}
.course-lesson-content-page > .markdown > *:nth-child(5) {
  animation-delay: 600ms, 600ms;
}
.course-lesson-content-page > .markdown > *:nth-child(6) {
  animation-delay: 750ms, 750ms;
}
.course-lesson-content-page > .markdown > *:nth-child(7) {
  animation-delay: 900ms, 900ms;
}
.course-lesson-content-page > .markdown > *:nth-child(8) {
  animation-delay: 1050ms, 1050ms;
}
.course-lesson-content-page > .markdown > *:nth-child(9) {
  animation-delay: 1200ms, 1200ms;
}
.course-lesson-content-page > .markdown > *:nth-child(10) {
  animation-delay: 1350ms, 1350ms;
}

.reading-demo-content-view {
  gap: 1.25rem;
}

.reading-demo-content-view__header > .course-lesson-content-header__close-button {
  display: none;
}

.reading-demo-content-view__header > .course-lesson-content-header__switch {
  margin-left: auto;
}

.reading-demo-content-view__content > .markdown > * {
  opacity: 1;
  animation: none;
}
.reading-demo-screen {
  position: relative;
  height: 100%;
  gap: 1rem;
}

.reading-demo-screen__content-view {
  animation: fade-in ease-in 500ms, slide-down ease-in 500ms;
}

.reading-demo-screen__footer {
  margin-top: auto;
  width: 100%;
  gap: 0.75rem;

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

.reading-demo-screen__required-vocabulary-size {
  margin: 0 auto;
  width: -webkit-fit-content;
  width: fit-content;
  padding: 0.5rem 0.75rem;
  background: var(--abbyss-blue-50);
  border-radius: 0.25rem;
}

.reading-demo-screen__required-vocabulary-size * {
  font: var(--font-body-4);
  color: var(--white-80);
  text-align: center;
}

.reading-demo-screen__required-vocabulary-size strong {
  font-weight: var(--fw-bold);
}

.reading-demo-screen__cta {
  animation: none;
  opacity: 1;
}

.reading-demo-screen__cta:disabled {
  opacity: 0.5;
}

.chat-intro-screen {
  height: 100%;
}
/* FIXME: THIS IS HORRENDOUS */
.chat-demo-screen {
  position: relative;
  width: calc(
    100% + 1.25rem + 1.25rem
  ); /* Full width + horizontal paddings of the parent page */
  margin-left: -1.25rem; /* Shift content to appear edge-to-edge */
  height: calc(
    100vh - 1.25rem - 1.5rem - 1.25rem - 0.75rem
  ); /* Full screen height - top padding of the parent page */
  margin-bottom: -1.25rem; /* Adjust for bottom padding of the parent page */

  animation: fade-in ease-in 500ms;
}

.chat-demo-screen__chat-area {
  background: var(--abbyss-blue-darker);
}

.chat-demo-screen__chat-area > .ai-chat-area__header {
  background: var(--midnight-teal);
  box-shadow: 0 0.625rem 0.5rem 0.125rem var(--abbyss-blue-darker);
  padding-top: 0;
  height: calc(8rem - 1.25rem);
}

.chat-demo-screen__chat-area .ai-chat-message-list__fade-gradient__bottom {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--abbyss-blue-darker) 0%, transparent 100%) 0%,
    var(--abbyss-blue-darker) 70%
  );
}

.chat-demo-screen__cta {
  width: calc(100% - 1.25rem - 1.25rem); /* Adjust width to align with parent page paddings */
  margin: auto;
  animation: none;
  opacity: 1;
}

.vocabulary-intro-screen {
  height: 100%;
}

.vocabulary-demo-screen {
  position: relative;
  width: 100%;
  height: 100%;

  animation: fade-in ease-in 500ms;
}

.vocabulary-demo-screen__practice-view > .vocabulary-practice-view__header {
  display: none;
}

.vocabulary-demo-screen__practice-view .question-card-card-review,
.vocabulary-demo-screen__practice-view  .question-card-card-review__skeleton {
  padding: 0rem;
}


.vocabulary-demo-screen__practice-view .vocabulary-practice-view__content {
  height: calc(100% + 1.25rem);
  margin-bottom: -1.25rem;
  padding: 0rem;
}
.learning-reminders-screen {
  height: 100%;
}

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

  z-index: 1;

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

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

  opacity: 1;
  animation: none;
}

.recommendations-loader {
  position: relative;
  display: flex;
  position: fixed;
  align-self: center;
  top: calc(50% - 3rem);
  width: 12rem;
  height: 12rem;
  margin: auto;
  opacity: 1;
  background: transparent;

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

.recommendations-loader .CircularProgressbar-trail {
  display: none;
  stroke: none;
}

.recommendations-loader .CircularProgressbar-path {
  stroke: var(--sunlit-sand);
}

.recommendations-loader .CircularProgressbar-text {
  font-family: var(--ff-main);
  fill: var(--sunlit-sand);
}

.recommendations-loader.loaded {
  animation: recommendations-loader-growth forwards 800ms;
}

.recommendations-loader.loaded .CircularProgressbar-path {
  animation: recommendations-loader-path-color-change forwards 1000ms;
}

.recommendations-loader.loaded .CircularProgressbar-text {
  animation: recommendations-loader-text-color-change forwards 1000ms;
}

.recommendations-loader.hidden {
  opacity: 0;
}

@keyframes recommendations-loader-growth {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

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

.onboarding-outro-screen__recommendations-loader {
  pointer-events: none;
}

.onboarding-outro-screen__finishing-background {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  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: 1;
}

.onboarding-outro-screen__finishing-background::after {
  display: flex;
  content: '';
  width: 250rem;
  height: 250rem;
  border-radius: 100%;
  border: 1000rem solid var(--midnight-teal);
  flex-shrink: 0;
  overflow: visible;

  animation: onboarding-outro-finishing-background-shrink forwards 1s;
}

@keyframes onboarding-outro-finishing-background-shrink {
  0% {
    width: 200rem;
    height: 200rem;
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}
.onboarding-page-header {
  align-items: center;
  gap: 2rem;
  opacity: 0;
  animation: forwards fade-in 2000ms;
}

.onboarding-page-hader__back-button {
  width: 1.5rem;
  height: 1.5rem;
}

.onboarding-page-header__progress-bar {
  width: 100%;
  height: 0.375rem;
}

.onboarding-page-header__progress-bar > .progress-bar__thumb {
  background: var(--gradient-amber-dawn-to-sunlit-sand);
}

.onboarding-page {
  height: 100%;
  width: 100%;
  align-items: flex-start;
}

.onboarding-page__header {
  position: fixed;
  width: 100%;
  max-width: var(--max-content-width);
  padding: 1.25rem;
  height: calc(
    1.25rem + 1.5rem + 1.25rem
  ); /* Padding Top + Content Height + Padding Bottom */
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 15%
  );

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

.onboarding-page__content {
  width: 100%;
  height: 100%;
  padding: calc(1.25rem + 1.5rem + 1.25rem + 0.75rem) 1.25rem 1.25rem;
}

.learning-root-screen-skeleton-loader__header {
  width: 100%;
  flex-shrink: 0;
  padding: 1.25rem;
  background: var(--abbyss-blue-darker);
  box-shadow: 0 0 0.5rem 0.25rem var(--midnight-teal);
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1;

  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.learning-root-screen-skeleton-loader__header__greeting {
  width: 12rem;
  font: var(--font-body-1);
}

.learning-root-screen-skeleton-loader__header__streak {
  flex-shrink: 0;
  width: 4.25rem;
  height: 2rem;
  border-radius: 0.625rem;
  padding-right: 0.125rem;
}

.learning-root-screen-skeleton-loader__content {
  width: 100%;
  height: 100%;
  position: relative;
  gap: 0.75rem;
  align-items: center;
  padding: 1.5rem 1.25rem 1rem;
  overflow: auto;
  
  animation: fade-in ease-in 125ms;
}

.learning-root-screen-skeleton-loader__secondary-task-row {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.learning-root-screen-skeleton-loader__reading-widget {
  flex-shrink: 0;
  gap: 0.75rem;

  width: 100%;
  height: 13.25rem;
  align-items: flex-start;
  padding: 0.75rem;

  background-color: var(--verdant-cyan);
  border-radius: 1.25rem;
}

.learning-root-screen-skeleton-loader__reading-widget__cover {
  width: 7.75rem;
  height: 11.75rem;
  border-radius: 0.625rem;
  flex-shrink: 0;
}

.learning-root-screen-skeleton-loader__reading-widget__content {
  width: 100%;
  height: 100%;
  padding-top: 0.5rem;
}

.learning-root-screen-skeleton-loader__reading-widget__chapter {
  width: 4.25rem;
  font: var(--font-body-4);
  margin-bottom: 0.75rem;
}

.learning-root-screen-skeleton-loader__reading-widget__progress-bar {
  width: 100%;
  height: 0.375rem;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.learning-root-screen-skeleton-loader__reading-widget__name {
  width: 10rem;
  font: var(--font-header-4);
}

.learning-root-screen-skeleton-loader__reading-widget__author {
  width: 7rem;
  font: var(--font-body-4);
  margin-top: 0.875rem;
}

.learning-root-screen-skeleton-loader__current-discussion-widget,
.learning-root-screen-skeleton-loader__current-word-practice-widget {
  width: calc((100% - 0.625rem) / 2);
  height: 12.25rem;
  padding: 0.75rem;
  border-radius: 1.25rem;

  flex-shrink: 0;
  gap: 0.75rem;
  align-items: flex-start;
}

.learning-root-screen-skeleton-loader__current-discussion-widget {
  background: var(--abbyss-blue);
}

.learning-root-screen-skeleton-loader__current-word-practice-widget {
  background: var(--nordic-blue);
}

.learning-root-screen-skeleton-loader__current-discussion-widget__character-list,
.learning-root-screen-skeleton-loader__current-word-practice-widget__word-count {
  width: 100%;
  height: 3.5rem;
  padding: 0.625rem 0.5rem;
  background-color: var(--white-15);
  border-radius: 0.625rem;
}

.learning-root-screen-skeleton-loader__current-discussion-widget__title,
.learning-root-screen-skeleton-loader__current-word-practice-widget__title {
  width: 80%;
  font: var(--font-header-4);
}

.learning-root-screen-skeleton-loader__reading-widget__cta,
.learning-root-screen-skeleton-loader__current-discussion-widget__cta,
.learning-root-screen-skeleton-loader__current-word-practice-widget__cta {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  margin-top: auto;
  margin-left: auto;
}

.user-greeting-widget {
  font: var(--font-body-1);
  color: var(--white);
}
.current-streak-widget {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 4.25rem;
  height: 2rem;
  border-radius: 0.625rem;
  padding-right: 0.125rem;
  align-items: center;
  justify-content: space-between;

  background-color: var(--midnight-teal);
}

.current-streak-widget__icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.current-streak-widget__icon-inactive,
.current-streak-widget__icon-active {
  position: absolute;
  top: 0;
  left: 0;
  flex-shrink: 0;
  transition: opacity linear 100ms;
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  background-color: var(--nordic-blue);
  border-radius: 0.625rem;
}

.current-streak-widget__icon-active {
  opacity: 0;
}

.current-streak-widget.active .current-streak-widget__icon-active {
  opacity: 1;
}

.current-streak-widget.active .current-streak-widget__icon-inactive {
  opacity: 0;
}

.current-streak-widget__text {
  width: 2rem;
  flex-shrink: 0;
  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.current-streak-widget__text.long {
  font-size: 1rem;
}

.current-streak-widget__text.extra-long {
  font-size: 0.75rem;
}
.learning-page-header__content {
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.arrow-indicator {
  display: flex;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.arrow-indicator.light {
  background: var(--white);
}

.arrow-indicator.dark {
  background: var(--midnight-teal);
}

.arrow-indicator.rounded {
  border-radius: 0.75rem;
}

.arrow-indicator.circle {
  border-radius: 100%;
}

.arrow-indicator.none {
  background: transparent;
}

.arrow-indicator__arrow {
  display: flex;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: auto;
}

.arrow-indicator.light > .arrow-indicator__arrow * {
  color: var(--midnight-teal);
}

.arrow-indicator.dark > .arrow-indicator__arrow * {
  background: var(--white);
}

.current-word-practice-widget {
  display: flex;
  flex-direction: column;

  width: calc((100% - 0.625rem) / 2);
  height: 12.25rem;
  padding: 0.75rem;
  border-radius: 1.25rem;
  background: var(--nordic-blue);

  flex-shrink: 0;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
}

.current-word-practice-widget__title {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.current-word-practice-widget__content {
  width: 100%;
  height: 3.5rem;
  padding: 0.625rem 0.5rem;
  gap: 0.375rem;
  align-items: center;

  background-color: var(--white-15);
  border-radius: 0.625rem;
}

.current-word-practice-widget__word-count {
  font-family: var(--ff-main);
  font-size: 2.25rem;
  line-height: 100%;
  font-weight: var(--fw-extra-bold);
  color: var(--white);
  min-width: 3.5rem;
  text-align: center;
  letter-spacing: -1px;
}

.current-word-practice-widget__text {
  font: var(--font-body-4);
  text-align: left;
  color: var(--white);
}

.current-word-practice-widget__book-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.current-word-practice-widget__fallback-text {
  font-family: var(--ff-main);
  font-size: 0.625rem;
  line-height: 120%;
  font-weight: var(--fw-medium);
  text-align: left;
  color: var(--white);
}

.current-word-practice-widget__arrow-indicator {
  margin-top: auto;
  margin-left: auto;
}

.current-word-practice-widget__inline-hint-wrapper {
  width: calc((100% - 0.625rem) / 2);
}

.current-word-practice-widget__inline-hint-wrapper
  > .inline-hint-wrapper__focused-element {
  width: 100%;
  border-radius: 1.25rem;
}

.current-word-practice-widget__inline-hint-wrapper
  > .inline-hint-wrapper__focused-element
  > .current-word-practice-widget {
  width: 100%;
}

.placeholder-cover {
  overflow: hidden;
  background: var(--abbyss-blue);
}

.placeholder-cover__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(0.375rem);
}

.course-cover {
  width: 7.75rem;
  height: 11.75rem;
  flex-shrink: 0;
  position: relative;
  border-radius: 0.625rem;
}

.course-cover__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 124 / 188;
  border-radius: inherit;
}
.current-reading-card {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;

  width: 100%;
  height: 13.25rem;
  align-items: flex-start;
  padding: 0.75rem;

  background-color: var(--verdant-cyan);
  border-radius: 1.25rem;
  cursor: pointer;
}

.current-reading-card__course-cover {
  width: 7.75rem;
  height: 11.75rem;
}

.current-reading-card__content {
  width: 100%;
  height: 100%;
  padding-top: 0.5rem;
}

.current-reading-card__chapter-text {
  font: var(--font-body-4);
  color: var(--white);
  margin-bottom: 0.75rem;
  text-align: left;
}

.current-reading-card__progress {
  width: 100%;
  height: 0.375rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}

.current-reading-card__name {
  flex-shrink: 0;
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;

  /* Limit the name to 3 lines maximum */
  line-clamp: 3;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 0.25rem;
}

.current-reading-card__author {
  flex-shrink: 0;
  font: var(--font-body-4);
  color: var(--white-50);
  margin-top: 0.5rem;
  text-align: left;


  /* Limit the author to 1 line maximum */
  line-clamp: 1;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.current-reading-card__arrow-indicator {
  margin-top: auto;
  margin-left: auto;
}
.change-reading-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;

  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem 0 1rem;

  border-radius: 0.875rem;
  background-color: var(--white);
  cursor: pointer;
}

.change-reading-button__text {
  font: var(--font-header-4);
  color: var(--midnight-teal);
}

.change-reading-button__arrow-indicator {
  margin-left: auto;
}
.current-reading-widget {
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  gap: 0.75rem;
}
.next-reading-selection-widget {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1.25rem;

  width: 100%;
  height: 13.25rem;
  align-items: flex-start;
  padding: 0.75rem;

  background-color: var(--verdant-cyan);
  border-radius: 1.25rem;
  cursor: pointer;
}

.next-reading-selection-widget__title {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.next-reading-selection-widget__content {
  width: 100%;
  gap: 1.5rem;
  align-items: flex-end;
}

.next-reading-selection-widget__course-cover {
  width: 6rem;
  height: 9.125rem;

  box-shadow: 0 0 0 0.5rem var(--verdant-cyan);
}

.next-reading-selection-widget__course-cover:not(:first-of-type) {
  margin-left: -1.25rem;
}

.next-reading-selection-widget__arrow-indicator {
  margin-left: auto;
}

.next-reading-selection-widget__inline-hint-wrapper {
  width: 100%;
}

.next-reading-selection-widget__inline-hint-wrapper > .inline-hint-wrapper__focused-element {
  width: 100%;
  border-radius: 1.25rem;
}
.current-discussion-widget {
  display: flex;
  flex-direction: column;
  width: calc((100% - 0.625rem) / 2);
  height: 12.25rem;
  padding: 0.75rem;
  border-radius: 1.25rem;
  background: var(--abbyss-blue);

  flex-shrink: 0;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
}

.current-discussion-widget__title {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.current-discussion-widget__character-preview-list {
  width: 100%;
  height: 3.5rem;
  padding: 0.625rem;
  align-items: center;

  background-color: var(--white-15);
  border-radius: 0.625rem;
}

.current-discussion-widget__character-preview:not(:first-of-type) {
  margin-left: -0.5rem;
}

.current-discussion-widget__character-preview__avatar {
  width: 2.25rem;
  height: 2.25rem;
  box-shadow: 0 0 0 0.25rem #3a556a;
}

.current-discussion-widget__arrow-indicator {
  margin-top: auto;
  margin-left: auto;
}

.current-discussion-widget__inline-hint-wrapper {
  width: calc((100% - 0.625rem) / 2);
}

.current-discussion-widget__inline-hint-wrapper
  > .inline-hint-wrapper__focused-element {
  width: 100%;
  border-radius: 1.25rem;
}

.current-discussion-widget__inline-hint-wrapper
  > .inline-hint-wrapper__focused-element
  > .current-discussion-widget {
  width: 100%;
}

.learning-page {
  position: relative;
  width: 100%;
  height: 100%;
}

.learning-page__skeleton-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  opacity: 1;
  transition: opacity ease-out 350ms;
}

.learning-page__skeleton-loader.hidden {
  opacity: 0;
}

.learning-page__header > * {
  animation: fade-in ease-in 125ms;
}

.learning-page__content {
  width: 100%;
  height: 100%;
  position: relative;
  gap: 0.75rem;
  align-items: center;
  padding: 1.5rem 1.25rem 1rem;
  overflow: auto;
  
  animation: fade-in ease-in 125ms;
}

.learning-page__secondary-task-row {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.learning-page__inline-hint-wrapper {
  width: 100%;
  margin: 0 auto;
}

.learning-page__inline-hint-wrapper .inline-hint-wrapper__focused-element {
  border-radius: 0.75rem;
  background-color: #fafafa;
  width: 100%;
}

.bookmark-button {
  display: flex;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
}

.bookmark-button__icon {
  width: 100%;
  height: 100%;
  color: var(--white);
}
.course-type-badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: -webkit-fit-content;

  width: fit-content;
  height: 1.5rem;

  padding: 0 0.5rem;
  border: 1px solid var(--white);
  border-radius: 0.5rem;

  font: var(--font-tiny);
  color: var(--white);
}

.course-type-badge.BOOK {
  border-color: var(--verdant-cyan);
}

.course-type-badge.FICTION {
  border-color: var(--sunlit-sand);
}

.course-type-badge.ARTICLE {
  border-color: var(--nordic-blue);
}
.course-tag-badge-list {
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 0.5rem;
  justify-content: center;
  flex-shrink: 0;
}

.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,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 70%
  );
  left: 0;
}
.horizontal-scroll-with-fades__right-fade-gradient {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 70%
  );
  right: 0;
}
.load-more-cover {
  position: relative;
  border-radius: 1.25rem;
}

.load-more-cover__cover-shadow {
  position: absolute;
  top: -1rem;
  left: calc(50% - (100% - 2.5rem)/2);

  width: calc(100% - 2.5rem);
  height: 100%;
  border-radius: 1rem;
  background: var(--abbyss-blue-50);
}

.load-more-cover__cover {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.load-more-cover__text {
  position: absolute;

  width: 100%;
  height: 3.5rem;

  text-align: center;
  top: calc(50% - 1.75rem);

  font: var(--font-body-5);
  color: var(--white);
}
.reading-selection-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.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__carousel-wrap {
  position: relative;
  width: 100%;
  margin-top: 2.75rem;
  padding: 1.25rem 0;
}

.reading-selection-screen__carousel {
  width: calc(100% + 21rem);
  margin-left: -10.5rem;
  padding: 1.25rem 0;
  z-index: unset;
}

.reading-selection-screen__carousel > .swiper-wrapper {
  align-items: center;
  z-index: unset;
}

.reading-selection-screen__carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  animation: fade-in ease-in 1s;
}

.reading-selection-screen__course-cover {
  width: 11.625rem;
  height: 17.625rem;
}

.reading-selection-screen__carousel
  .swiper-slide-active
  .reading-selection-screen__course-cover {
  width: 15.25rem;
  height: 23.125rem;
}

.reading-selection-screen__course-info {
  width: 15.25rem;
  align-self: center;
  align-items: flex-start;
}

.reading-selection-screen__course-details {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.reading-selection-screen__tag-list-scroll {
  margin-top: 1rem;
  margin-left: -0.75rem;
  max-width: calc(100% + 1.5rem);
}

.reading-selection-screen__tag-list {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.reading-selection-screen__course-name {
  margin-top: 1rem;

  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.reading-selection-screen__course-author {
  margin-top: 0.5rem;

  font: var(--font-body-4);
  color: var(--white-50);
  text-align: left;
}

.reading-selection-screen__course-description {
  margin-top: 0.75rem;

  font: var(--font-body-4);
  color: var(--white-80);
  text-align: left;
}

.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-cover > .course-cover__image {
  background-color: none;
  box-shadow: none;
}

.reading-selection-screen__footer {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@keyframes selected-course-cover-zoom {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(2);
  }
}
.user-prgoress-area-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  background: var(--abbyss-blue);
  color: var(--white);
  border-radius: 0.75rem;
}

.change-indicator-icon {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background-color: var(--amber-dawn);
  border: 1px solid var(--sunlit-sand);
}
.trend-icon {
  display: flex;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;

  transition: all ease-in-out 500ms;
}

.trend-icon * {
  transition: all ease-in-out 500ms;
}

.trend-icon.none {
  display: none;
}

.trend-icon.positive * {
  color: var(--green-60);
}

.trend-icon.negative {
  transform: rotate(180deg);
}

.trend-icon.negative * {
  color: var(--red-60);
}
.user-progress-area-progress-info {
  gap: 0.25rem;
  align-items: flex-end;
}

.user-progress-area-progress-info__trend-icon {
  width: 1rem;
  height: 1rem;
}

.user-progress-area-progress-info__progress-text {
  font: var(--font-body-3);
  color: var(--white);
  text-align: right;
}

.user-progress-area-progress-info__progress-text.positive {
  color: var(--green-60);
}

.user-progress-area-progress-info__progress-text.negative {
  color: var(--red-60);
}
.user-progress-area-card {
  width: 100%;
  padding: 1.125rem;
  border-radius: 1.25rem;
  gap: 1.125rem;

  background: var(--abbyss-blue);
}

.user-progress-area-card__header {
  position: relative;
  width: 100%;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.user-progress-area-card__icon {
  background: var(--midnight-teal);
}

.user-progress-area-card__change-indicator {
  position: absolute;
  top: -0.125rem;
  left: 2.125rem;

  animation: fade-in 250ms forwards, float 1500ms forwards;
}

.user-progress-area-card__progress-info {
  margin-left: auto;
}

.user-progress-area-card__area-info {
  width: 100%;
  gap: 0.625rem;
  align-items: flex-start;
}

.user-progress-area-card__title {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.user-progress-area-card__description {
  font: var(--font-body-3);
  color: var(--white-50);
  text-align: left;
}

.user-progress-radar-chart-label {
  width: 2.5rem;
  height: 3.5rem;

  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-progress-radar-chart-label__progress-info {
  align-items: center;
  flex-shrink: 0;
  gap: 0.25rem;
}

.user-progress-radar-chart-label__progress-value {
  font: var(--font-tiny);
  color: var(--white);
  text-align: center;
}
.user-progress-radar-chart-label__progress-value.negative {
  color: var(--red-60);
}
.user-progress-radar-chart-label__progress-value.positive {
  color: var(--green-60);
}

.user-progress-radar-chart-label__trend-icon {
  height: 0.625rem;
  width: 0.625rem;
}

.user-progress-radar-chart-label__change-indicator {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
}
.user-progress-radar-chart {
  position: relative;

  width: 21rem;
  max-width: 100%;
  height: 21rem;
  align-items: center;
  justify-content: center;

  padding: 3rem;
}

.user-progress-radar-chart__chart {
  display: flex;
  margin: auto;
}

.user-progress-radar-chart__label {
  position: absolute;
}

.user-progress-radar-chart__label:nth-of-type(1) {
  top: -1rem;
  left: calc(50% - 2.5rem / 2);
}

.user-progress-radar-chart__label:nth-of-type(2) {
  top: 6.5rem;
  right: 0%;
}

.user-progress-radar-chart__label:nth-of-type(3) {
  top: 16.75rem;
  right: 3rem;
}

.user-progress-radar-chart__label:nth-of-type(4) {
  top: 16.75rem;
  left: 3rem;
}

.user-progress-radar-chart__label:nth-of-type(5) {
  top: 6.5rem;
  left: 0%;
}
.user-progress-page-header {
  height: 4.75rem;
}

.user-progress-page-header__text {
  font: var(--font-header-2);
  color: var(--white);
  text-align: left;
}
.user-progress-page {
  position: relative;
  width: 100%;
  height: 100%;
}

.user-progress-page__content {
  width: 100%;
  height: 100%;
  padding: 4rem 1.25rem 1.75rem;
  gap: 1.5rem;
  overflow: auto;

  animation: fade-in ease-in 125ms;
}

.user-progress-page__radar-chart {
  margin: auto;
}

.user-progress-page__progress-area-list {
  gap: 0.625rem;
}
.books-page-header {
  gap: 1rem;
  height: 8.375rem;
}

.books-page-header__title {
  font: var(--font-header-1);
  color: var(--white);
  text-align: left;
}

.books-page-header__navigation {
  width: 100%;
  height: 2.625rem;
  border-radius: 0.625rem;
  background: var(--midnight-teal);

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

.books-page-header__navigation__item {
  display: flex;
  flex-direction: row;
  width: calc((100% - 0.25rem) / 2);
  height: 100%;
  border-radius: 0.625rem;

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

  text-decoration: none;

  transition: all ease-in 125ms;
}

.books-page-header__navigation__item > * {
  transition: all ease-in 125ms;
}

.books-page-header__navigation__item.active {
  background: var(--verdant-cyan);
}

.books-page-header__navigation__item__label {
  font-family: var(--ff-main);
  font-size: 1rem;
  line-height: 140%;
  font-weight: var(--fw-medium);
  color: var(--white-25);
  text-align: center;
}

.books-page-header__navigation__item.active
  > .books-page-header__navigation__item__label {
  color: var(--white);
}

.books-page-header__navigation__item__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--white-25);
}

.books-page-header__navigation__item.active
  > .books-page-header__navigation__item__icon {
  color: var(--white);
}

.library-course-card-skeleton {
  align-items: center;
  gap: 0.625rem;
}

.library-course-card-skeleton__cover {
  width: 7.75rem;
  height: 11.75rem;
  border-radius: 0.625rem;
  flex-shrink: 0;
}

.library-course-card-skeleton__info {
  width: 100%;
  padding: 0 0.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.library-course-card-skeleton__type-badge {
  width: 4rem;
  height: 1.5rem;
}

.library-course-card-skeleton__bookmark-button {
  width: 1.5rem;
  height: 1.5rem;
}
.library-collection-card-skeleton {
  width: 6.5rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  gap: 0.5rem;
}

.library-collection-card-skeleton__cover-wrap {
  position: relative;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 0.5rem;
}

.library-collection-card-skeleton__cover-shadow-1,
.library-collection-card-skeleton__cover-shadow-2,
.library-collection-card-skeleton__cover {
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: inherit;
}

.library-collection-card-skeleton__cover-shadow-1 {
  top: 0;
  right: 0;
  background: var(--white-5);
}

.library-collection-card-skeleton__cover-shadow-2 {
  top: 0.5rem;
  right: 0.5rem;
  background: var(--white-10);
}

.library-collection-card-skeleton__cover {
  top: 1rem;
  right: 1rem;
}

.library-collection-card-skeleton__name {
  width: 90%;
  font: var(--font-body-3);
}

.library-collection-card-skeleton__book-count {
  align-items: center;
  gap: 0.25rem;
}

.library-collection-card-skeleton__book-count__icon {
  width: 0.875rem;
  height: 0.875rem;
}

.library-collection-card-skeleton__book-count__count {
  width: 3rem;
  font-size: 0.75rem;
  line-height: 120%;
}
.library-root-screen-skeleton {
  gap: 3rem;
}

.library-root-screen-skeleton__new-courses-list {
  align-items: flex-start;
  gap: 1.5rem;
}

.library-root-screen-skeleton__new-courses-list__title {
  width: 4rem;
  font: var(--font-header-4);
}

.library-root-screen-skeleton__new-courses-list__list {
  gap: 1rem;
}

.library-root-screen-skeleton__collection-list {
  width: 100%;
  align-items: flex-start;
  gap: 1.5rem;
}

.library-root-screen-skeleton__collection-list__title {
  width: 7.5rem;
  font: var(--font-header-4);
}

.library-root-screen-skeleton__collection-list__list {
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: 0.625rem;
  row-gap: 1.5rem;
}

.library-course-card {
  align-items: center;
  gap: 0.625rem;
}

.library-course-card__cover-wrap {
  display: flex;
  text-decoration: none;
}

.library-course-card__cover {
  width: 7.75rem;
  height: 11.75rem;
}

.library-course-card__info {
  width: 100%;
  padding: 0 0.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.library-course-card__bookmark-button {
  width: 1.5rem;
  height: 1.5rem;
}
.library-new-courses-list {
  align-items: flex-start;
  gap: 1.5rem;
}

.library-new-courses-list__title {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.library-new-courses-list__list {
  gap: 1rem;
}
.library-collection-card {
  width: 6.5rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  gap: 0.5rem;
}

.library-collection-card__cover-wrap {
  position: relative;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 0.5rem;
}

.library-collection-card__cover-shadow-1,
.library-collection-card__cover-shadow-2,
.library-collection-card__cover {
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: inherit;
}

.library-collection-card__cover-shadow-1 {
  top: 0;
  right: 0;
  background: var(--white-5);
}

.library-collection-card__cover-shadow-2 {
  top: 0.5rem;
  right: 0.5rem;
  background: var(--white-10);
}

.library-collection-card__cover {
  top: 1rem;
  right: 1rem;
  background: var(--white-15);
}

.library-collection-card__name {
  font: var(--font-body-3);
  color: var(--white);
  text-align: left;
}

.library-collection-card__book-count {
  align-items: center;
  gap: 0.25rem;
}

.library-collection-card__book-count__icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--white-50);
}

.library-collection-card__book-count__count {
  font-family: var(--ff-main);
  font-size: 0.75rem;
  line-height: 120%;
  font-weight: var(--fw-regular);
  color: var(--white-50);
  text-align: left;
}
.library-collection-list {
  width: 100%;
  padding: 0 1.25rem;
  align-items: flex-start;
  gap: 1.5rem;
}

.library-collection-list__title {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.library-collection-list__list {
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: 0.625rem;
  row-gap: 1.5rem;
}
.library-root-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem 0;
  gap: 3rem;

  animation: fade-in ease-in 125ms;
}

.library-root-screen__skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2rem 1.25rem;
  pointer-events: none;

  opacity: 1;
  transition: opacity ease-out 350ms;
}

.library-root-screen__skeleton.hidden {
  opacity: 0;
}

.library-root-screen__new-courses-list > .library-new-courses-list__list {
  width: 100%;
  padding: 0 calc(1.25rem); /* Add padding to match with the rest of the content on the page, while preserving edge-to-edge scroll area */
}

.library-root-screen__new-courses-list > .library-new-courses-list__title {
  margin-left: 1.25rem;
}

.library-collection-screen__course-list {
  padding: 4rem 1.25rem 1.25rem;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  justify-content: center;

  flex-wrap: wrap;
  gap: 1rem;
  row-gap: 1.5rem;
  
  animation: fade-in ease-in 125ms;
}

.library-collection-screen__course-card {
  max-width: 6.25rem;
}

.library-collection-screen__course-card .library-course-card__cover {
  width: 6.25rem;
  height: 9.5rem;
}

.library-collection-screen__course-card .library-course-card__info {
  padding: 0;
}
.bookshelf-active-course-skeleton {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  text-decoration: none;

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

.bookshelf-active-course-skeleton__cover {
  width: 7.75rem;
  height: 11.75rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
}

.bookshelf-active-course-skeleton__progress {
  width: 100%;
  height: 0.375rem;
}

.bookshelf-root-screen-skeleton {
  gap: 2.5rem;
}

.bookshelf-root-screen-skeleton__active-course-list {
  width: 100%;
  padding: 0 0.325rem;
  gap: 1rem;
}

.bookshelf-root-screen-skeleton__category-list {
  width: 100%;
  gap: 0.625rem;
}

.bookshelf-root-screen-skeleton__category-button {
  width: 100%;
  height: 3.5rem;
  border-radius: 1.25rem;
}

.bookshelf-active-course {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  text-decoration: none;

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

.boookshelf-active-course__cover {
  width: 7.75rem;
  height: 11.75rem;
}

.bookshelf-active-course__progress {
  width: 100%;
  height: 0.375rem;
}

.bookshelf-empty-category-card {
  height: 100%;
  flex-shrink: 0;
  margin: auto;

  align-items: center;
  justify-content: center;
  gap: 2rem;

  background: var(--abbyss-blue-50);
  border-radius: 1.25rem;
}

.bookshelf-empty-category-card__text {
  font: var(--font-body-5);
  color: var(--white-80);
  text-align: center;
}

.bookshelf-empty-category-card__cta {
  display: flex;
  flex-direction: row;

  align-items: center;
  gap: 1rem;

  text-decoration: none;
}

.bookshelf-empty-category-card__cta__label {
  font: var(--font-button);
  color: var(--amber-dawn);
}

.bookshelf-empty-category-card__cta__icon {
  color: var(--amber-dawn);
}
.bookshelf-active-widget {
  width: 100%;
  height: 12.75rem;
}

.bookshelf-active-widget__scroll {
  gap: 1rem;
}
.bookshelf-category-button {
  width: 100%;
  display: flex;
  text-decoration: none;
}
.bookshelf-info-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 2rem 0;
  gap: 2.5rem;

  animation: fade-in ease-in 125ms;
}

.bookshelf-info-screen__skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2rem 1.25rem;
  overflow: hidden;
  pointer-events: none;

  opacity: 1;
  transition: opacity ease-out 350ms;
}

.bookshelf-info-screen__skeleton.hidden {
  opacity: 0;
}

.bookshelf-info-screen__active-widget
  > .bookshelf-active-widget__scroll {
  width: 100vw; /* Make the scrollable area edge-to-edge */
  padding: 0 calc(1.25rem + 0.325rem); /* Add padding to match with the rest of the content on the page, while preserving edge-to-edge scroll area */
}

.bookshelf-info-screen__active-widget
  > .bookshelf-active-widget__empty-card {
  margin: 0 calc(1.25rem + 0.325rem);
}

.bookshelf-info-screen__category-list {
  gap: 0.625rem;
  padding: 0 1.25rem;
}

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

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

.course-controls-dropdown__toggle-button__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--white);
}

.course-controls-dropdown__dropdown {
  position: absolute;
  top: calc(1.25rem + 0.25rem); /* Height of toggle button + Additional margin */
  right: 0;
  min-width: 13rem;
  padding: 0.75rem;
  align-items: flex-start;
  background: var(--abbyss-blue);
  border-radius: 0.625rem;
  gap: 0.75rem;
}

.course-controls-dropdown__item-button {
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.course-controls-dropdown__item-button__icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--white-80);
}

.course-controls-dropdown__item-button__text {
  font: var(--font-body-4);
  color: var(--white-80);
  text-align: left;
}

.course-controls-dropdown__remove-from-bookshelf > * {
  color: var(--red-60);
}
.course-list-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  align-items: flex-start;
  gap: 0.75rem;
}

.course-list-item__cover {
  width: 6rem;
  height: 9rem;
}

.course-list-item__info {
  width: 100%;
  height: 100%;
  padding: 0.5rem 0;
  align-items: flex-start;
}

.course-list-item__info__header {
  width: 100%;
  align-items: flex-start;
  gap: 0.75rem;
}

.course-list-item__info__progress-wrap {
  width: 100%;
  gap: 0.75rem;
}

.course-list-item__chapter-number {
  font: var(--font-body-4);
  color: var(--white);
  text-align: left;
}

.course-list-item__progress {
  height: 0.375rem;
}

.course-list-item__name {
  margin-top: 1rem;

  font: var(--font-body-2-medium);
  color: var(--white);
  text-align: left;
}

.course-list-item__author {
  margin-top: auto;
  
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: center;
}
.course-list {
  gap: 1.5rem;
}

.bookshelf-courses-screen {
  width: 100%;
  height: 100%;

  animation: fade-in ease-in 125ms;
}

.bookshelf-courses-screen__content {
  width: 100%;
  padding: calc(4rem + 0.75rem) /* Height of header + Additional padding */
    1.25rem
    1.25rem;
}

.bookshelf-courses-screen__empty-card {
  width: 100%;
  height: 12.75rem;
  margin: auto
}
.books-page {
  position: relative;
  width: 100%;
  height: 100%;
}

.open-registration-form-label {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 2rem;
  align-items: center;
  justify-content: center;
}

.open-registration-form-label__text {
  font: var(--font-button);
  color: var(--white-80);
}

.open-registration-form-label__cta-accent {
  font: var(--font-button);
  color: var(--amber-dawn);
}

.input-with-feedback {
  position: relative;
}

.input-with-feedback__error {
  position: absolute;
  top: calc(-0.75rem - 0.5rem); /* Height of element itself + negative margin from top */
  right: 0.5rem;

  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.input-with-feedback__error__icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--red-60);
}

.input-with-feedback__error__text {
  font: var(--font-tiny);
  color: var(--red-60);
  text-align: right;
}

.input-with-feedback__input {
  width: 100%;
  height: 3.5rem;
  padding: 1.125rem;
  border: none;
  border-radius: 1.125rem;
  background: var(--abbyss-blue-50);

  font-family: var(--ff-main);
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: var(--fw-regular);
  color: var(--white-80);
}

.input-with-feedback__input:focus {
  border: none;
  box-shadow: none;
}

.input-with-feedback__input:-ms-input-placeholder {
  color: var(--white-50);
}

.input-with-feedback__input::placeholder {
  color: var(--white-50);
}

.input-with-feedback__input:disabled {
  opacity: 0.3;
  background: var(--abbyss-blue-50);
}

.input-with-feedback__input.with-error {
  border: 1px solid var(--red-60);
}
.auth-form-email-input {
  width: 100%;
}
.password-input-with-feedback {
  position: relative;
}

.password-input-with-feedback__input-with-feedback {
  width: 100%;
}

.password-input-with-feedback__input-with-feedback > .input-with-feedback__input {
  padding-right: 3.125rem;
}

.password-input-with-feedback__visibility-button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
}

.password-input-with-feedback__visibility-button__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--white-50);
}
.auth-form-password-input {
  width: 100%;
  height: 52px;
}
.sign-in-with-google-button {
  display: flex;
  flex-shrink: 0;

  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 100%;
  background: var(--white);
}

.sign-in-with-google-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.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;
  flex-shrink: 0;

  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 100%;
  background: var(--white);
}

.sign-in-with-apple-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.sign-in-with-services-form {
  width: 100%;
  align-items: center;
  gap: 2.5rem
}

.sign-in-with-services-form__separator-wrap {
  width: 100%;
  align-items: center;
  gap: 0.75rem;
}

.sign-in-with-services-form__separator-line {
  display: flex;
  width: 100%;
  height: 0.125rem;
  background: var(--white-15);
}

.sign-in-with-services-form__separator-text {
  font: var(--font-body-3);
  color: var(--white-80);
  text-align: center;
  flex-shrink: 0;
}

.sign-in-with-services-form__buttons {
  align-items: center;
  gap: 1.5rem;
}
.sign-in-form {
  width: 100%;
  align-items: flex-start;
}

.sign-in-form__title {
  font: var(--font-header-1);
  color: var(--white);
  text-align: left;
  margin-bottom: 3rem;
}

.sign-in-form__password-input {
  margin-top: 2rem;
}

.sign-in-form__password-recovery-button {
  margin-left: auto;
  margin-top: 1rem;
  height: unset;
  font-size: 13px;
  border: none;
  padding: unset;

  font: var(--font-tiny);
  color: var(--amber-dawn);
}

.sign-in-form__sign-in-button {
  margin-top: 1rem;
}

.sign-in-form__sign-in-with-services-form {
  margin-top: 2rem;
}

.integrated-sign-in-form {
  width: 100%;
  height: 100%;
  align-items: center;

  animation: forwards fade-in 500ms;
}

.integrated-sign-in-form__registration-form-label {
  margin-top: auto;
}

.checkbox {
  display: flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  border-radius: 0.25rem;
  padding: 0;

  background: var(--white-15);
}

.checkbox.checked {
  background: var(--amber-dawn);
}

.checkbox__checkmark {
  width: 100%;
  height: 100%;
  color: var(--amber-dawn);
}
.checkbox-with-label {
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.checkbox-with-label__label {
  font: var(--font-body-4);
  color: var(--white-80);
  text-align: left;
}
.auth-form-legal-note {
  gap: 0.75rem;
  align-items: center;
}

.auth-form-legal-note__text {
  font: var(--font-body-4);
  color: var(--white-80);
}

.auth-form-legal-note__link {
  font: var(--font-body-4);
  color: var(--amber-dawn);
  text-decoration: none;
}
.registration-form {
  width: 100%;
  align-items: flex-start;
}

.registration-form__title {
  font: var(--font-header-1);
  color: var(--white);
  text-align: left;
  margin-bottom: 3rem;
}

.registration-form__registration-button {
  margin-top: 0.625rem;
}

.registration-form__notification-consent {
  margin-top: 0.75rem;
  padding: 0 0.75rem;
}

.registration-form__legal-note {
  margin-top: 0.625rem;
  padding: 0 0.75rem;
}

.registration-form__already-registered-text {
  margin-top: 20px;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
}

.registration-form__or-text {
  margin-bottom: 16px;
  color: #707070;
}

.registration-form__sign-in-with-services-form {
  margin-top: 4rem;
}

.open-sign-in-form-label {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 2rem;
  align-items: center;
  justify-content: center;
}

.open-sign-in-form-label__text {
  font: var(--font-button);
  color: var(--white-80);
}

.open-sign-in-form-label__cta-accent {
  font: var(--font-button);
  color: var(--amber-dawn);
}

.integrated-registration-form {
  width: 100%;
  height: 100%;
  align-items: center;

  animation: forwards fade-in 500ms;
}

.integrated-registration-form__open-sign-in-form-label {
  margin-top: auto
}

.password-recovery-form {
  width: 100%;
  align-items: flex-start;
}

.password-recovery-form__title {
  font: var(--font-header-1);
  color: var(--white);
  text-align: left;
  margin-bottom: 3rem;
}

.password-recovery-form__password-input {
  margin-top: 2rem;
}

.password-recovery-form__code-requirement-text {
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 2rem;
  
  font: var(--font-body-4);
  color: var(--white-80);
  text-align: center;
}

.password-recovery-form__code-input {
  width: 100%;
}

.password-recovery-form__recovery-button {
  margin-top: 2rem;
}

.integrated-password-recovery-form {
  width: 100%;
  height: 100%;
  align-items: center;

  animation: forwards fade-in 500ms;
}

.integrated-password-recovery-form__open-registration-form-label {
  margin-top: auto;
}

.integrated-password-recovery-form__open-sign-in-form-label {
  margin-top: 0.5rem;
}

.auth-page {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;

  padding: 5.625rem 1.25rem 1.5rem;
}
.course-cta-button {
  width: 100%;
  flex-shrink: 0;
}
.content-duration-label {
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
}

.content-duration-label__icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--white-50);
}

.content-duration-label__text {
  font: var(--font-body-4);
  color: var(--white-50);
}
.course-info-page-header {
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}
.might-like-scroll {
  gap: 1rem;

  animation: fade-in ease-in 125ms;
}

.might-like-scroll__title {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.might-like-scroll__scroll {
  gap: 0.625rem;
}

.might-like-scroll__item__cover {
  width: 6rem;
  height: 9rem;
}
.course-lesson-list-item {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;

  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 0.75rem 1rem;
  border-radius: 1.25rem;
  text-decoration: none;

  background: var(--nordic-blue);
}

.course-lesson-list-item.finished {
  opacity: 0.5;
}

.course-lesson-list-item__chapter {
  font: var(--font-tiny);
  color: var(--white-50);
  text-align: left;
}

.course-lesson-list-item__text-wrap {
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.course-lesson-list-item__name {
  font: var(--font-body-2-medium);
  color: var(--white);
  text-align: left;
}

.course-lesson-list-item__finished-icon,
.course-lesson-list-item__start-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.course-lesson-list-item__finished-icon {
  color: var(--verdant-cyan);
}

.course-lesson-list-item__start-icon {
  color: var(--white);
}
.course-lesson-list {
  width: 100%;
  gap: 1.5rem;
}

.course-lesson-list__title {
  font-family: var(--ff-main);
  font-size: 1.25rem;
  line-height: 112%;
  font-weight: var(--fw-bold);
  color: var(--white);
  text-align: left;
}

.course-lesson-list__list-wrap {
  width: 100%;
  gap: 0.625rem;
}
.course-info-page {
  position: relative;
  width: 100%;
  height: 100%;

  animation: fade-in ease-in 125ms;
}

.course-info-page__header {
  position: fixed;
  top: 0;
  padding: 1.25rem 1.25rem 1.25rem;
  width: 100%;
  max-width: var(--max-content-width);
  height: calc(
    1.25rem + 1.5rem + 1.25rem
  ); /* Padding Top + Content Height + Padding Bottom */
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 15%
  );
}

.course-info-page__content {
  position: relative;
  padding: 0 1.25rem;

  margin-top: calc(
    1.25rem + 1.5rem + 1.25rem
  ); /* Header Padding Top + Header Content Height + Header Padding Bottom */
}

.course-info-page__top-row {
  align-items: flex-start;
  gap: 0.75rem;
}

.course-info-page__cover {
  width: 7.5rem;
  height: 11.25rem;
  margin: auto;
}

.course-info-page__main-info {
  width: 100%;
  height: 100%;
  padding: 0.375rem 0;
  align-items: flex-start;
}

.course-info-page__details {
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.course-info-page__progress-bar {
  margin: 1rem auto 0;
  width: 100%;
  height: 0.375rem;
}

.course-info-page__title {
  margin-top: 1.25rem;
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.course-info-page__author {
  margin-top: auto;
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: left;
}

.course-info-page__content__details {
  padding: 0 0.375rem;
}

.course-info-page__about-book {
  margin-top: 2.5rem;
  gap: 1rem;
  align-items: flex-start;
}

.course-info-page__about-book__label {
  font-family: var(--ff-main);
  font-size: 1.25rem;
  line-height: 112%;
  font-weight: var(--fw-bold);
  color: var(--white);
  text-align: left;
}

.course-info-page__about-book__value {
  font: var(--font-body-3);
  color: var(--white-50);
  text-align: left;
}

.course-info-page__tag-list-scroll {
  margin-top: 1rem;
  margin-left: -0.75rem;
  max-width: calc(100% + 1.5rem);
}

.course-info-page__tag-list {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.course-info-page__lesson-list {
  margin-top: 2.5rem;
}

.course-info-page__might-like-scroll {
  margin-top: 3.5rem;
}

.course-info-page__might-like-scroll > .might-like-scroll__title {
  padding: 0 1.875rem;
}

.course-info-page__might-like-scroll > .might-like-scroll__scroll {
  width: 100%;
  padding: 0 calc(1.25rem + 0.325rem);
}

.course-info-page__footer {
  width: 100%;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

.course-lesson-chapter-header {
  width: 100%;
  align-items: flex-start;
}

.course-lesson-chapter-header__top-row {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.course-lesson-chapter-header__chapter-number {
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: left;
}

.course-lesson-chapter-header__current-page {
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: right;
  margin-left: auto;
}

.course-lesson-chapter-header__chapter-name {
  width: 100%;
  font: var(--font-header-2);
  color: var(--white);
  text-align: left;
  
  margin-top: 0.75rem;
}

.course-lesson-chapter-header__separator {
  width: 100%;
  height: 0.125rem;
  margin-top: 1.25rem;
  background-color: var(--white-15);
}
.course-lesson-page-footer {
  width: 100%;
  align-items: center;
  gap: 0.625rem;
}

.course-lesson-page-footer__back-button {
  display: flex;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 1rem;
}

.course-lesson-page-footer__back-button__arrow {
  width: 100%;
  height: 100%;
  border-radius: inherit !important;
}

.course-lesson-page-footer__back-button__arrow > .arrow-indicator__arrow {
  width: 1.5rem;
  height: 1.5rem;
}

.course-lesson-page-footer__cta {
  width: auto;
  max-width: unset;
  flex-grow: 1;
}
.course-lesson-paginated-view {
  position: relative;
  width: 100%;
  height: 100%;

  animation: fade-in ease-in 500ms;
}

.course-lesson-paginated-view__header {
  position: fixed;
  top: 0;
  padding: 1.25rem 1.25rem 2rem;
  width: 100%;
  max-width: var(--max-content-width);
  height: calc(
    1.25rem + 1.75rem + 2rem
  ); /* Padding Top + Content Height + Padding Bottom */
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 0%,
    var(--midnight-teal) 15%
  );
}

.course-lesson-paginated-view__content {
  position: relative;
  padding: 0 1.25rem;
  gap: 2rem;

  margin-top: calc(
    1.25rem + 1.5rem + 2rem
  ); /* Header Padding Top + Header Content Height + Header Padding Bottom */
}

.course-lesson-paginated-view__content.limited-preview::after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: calc(50% - 50vw);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--midnight-teal) 0%, transparent 100%) 50%,
    var(--midnight-teal) 100%
  );
  pointer-events: none;
}

.course-lesson-paginated-view__footer {
  padding: 2.75rem 1.25rem 1.25rem;
}

.course-lesson-content {
  position: relative;
  height: 100%;
  animation: fade-in ease-in 500ms;
}

.course-lesson-page {
  height: 100%;
}

.course-lesson-page > .course-page-layout > .course-page-layout__content::before {
  display: none;
}

.course-lesson-page__loader {
  margin: auto;
}
.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;
}

.cat-image-2 {
  object-fit: contain;
}
.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-height: 700px) {
  .vocabulary-test-page__header {
    margin-bottom: 1rem;
  }
}
.content-router__loader {
  margin: auto;
}
.bottom-menu-button {
  position: relative;
  display: flex;

  width: 3.5rem;
  height: 2.375rem;
  text-decoration: none;
}

.bottom-menu-button__content {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  align-self: center;
  gap: 0.5rem;
}

.bottom-menu-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.bottom-menu-button__label {
  font: var(--font-tiny);
  text-align: center;
}

.bottom-menu-button * {
  color: var(--white);
}

.bottom-menu-button.active * {
  color: var(--amber-dawn);
}
.bottom-menu {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  pointer-events: none;
}

.bottom-menu__menu {
  height: 4.5rem;
  padding: 1.25rem 1.25rem 0;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--abbyss-blue-lighter);
  box-shadow: 0 0 0.5rem 0.25rem var(--midnight-teal);
  flex-shrink: 0;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  pointer-events: auto;
}

.layout {
  width: 100%;
  max-width: var(--max-content-width);
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin: auto
}

.layout__content {
  width: 100%;
  min-height: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  overflow: auto;
}

.layout.with-menu {
  /* Минимальная высота контента: высота экрана - высота нижнего меню */
  min-height: calc(100% - 4.5rem);
  padding-bottom: 4.5rem;
}

.layout__bottom-menu {
  width: 100%;
  max-width: var(--max-content-width);
  position: fixed;
}

@media screen and (min-width: 35rem) {
  .layout {
    box-shadow: 0 0 1rem 0.75rem var(--midnight-teal), 0 0 20rem 20rem var(--abbyss-blue);
  }
}
.password-input {
  position: relative;
}

.password-input__primary-input {
  width: 100%;
}

.password-input__primary-input > .primary-input__input {
  padding-right: 3.125rem;
}

.password-input__visibility-button {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
}

.password-input__visibility-button__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--amber-dawn);
}
.slide-up-modal > .modal__wrap {
  margin-top: auto;
  max-height: calc(100% - 1.25rem);
  width: 100%;
  height: 100%;
  animation: 750ms pop-up-slide;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.slide-up-modal > .modal__wrap > .modal__content {
  height: 100%;
  align-items: center;
  background-color: var(--abbyss-blue);
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

@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-height: 700px) {
  .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;
  }
}

.change-password-modal > .modal__wrap {
  max-height: 25rem;
}

.change-password-modal__header {
  position: relative;
  width: 100%;
  height: 1.5rem;
}

.change-password-modal__close-button {
  top: 0rem;
  left: 0rem;
}

.change-password-modal__title {
  width: 100%;
  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.change-password-modal__content {
  margin-top: 2rem;
  width: 100%;
  height: 100%;
  gap: 1.5rem;
}

.change-password-modal__input .primary-input__input {
  background: var(--abbyss-blue-lighter);
}

.change-password-modal__save-button {
  margin-top: auto;
}
.info-text {
  margin-top: 10px;
  font: var(--font-tiny);
  text-align: center;
}

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

.info-text.success {
  color: var(--green-60);
}
.dictionary-entry-controls {
  width: 100%;
  min-height: 3.5rem;
}

.dictionary-entry-controls__remove-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;

  font: var(--font-button);
  color: var(--amber-dawn);
  text-align: center;
}

.dictionary-entry-controls__remove-button,
.dictionary-entry-controls__add-button {
  width: 100%;
  height: 3.5rem;
  align-self: center;
}

.dictionary-entry-controls__inline-hint-wrapper
  > .inline-hint-wrapper__focused-element {
  width: 100%;
  border-radius: 1.125rem;
}

.dictionary-entry-content {
  width: 100%;
  height: 100%;
  align-items: center;
  border-radius: inherit;
}

.dictionary-entry-content__scroll {
  height: 100%;
  border-radius: inherit;
}
.dictionary-entry-content__scroll > div:first-of-type {
  overflow-x: hidden !important;
  margin-bottom: 0 !important;

  display: flex;
  flex-direction: column;
}
.dictionary-entry-content__scroll .scrollbar__track {
  display: none;
}

.dictionary-entry-content__card .dictionary-entry-header {
  padding: 3rem 1rem;
}

.dictionary-entry-content__card > *:not(.dictionary-entry-header) {
  margin: 0 1rem;
}

/* 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-content__footer {
  padding: 2.75rem 1.25rem 1.25rem;
  
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--abbyss-blue) 0%, transparent 100%) 0%,
    var(--abbyss-blue) 35%
  );
}

.dictionary-entry-content__footer.non-sticky {
  position: relative;
}

.dictionary-entry-not-found {
  height: 500px;
  align-items: center;
  justify-content: center;
  margin: auto;
  gap: 20px;
}

.dictionary-entry-not-found__text {
  font: var(--font-body-1);
  color: var(--white);
  text-align: center;
}

.dictionary-entry-skeleton {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.dictionary-entry-skeleton__card {
  width: 100%;
}

.dictionary-entry-skeleton__card .dictionary-entry-card-skeleton__header {
  padding: 3rem 1rem;
}

.dictionary-entry-skeleton__card > *:not(.dictionary-entry-card-skeleton__header) {
  margin: 0 1rem;
}

.dictionary-entry-skeleton__cta {
  margin-top: auto;
  margin-bottom: 1.25rem;
  width: calc(100% - 1.25rem - 1.25rem);
  max-width: 350px;
  height: 3.5rem;
  border-radius: 1.125rem;
  align-self: center;
}
.dictionary-entry-modal .modal__content {
  padding: 0.25rem;
}

.dictionary-entry-modal__close-button {
  right: unset;
  left: 1.25rem;
}

.dictionary-entry-modal__skeleton {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25rem;
  pointer-events: none;

  opacity: 1;
  transition: opacity ease-out 250ms;
}

.dictionary-entry-modal__skeleton.hidden {
  opacity: 0;
}
.red-button {
  background: var(--red-25);
  color: var(--red-60);
}

.red-button > * {
  color: var(--red-60);
}

.red-button:disabled {
  opacity: 0.5;
}

.cancel-subscription-modal > .modal__wrap {
  max-height: 20rem;
}

.cancel-subscription-modal__close-button {
  left: 1.25rem;
}

.cancel-subscription-modal__title {
  margin-top: 3.5rem;
  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.cancel-subscription-modal__subtitle {
  margin-top: 1.25rem;
  font: var(--font-body-2);
  color: var(--white-80);
  text-align: center;
}

.cancel-subscription-modal__cancel-button {
  margin-top: auto;
}
.white-button {
  background: var(--white);
  color: var(--midnight-teal);
}

.white-button:disabled {
  background: var(--white-50);
  color: var(--abbyss-blue-50)
}

.delete-account-modal > .modal__wrap {
  max-height: 25rem;
}

.delete-account-modal__close-button {
  left: 1.25rem;
}

.delete-account-modal__title {
  margin-top: 3.5rem;
  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.delete-account-modal__subtitle {
  margin-top: 1.25rem;
  font: var(--font-body-2);
  color: var(--white-80);
  text-align: center;
}

.delete-account-modal__buttons-wrap {
  margin-top: auto;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.delete-account-modal__confirmation-input {
  margin-top: 2.5rem;
  width: 100%;
}

.delete-account-modal__confirmation-input > .primary-input__input {
  background: var(--midnight-teal);
}

.delete-account-modal__cancel-button,
.delete-account-modal__delete-button {
  width: calc((100% - 0.625rem) / 2);
}

.delete-account-modal__delete-button {
  gap: 0.625rem;
}

.delete-account-modal__delete-button__text {
  font: var(--font-button);
}

.delete-account-modal__delete-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.delete-account-modal__delete-button:disabled {
  opacity: 0.5;
}
.account-deletion-blocked-by-subscription-modal > .modal__wrap {
  max-height: 15rem;
}

.account-deletion-blocked-by-subscription-modal__close-button {
  left: 1.25rem;
}

.account-deletion-blocked-by-subscription-modal__title {
  margin-top: 3.5rem;
  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.account-deletion-blocked-by-subscription-modal__cta {
  margin-top: auto;
}
.info-modal > .modal__wrap {
  max-height: 20rem;
}

.info-modal__close-button {
  left: 1.25rem;
}

.info-modal__icon {
  margin-top: 2rem;
  width: 4rem;
  height: 4rem;
  color: var(--white);
}

.info-modal__title {
  margin-top: 2rem;
  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.info-modal__subtitle {
  margin-top: 1.25rem;
  font: var(--font-body-2);
  color: var(--white-80);
  text-align: center;
}

.info-modal__cta {
  margin-top: auto;
}
.notification-permission-denied-modal > .modal__wrap {
  max-height: 22rem;
}
.textarea-with-feedback {
  position: relative;
}

.textarea-with-feedback__error {
  position: absolute;
  top: calc(-0.75rem - 0.5rem); /* Height of element itself + negative margin from top */
  right: 0.5rem;

  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.textarea-with-feedback__error__icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--red-60);
}

.textarea-with-feedback__error__text {
  font: var(--font-tiny);
  color: var(--red-60);
  text-align: right;
}

.textarea-with-feedback__textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: 1.125rem;
  border: none;
  border-radius: 1.125rem;
  background: var(--abbyss-blue-50);

  font-family: var(--ff-main);
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: var(--fw-regular);
  color: var(--white-80);
}

.textarea-with-feedback__textarea:focus {
  border: none;
  box-shadow: none;
}

.textarea-with-feedback__textarea:-ms-input-placeholder {
  color: var(--white-50);
}

.textarea-with-feedback__textarea::placeholder {
  color: var(--white-50);
}

.textarea-with-feedback__textarea:disabled {
  opacity: 0.3;
  background: var(--abbyss-blue-50);
}

.textarea-with-feedback__textarea.with-error {
  border: 1px solid var(--red-60);
}
.add-new-vocabulary-entry-modal > .modal__wrap {
  max-height: 85%;
}

.add-new-vocabulary-entry-modal > .modal__wrap > .modal__content {
  align-items: flex-start;
}

.add-new-vocabulary-entry-modal__close-button {
  left: 1.25rem;
}

.add-new-vocabulary-entry-modal__title {
  margin-top: calc(1.5rem + 2rem); /* Height of close button + margin */

  font: var(--font-header-2);
  color: var(--white);
  text-align: left;
}

.add-new-vocabulary-entry-modal__subtitle {
  margin-top: 1.25rem;

  font: var(--font-body-2);
  color: var(--white-80);
  text-align: left;
}

.add-new-vocabulary-entry-modal__word-input {
  margin-top: 2.5rem;
  width: 100%;
}

.add-new-vocabulary-entry-modal__word-input > .input-with-feedback__input {
  background: var(--abbyss-blue-lighter);
}

.add-new-vocabulary-entry-modal__sentence-input {
  margin-top: 2.5rem;
  width: 100%;
}

.add-new-vocabulary-entry-modal__sentence-input
  > .textarea-with-feedback__textarea {
  min-height: 10.5rem;
  background: var(--abbyss-blue-lighter);
}

.add-new-vocabulary-entry-modal__continue-button {
  margin-top: auto;
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-height: 700px) {
  .add-new-vocabulary-entry-modal > .modal__wrap {
    max-height: 100%;
  }
}

.rate-the-app-modal > .modal__wrap {
  max-height: 21rem;
}

.rate-the-app-modal__close-button {
  left: 1.25rem;
}

.rate-the-app-modal__rating-stars-icon {
  margin-top: 2.5rem;
}

.rate-the-app-modal__title {
  margin-top: 2rem;
  font: var(--font-header-3);
  color: var(--white);
  text-align: center;
}

.rate-the-app-modal__subtitle {
  margin-top: 1.25rem;
  font: var(--font-body-2);
  color: var(--white-80);
  text-align: center;
}

.rate-the-app-modal__buttons-wrap {
  margin-top: auto;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.rate-the-app-modal__button {
  width: calc((100% - 0.625rem) / 2);
}
.remove-vocabulary-entry-modal > .modal__wrap {
  max-height: 17rem;
}

.remove-vocabulary-entry-modal__close-button {
  left: 1.25rem;
}

.remove-vocabulary-entry-modal__text {
  margin-top: 3.5rem;
  margin-bottom: 2rem;
  text-align: left;
}

.remove-vocabulary-entry-modal__text * {
  font: var(--font-body-1);
  color: var(--white);
}

.remove-vocabulary-entry-modal__text strong {
  color: var(--sunlit-sand);
  font-weight: var(--fw-bold);
}

.remove-vocabulary-entry-modal__remove-button {
  margin-top: auto;
}
.course-tag-selection-modal__header {
  position: relative;
  width: 100%;
}

.course-tag-selection-modal__close-button {
  width: 1.5rem;
  height: 1.5rem;
  top: 0rem;
  left: 0rem;
}

.course-tag-selection-modal__title {
  width: 100%;

  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.course-tag-selection-modal__scrollbar {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}
.course-tag-selection-modal__scrollbar::before,
.course-tag-selection-modal__scrollbar::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1rem;
  content: '';
  z-index: 1
}
.course-tag-selection-modal__scrollbar::before {
  top: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--abbyss-blue) 0%, transparent 100%) 0%,
    var(--abbyss-blue) 35%
  );
}
.course-tag-selection-modal__scrollbar::after {
  bottom: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--abbyss-blue) 0%, transparent 100%) 0%,
    var(--abbyss-blue) 35%
  );
}

.course-tag-selection-modal__tag-cloud {
  width: 100%;
  padding: 1rem 0;
}

.course-tag-selection-modal__tag-cloud > .course-tag-badge:not(.selected) {
  background: var(--midnight-teal);
}

.course-tag-selection-modal__cta {
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-height: 700px) {
  .course-tag-selection-modal__scrollbar {
    margin-top: 1.5rem;
  }
}
.log-out-modal > .modal__wrap {
  max-height: 18rem;
}

.log-out-modal__close-button {
  left: 1.25rem;
}

.log-out-modal__title {
  margin-top: 3.5rem;
  font: var(--font-header-4);
  color: var(--white);
  text-align: center;
}

.log-out-modal__subtitle {
  margin-top: 1.25rem;
  font: var(--font-body-2);
  color: var(--white-80);
  text-align: center;
}

.log-out-modal__button-wrap {
  margin-top: auto;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.log-out-modal__cancel-button,
.log-out-modal__cta-button {
  width: calc((100% - 0.625rem) / 2);
}
.payment-success-modal .info-modal__icon {
  color: var(--sunlit-sand);
}
.subscription-plan-selector-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 5.5rem;
  padding: 1.125rem;
  background: var(--midnight-teal);
  border: 1.5px solid var(--midnight-teal);
  border-radius: 1.25rem;
  gap: 1.25rem;
  cursor: pointer;
}

.subscription-plan-selector-item.selected {
  border-color: var(--amber-dawn);
}

.subscription-plan-selector-item__free-trial-badge {
  position: absolute;
  top: -0.75rem;
  width: -webkit-fit-content;
  width: fit-content;
  height: 1.25rem;
  padding: 0.25rem 0.375rem 0.25rem 0.25rem;
  border-radius: 0.375rem;
  background: var(--amber-dawn);
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.subscription-plan-selector-item__free-trial-badge__icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--white);
}

.subscription-plan-selector-item__free-trial-badge__text {
  font: var(--font-tiny);
  color: var(--white);
}

.subscription-plan-selector-item__content__left-block {
  gap: 0.625rem;
}

.subscription-plan-selector-item__name {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.subscription-plan-selector-item__total-price {
  align-items: start;
  gap: 0.625rem;
}

.subscription-plan-selector-item__total-price__original-value {
  font: var(--font-body-3);
  color: var(--white-50);
  text-decoration: line-through;
}

.subscription-plan-selector-item__total-price__value {
  font: var(--font-body-3);
  color: var(--white);
}

.subscription-plan-selector-item__per-week-price {
  align-items: flex-end;
  gap: 0.125rem;
  flex-shrink: 0;
}

.subscription-plan-selector-item__per-week-price__value {
  font: var(--font-header-2);
  color: var(--white);
  text-align: right;
}

.subscription-plan-selector-item__per-week-price__frequency {
  font: var(--font-body-4);
  color: var(--white-50);
  text-align: right;
}

/* Price label scaling */

.subscription-plan-selector-item.long-price-label-scale .subscription-plan-selector-item__total-price__original-value {
  font-size: 0.625rem;
}

.subscription-plan-selector-item.long-price-label-scale .subscription-plan-selector-item__total-price__value {
  font-size: 0.625rem;
}

.subscription-plan-selector-item.long-price-label-scale .subscription-plan-selector-item__per-week-price__value {
  font-size: 1.5rem;
}

.subscription-plan-selector-item.extra-long-price-label-scale .subscription-plan-selector-item__total-price__original-value {
  font-size: 0.625rem;
}

.subscription-plan-selector-item.extra-long-price-label-scale .subscription-plan-selector-item__total-price__value {
  font-size: 0.625rem;
}

.subscription-plan-selector-item.extra-long-price-label-scale .subscription-plan-selector-item__per-week-price__value {
  font-size: 1.125rem;
}
.subscription-plan-selector {
  width: 100%;
  align-items: center;
}

.subscription-plan-selector__plan-list {
  width: 100%;
  gap: 0.625rem;
  margin-bottom: auto;
}

.subscription-plan-selector__cta {
  margin-top: 2rem;
  width: 100%;
}

.subscription-plan-selector__footer {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--abbyss-blue) 0%, transparent 100%) 0%,
    var(--abbyss-blue) 35%
  );
}

.subscription-plan-selector__footer > .sticky-footer-overlay-v2__content {
  flex-direction: column;
  gap: 1rem;
}
.subscription-perk-list__carousel {
  width: calc(100% + 20rem * 2 - 0.625rem * 2);
  margin-left: calc(-20rem + 0.625rem);
}

.subscription-perk-list__carousel > .swiper-wrapper {
  align-items: center;
}

.subscription-perk-list__carousel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.subscription-perk-list__carousel__item__content {
  width: 20rem;
  height: 4rem;
  border-radius: 1.25rem;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
  background: var(--nordic-blue-50);
  cursor: default;
}

.subscription-perk-list__carousel__item__highlight {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1.125rem;
  background: var(--white-5);
  border-radius: 1.25rem;
  flex-shrink: 0;
}

.subscription-perk-list__carousel__item__highlight__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--white);
}

.subscription-perk-list__carousel__item__highlight__text {
  font: var(--font-header-4);
  color: var(--white);
  text-align: left;
}

.subscription-perk-list__carousel__item__text {
  font: var(--font-body-3);
  color: var(--white-80);
  text-align: left;
}

.generic-paywall {
  position: relative;
  width: 100%;
  min-height: 100%;
  align-items: center;
  padding: 1.25rem 1.25rem 0;
  overflow: auto;
}

.generic-paywall__loader {
  margin: auto;
}

.generic-paywall__close-button {
  top: 1.25rem;
  left: 1.25rem;
}

.generic-paywall__header {
  margin-top: calc(1.5rem + 2rem);
  position: relative;
  align-items: center;
  width: 100%;
}

.generic-paywall__title {
  font: var(--font-header-2);
  color: var(--white);
  text-align: center;
}

.generic-paywall__subtitle {
  margin-top: 1.25rem;
  text-align: center;
}

.generic-paywall__subtitle * {
  font: var(--font-body-2);
  color: var(--white-80);
}

.generic-paywall__subtitle strong {
  font-weight: var(--fw-bold);
  color: var(--white);
}

.generic-paywall__subscription-perk-list {
  margin-top: 2.5rem;
  margin-bottom: 3.5rem;
  width: calc(100% + 1.25rem + 1.25rem);
  overflow: hidden;
}

.generic-paywall__subscription-plan-selector {
  margin-top: auto;
}

.paywall-overlay {
  z-index: 99999;
}

.paywall-overlay .modal__content {
  padding: 0;
}
.global-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: var(--midnight-teal-80);

  transition: opacity ease-out 250ms;
}

.global-loader-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.global-loader-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.app-loading-overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9999999;
  background: var(--midnight-teal);
}

.app-loading-overlay.with-header-curtain {
  background: linear-gradient(
    180deg,
    var(--abbyss-blue-darker) 0rem,
    var(--abbyss-blue-darker) 0.5rem,
    var(--midnight-teal) 4.5rem
  );
}

.app-loading-overlay.with-bottom-menu {
  background: linear-gradient(
    180deg,
    var(--midnight-teal) 0rem,
    var(--midnight-teal) calc(100% - 3rem),
    var(--abbyss-blue-lighter) calc(100%)
  );
}

.app-loading-overlay.with-header-curtain.with-bottom-menu {
  background: linear-gradient(
    180deg,
    var(--abbyss-blue-darker) 0rem,
    var(--abbyss-blue-darker) 0.5rem,
    var(--midnight-teal) 4.5rem,
    var(--midnight-teal) calc(100% - 3rem),
    var(--abbyss-blue-lighter) calc(100%)
  );
}

.app-loading-overlay.hidden {
  opacity: 1;
  animation: fade-out forwards 500ms 1s;
  pointer-events: none;
}

.app-loading-overlay__loader {
  margin: auto;
}

.toaster-message-card {
  background: var(--midnight-teal);
  box-shadow: 0 0 1rem 0.25rem var(--midnight-teal);
  border-radius: 0.625rem;
}

.toaster-message-card__content {
  max-width: 15rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  align-items: center;
  gap: 1rem;
}

.toaster-message-card__icon {
  width: 0.75rem;
  height: 0.75rem;
}

.toaster-message-card__text {
  font: var(--font-body-4);
  text-align: center;
}

.toaster-message-card.info > .toaster-message-card__content {
  background: var(--abbyss-blue-50);
}

.toaster-message-card.info .toaster-message-card__icon,
.toaster-message-card.info .toaster-message-card__text {
  color: var(--white-80);
}

.toaster-message-card.error > .toaster-message-card__content {
  background: var(--red-25);
}

.toaster-message-card.error .toaster-message-card__icon,
.toaster-message-card.error .toaster-message-card__text {
  color: var(--red-60);
}

.toaster-message-overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.toaster-message-overlay__card {
  margin: auto auto 8rem;
}

.toaster-message-overlay__card.visible {
  animation: fade-in ease-in 250ms, slide-up ease-in 250ms;
}

.toaster-message-overlay__card.hidden {
  animation: fade-out ease-in 250ms;
}