@charset "UTF-8";
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ul,
p,
figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

svg {
  height: 1rem;
  width: 1rem;
  fill: currentColor;
}

button {
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  font-size: initial;
  font-family: inherit;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

h1 a,
h2 a,
h3 a {
  color: inherit;
  text-decoration: none;
}

a {
  color: var(--light-700);
  stroke: currentColor;
  fill: currentColor;
  transition: color 0.3s ease, stroke 0.3s ease, fill 0.3s ease;
}

[hidden] {
  display: none !important;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora/Lora-VariableFont_wght-WhhfSB8.ttf");
}
@font-face {
  font-family: "Paquito";
  src: url("../fonts/Paquito/Fonts/Variable/Paquito-Variable-PlHoP4A.ttf");
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("../fonts/OpenDyslexic3-Regular-hJ3-WXh.ttf");
}
@font-face {
  font-family: "Luciole";
  src: url("../fonts/Luciole/Luciole-Regular-yQTnbyl.ttf");
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  word-break: auto-phrase;
  hyphens: auto;
  text-transform: capitalize;
  font-size: 1rem;
  line-height: 1.25;
}

.h1 {
  font-size: 2.027rem;
  line-height: 1.1;
  font-weight: 700;
}

.h2 {
  font-size: 1.802rem;
  line-height: 1.2;
  font-weight: 700;
}

.h3 {
  font-size: 1.602rem;
  line-height: 1.3;
  font-weight: 500;
}

.h4 {
  font-size: 1.424rem;
  font-weight: 500;
}

.h5 {
  font-size: 1.266rem;
  font-weight: 500;
}

.small {
  font-size: 0.889rem;
}

.mini {
  font-size: 0.79rem;
}

.capitalize--first-letter {
  display: inline-block;
}

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

.text-muted {
  color: color-mix(in srgb, var(--light-100), transparent 15%);
}

.text-wrap-balanced {
  word-break: break-all;
  text-wrap: balance;
}

.text-nowrap {
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.text-truncated {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.text-danger {
  color: var(--danger-500);
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: nowrap;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.line-clamp-5 {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

blockquote {
  margin-inline: 0;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sliding-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes sliding-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}
form label {
  margin-bottom: 0.25rem;
  display: inline-block;
}
form label:first-letter {
  text-transform: capitalize;
}
form label.required::after {
  content: "*";
  color: var(--warning-500);
}
form .form-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
form .form-group > .form-row {
  flex-basis: 15.625rem;
  flex-grow: 1;
  width: 0;
}
form .form-group > .form-row > label {
  width: 100%;
}
form .form-row select,
form .form-row .select {
  font-family: var(--font-family, "");
  width: 100%;
}

input {
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--secondary-200);
  background-image: none;
  border: none;
  box-sizing: border-box;
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  input {
    font-size: 1rem;
  }
}
input[type=text], input[type=date], input[type=password], input[type=search], input[type=email], input[type=number], input[type=datetime-local] {
  font-family: var(--font-family, "");
  width: 100%;
  padding: 0.5rem 0.75rem;
}

.input-group {
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  display: flex;
  align-items: stretch;
}
.input-group input,
.input-group select {
  -webkit-mask: unset;
  mask: unset;
}
.input-group button {
  mask: none;
  background-color: var(--secondary-200);
  padding: 0 0.75rem;
}
.input-group button svg {
  fill: var(--primary-500);
  transition: fill 0.3s;
  height: 2rem;
  width: 2rem;
}
.input-group button:hover svg {
  fill: var(--primary-200);
}
.input-group .input-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.75rem;
  background-color: var(--secondary-200);
  color: var(--dark-400);
}

textarea {
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--secondary-200);
  background-image: none;
  border: none;
  box-sizing: border-box;
  font-size: 1rem;
  min-height: 130px;
  padding: 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  textarea {
    font-size: 1rem;
  }
}

select,
.select {
  height: 2.25rem;
  padding: 0.5rem 1rem;
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--secondary-200);
  border: none;
}

.help-text {
  max-width: 80ch;
  color: var(--accent-500);
  margin-top: 0.375rem;
}

.checkbox {
  cursor: pointer;
  display: flex;
  align-items: end;
  gap: 0.5rem;
}
.checkbox__label {
  display: inline-block;
}
.checkbox__label::first-letter {
  text-transform: capitalize;
}
.checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.checkbox__input:checked + .checkbox__icon .tick {
  stroke-dashoffset: 0;
}
.checkbox__input:focus-visible + * {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.checkbox__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  overflow: visible;
}
.checkbox__icon rect {
  fill: color-mix(in srgb, var(--secondary-200), transparent 90%);
  stroke: var(--secondary-600);
  stroke-width: 3;
}
.checkbox__icon .tick {
  stroke-dasharray: 20px;
  stroke-dashoffset: 20px;
  transition: stroke-dashoffset 0.2s ease-out;
  stroke: var(--accent-400);
  fill: none;
  stroke-width: 4;
}
.checkbox.radio circle {
  fill: color-mix(in srgb, var(--secondary-200), transparent 90%);
  stroke: var(--secondary-600);
  stroke-width: 3;
}

.radio-form-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-basis: 0;
  gap: 0.5rem;
}
@media screen and (max-width: 768px) {
  .radio-form-group {
    flex-direction: column;
    flex: 1 1 100%;
  }
}
.radio-form-group > div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.radio-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

hr {
  border-color: var(--light-500);
  opacity: 10%;
  box-sizing: border-box;
}

picture {
  display: flex;
}

details hr {
  margin: 1.5rem 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.paper-panel {
  background-color: var(--primary-500);
  color: var(--light-600);
}
@media screen and (min-width: 992px) {
  .paper-panel {
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.paper-panel--raised {
  background-color: var(--primary-400);
}

.paper-panel--padded {
  padding: 1rem;
}
@media screen and (min-width: 992px) {
  .paper-panel--padded {
    padding: 4rem;
  }
}

.page-title {
  margin-bottom: 1rem;
  padding-block: 1rem;
}
.page-title--actions {
  container: page-title/inline-size;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem 1rem;
}
.page-title__heading {
  grid-column: 2;
}
.page-title__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  white-space: nowrap;
}
@container page-title (width < 40rem) {
  .page-title__heading, .page-title__actions {
    grid-column: 1/-1;
    justify-self: center;
  }
}

.mode-switch__label {
  gap: 0.75rem;
  text-decoration: none;
  font-weight: bold;
}
.mode-switch__label:hover {
  color: var(--accent-500);
}

.mode-switch__track {
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  width: 2.5rem;
  height: 1.25rem;
  box-sizing: border-box;
  border: 2px solid currentColor;
  background-color: var(--primary-200);
}

.mode-switch__thumb {
  -webkit-transition: transform 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: transform 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(1.25rem - 6px);
  height: calc(1.25rem - 6px);
  background-color: var(--light-500);
}

.mode-switch:checked + .mode-switch__label .mode-switch__track {
  background-color: var(--accent-500);
}
.mode-switch:checked + .mode-switch__label .mode-switch__thumb {
  transform: translateX(1.25rem);
  background-color: var(--primary-500);
}

.mode-switch:focus-visible + .mode-switch__label {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
}

.help-popover {
  display: inline-flex;
  anchor-scope: --help-popover;
}
.help-popover__trigger {
  anchor-name: --help-popover;
  min-width: 1.75rem;
  padding: 0.125rem 0.5rem;
  font-weight: 700;
  line-height: 1.25;
}
.help-popover__text {
  position-anchor: --help-popover;
  inset: auto;
  bottom: anchor(top);
  left: anchor(left);
  max-width: min(24rem, 90vw);
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--accent-500);
  border-radius: 0.25rem;
  background-color: var(--primary-600);
  color: var(--light-500);
  font-size: 0.875rem;
  line-height: 1.4;
  position-try-fallbacks: flip-block, flip-inline;
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.edit-form__summary {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
}
.edit-form__divider {
  margin-block: 1rem;
}
.edit-form__section, .edit-form__fill {
  display: flex;
  flex-direction: column;
}
.edit-form__section textarea, .edit-form__fill textarea {
  flex-grow: 1;
}
.edit-form__section {
  gap: 0.5rem;
}
.edit-form__panel {
  padding: 1rem;
}
.edit-form__fill {
  flex-grow: 1;
}
.edit-form__submit {
  margin-left: auto;
}

.action-bar {
  display: flex;
  gap: 0.5rem;
}
.action-bar--wrap {
  flex-wrap: wrap;
}

.form-collection__list {
  display: grid;
  gap: 0.5rem;
}

.checkbox__text {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.25rem;
}

.range-accessibility {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.25rem;
}
.range-accessibility button {
  height: 2rem;
  width: 2rem;
}
@container range-accessibility (width < 16.75rem) {
  .range-accessibility {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.range-accessibility__container {
  container: range-accessibility/inline-size;
}
.range-accessibility__input {
  display: flex;
  align-items: center;
  position: relative;
  flex-grow: 1;
}
@container range-accessibility (width < 16.75rem) {
  .range-accessibility__input {
    order: 3;
  }
}
.range-accessibility__input:hover .range-accessibility__cursor,
.range-accessibility__input:hover .range-accessibility__progress {
  background-color: var(--warning-500);
}
.range-accessibility__input input {
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: -webkit-grab;
  cursor: grab;
  outline: none;
  background: none;
}
.range-accessibility__progress {
  --progress-value: 0;
  -webkit-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--accent-600);
  margin-block: 0.5rem;
  border-radius: 25px;
  pointer-events: none;
  overflow: hidden;
}
.range-accessibility__progress::before {
  content: "";
  position: absolute;
  left: var(--progress-value);
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--light-400);
  border-radius: inherit;
}
.range-accessibility__cursor {
  -webkit-transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  position: absolute;
  left: 0;
  border: 3px solid var(--accent-600);
  border-radius: 99px;
  pointer-events: none;
  z-index: 1;
  background-color: var(--light-500);
  color: var(--primary-500);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  width: 2rem;
}
.range-accessibility__min, .range-accessibility__max {
  display: none;
}
@container range-accessibility (width > 30rem) {
  .range-accessibility__min, .range-accessibility__max {
    display: inline-block;
  }
}

.error-message__body {
  margin-top: 0.5rem;
}

.site-header {
  background-color: var(--primary-500);
  padding-block: 1rem;
  margin-bottom: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
}
.site-header__nav {
  container: nav/inline-size;
  padding-inline: 1rem;
  display: flex;
  max-width: 1340px;
  flex-grow: 1;
  align-items: center;
}
.site-header__links, .site-header__search--desktop, .site-header__shortcut--login {
  display: none;
}
@container nav (width > 48.75rem) {
  .site-header__links, .site-header__search--desktop, .site-header__shortcut--login {
    display: flex;
  }
}
@container nav (width > 48.75rem) {
  .site-header__links {
    gap: 1rem;
    margin: auto;
  }
}
@container nav (width > 48.75rem) {
  .site-header__links li {
    font-size: 1.125rem;
  }
}
.site-header__link {
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header__search input {
  flex-grow: 1;
  height: 2.5rem;
  padding: 0 1.5rem;
}
.site-header__search--drawer {
  margin: 1rem 0.5rem 0 0.5rem;
}
.site-header__shortcuts {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
@container nav (width > 48.75rem) {
  .site-header__shortcut--menu {
    display: none;
  }
}
@container nav (width < 28.75rem) {
  .site-header__shortcut--settings, .site-header__shortcut--notifications, .site-header__shortcut--language {
    display: none;
  }
}
@container nav (width < 15rem) {
  .site-header__shortcut--account {
    display: none;
  }
}
.site-header__drawer.modal {
  margin: 0;
  padding-block: 2rem;
  width: 100%;
  background-color: var(--primary-300);
  height: 100dvh;
  justify-content: flex-start;
  transition: transform 0.3s ease-in-out;
}
.site-header__menu {
  display: grid;
  margin-top: 1rem;
  gap: 0.5rem;
}
.site-header__menu li {
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .site-header__menu li {
    width: 100%;
  }
}
.site-header__menu li:last-child {
  margin-top: 3rem;
}
.site-header__menu .site-header__link {
  padding: 0.25rem 1rem;
  justify-content: flex-start;
  border-top: 3px solid var(--primary-500);
  background-color: color-mix(in srgb, var(--primary-500), transparent 55%);
  position: relative;
}
.site-header__menu .site-header__link[aria-current=page] {
  border-color: var(--accent-500);
  background-color: var(--primary-500);
}
.site-header__menu .site-header__link svg {
  background: var(--secondary-300);
  border-radius: 99px;
  padding: 0.25rem;
  height: 2rem;
  width: 2rem;
  fill: var(--primary-500);
}
.site-header__menu .site-header__link img {
  border-radius: 99px;
  height: 2.5rem;
  width: 2.5rem;
}
.site-header__menu .site-header__link::before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  right: 100%;
  background-color: var(--accent-500);
  height: 3px;
}
.site-header__menu li:last-child .site-header__link {
  border-top: 3px solid var(--warning-300);
}

.site-footer {
  container: footer/inline-size;
  width: 100%;
  color: var(--light-600);
  background-color: var(--primary-700);
  margin-top: auto;
}
.site-footer__nav {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}
@container footer (width > 48.75rem) {
  .site-footer__nav {
    flex-direction: row;
  }
}
.site-footer__links {
  display: grid;
  gap: 0.25rem;
  flex-grow: 1;
  justify-content: center;
  text-align: center;
}
@container footer (width > 48.75rem) {
  .site-footer__links {
    flex-grow: 0;
    justify-content: flex-start;
    text-align: left;
  }
}

.button {
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  font-weight: 600;
  text-transform: capitalize;
  position: relative;
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.button:disabled, .button[disabled] {
  cursor: not-allowed;
  filter: grayscale(80%);
}
.button::before {
  content: "";
  position: absolute;
  transition: right 0.3s ease;
  inset: 0;
  z-index: -1;
}
.button:focus::before {
  border: 3px solid;
}
.button svg {
  width: 1.5rem;
  height: 1.5rem;
}
.button.button--light, .button.button--light:visited {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--light-500);
}
.button.button--light:focus::before, .button.button--light:visited:focus::before {
  border-color: var(--accent-500);
}
.button.button--light:not(:disabled):hover, .button.button--light:visited:not(:disabled):hover {
  color: var(--primary-200);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--light-500);
}
.button.button--light:not(:disabled):hover:focus::before, .button.button--light:visited:not(:disabled):hover:focus::before {
  border-color: var(--accent-500);
}
.button.button--light:disabled, .button.button--light:visited:disabled {
  cursor: not-allowed;
  background-color: var(--light-900);
}
.button.button--dark, .button.button--dark:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--primary-500);
}
.button.button--dark:focus::before, .button.button--dark:visited:focus::before {
  border-color: var(--accent-500);
}
.button.button--dark:not(:disabled):hover, .button.button--dark:visited:not(:disabled):hover {
  color: var(--light-700);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--primary-400);
}
.button.button--dark:not(:disabled):hover:focus::before, .button.button--dark:visited:not(:disabled):hover:focus::before {
  border-color: var(--accent-500);
}
.button.button--accent, .button.button--accent:visited {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--accent-500);
}
.button.button--accent:focus::before, .button.button--accent:visited:focus::before {
  border-color: var(--primary-900);
}
.button.button--accent:not(:disabled):hover, .button.button--accent:visited:not(:disabled):hover {
  color: var(--primary-900);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--accent-200);
}
.button.button--accent:not(:disabled):hover:focus::before, .button.button--accent:visited:not(:disabled):hover:focus::before {
  border-color: var(--primary-900);
}
.button.button--warning, .button.button--warning:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--warning-500);
}
.button.button--warning:focus::before, .button.button--warning:visited:focus::before {
  border-color: var(--accent-500);
}
.button.button--warning:not(:disabled):hover, .button.button--warning:visited:not(:disabled):hover {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--warning-300);
}
.button.button--warning:not(:disabled):hover:focus::before, .button.button--warning:visited:not(:disabled):hover:focus::before {
  border-color: var(--accent-500);
}
.button.button--toggle, .button.button--toggle:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--primary-500);
}
.button.button--toggle:focus::before, .button.button--toggle:visited:focus::before {
  border-color: var(--accent-500);
}
.button.button--toggle:not(:disabled):hover, .button.button--toggle:visited:not(:disabled):hover {
  color: var(--light-700);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--primary-400);
}
.button.button--toggle:not(:disabled):hover:focus::before, .button.button--toggle:visited:not(:disabled):hover:focus::before {
  border-color: var(--accent-500);
}
.button.button--toggle[aria-pressed=true], .button.button--toggle:visited[aria-pressed=true] {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--accent-500);
}
.button.button--toggle[aria-pressed=true]:focus::before, .button.button--toggle:visited[aria-pressed=true]:focus::before {
  border-color: var(--primary-900);
}
.button.button--toggle[aria-pressed=true]:not(:disabled):hover, .button.button--toggle:visited[aria-pressed=true]:not(:disabled):hover {
  color: var(--primary-900);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--accent-200);
}
.button.button--toggle[aria-pressed=true]:not(:disabled):hover:focus::before, .button.button--toggle:visited[aria-pressed=true]:not(:disabled):hover:focus::before {
  border-color: var(--primary-900);
}
.button.button--danger, .button.button--danger:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--danger-500);
}
.button.button--danger:focus::before, .button.button--danger:visited:focus::before {
  border-color: var(--accent-500);
}
.button.button--danger:not(:disabled):hover, .button.button--danger:visited:not(:disabled):hover {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--danger-300);
}
.button.button--danger:not(:disabled):hover:focus::before, .button.button--danger:visited:not(:disabled):hover:focus::before {
  border-color: var(--accent-500);
}
.button.button--discord, .button.button--discord:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--discord-500);
}
.button.button--discord:focus::before, .button.button--discord:visited:focus::before {
  border-color: var(--accent-500);
}
.button.button--discord:not(:disabled):hover, .button.button--discord:visited:not(:disabled):hover {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--discord-300);
}
.button.button--discord:not(:disabled):hover:focus::before, .button.button--discord:visited:not(:disabled):hover:focus::before {
  border-color: var(--accent-500);
}
.button.button--plain, .button.button--plain:visited {
  color: inherit;
  background: none;
}
.button.button--help {
  border: 2px solid var(--accent-500);
  border-radius: 999px;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.button-link,
.button-link:visited {
  background: none;
  text-decoration: underline;
  font-size: 1rem;
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  cursor: pointer;
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), fill 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.button-link.button-link--danger,
.button-link:visited.button-link--danger {
  color: var(--danger-500);
}
.button-link.button-link--danger:hover,
.button-link:visited.button-link--danger:hover {
  color: var(--danger-300);
}
.button-link.button-link--warning:hover,
.button-link:visited.button-link--warning:hover {
  color: var(--warning-300);
}

.button-oval {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 2.2rem 1.9rem 2.3rem 2rem;
  background-color: var(--secondary-600);
  overflow: hidden;
  color: var(--dark-500);
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.button-oval:hover {
  background-color: var(--secondary-500);
}
.button-oval:hover svg {
  fill: var(--primary-200);
}
.button-oval.is-current {
  background: transparent;
  color: var(--light-500);
  border: 1px solid var(--light-500);
}
.button-oval img {
  width: 3rem;
  height: 3rem;
}
.button-oval svg {
  fill: var(--primary-500);
  width: 1.75rem;
  height: 1.75rem;
  -webkit-transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: fill 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.tag,
.pill {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--light-100);
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.tag:focus::before,
.pill:focus::before {
  border-color: var(--accent-500);
}
.tag:visited,
.pill:visited {
  color: var(--primary-500);
}
.tag:hover,
.pill:hover {
  color: var(--primary-200);
  background-color: var(--light-500);
}

.modal-host {
  position: absolute;
}

body:has(.modal[open]) {
  overflow: hidden;
}

.modal {
  overflow-x: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  padding-top: 2rem;
  padding-bottom: 0;
  background-color: transparent;
  max-width: 100vw;
  padding: 0;
}
.modal::backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: color-mix(in srgb, var(--primary-500), transparent 50%);
  pointer-events: all;
}
@media prefers-reduced-transparency, (prefers-contrast: more) {
  .modal::backdrop {
    backdrop-filter: none;
    background-color: var(--primary-500);
  }
}
.modal.is-open {
  display: flex;
  animation: fade-in 0.3s ease-in-out;
}
.modal.is-closing {
  animation: fade-out 0.3s ease-in-out;
}
.modal__navigation {
  max-width: 1340px;
  width: 100vw;
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem;
}
.modal__close {
  margin-left: auto;
  margin-right: 0.5rem;
}
.modal__content {
  scroll-behavior: smooth;
  width: 100vw;
  max-width: 1340px;
  overflow: scroll;
}
.modal__content > * {
  animation: fade-in 0.5s ease-in-out;
}
.modal--drawer.is-open {
  animation: sliding-right 0.3s ease-in-out;
}
.modal--drawer.is-closing {
  animation: sliding-left 0.3s ease-in-out;
}
.modal--drawer .modal__navigation {
  margin: 0;
}
.modal--drawer .modal__content {
  overflow: unset;
}

.project-hero {
  container: hero-wrapper/inline-size;
}
.project-hero__periods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.project-hero__period {
  flex-grow: 1;
}
.project-hero__body {
  --column-count: 2;
  --column-size: 50%;
  flex-grow: 1;
  position: relative;
}
@container hero-wrapper (width > 35rem) {
  .project-hero__body {
    display: grid;
    column-gap: 0.5rem;
    row-gap: 0.75rem;
    grid-template-columns: repeat(var(--column-count), calc(var(--column-size) - 0.25rem));
  }
}
.project-hero__body--empty {
  display: flex;
  flex-wrap: wrap;
}
@container hero-wrapper (width > 35rem) {
  .project-hero__body--empty {
    display: flex;
  }
}
.project-hero__slides, .project-hero__nav {
  margin-block: 0;
}
.project-hero__slides {
  display: none;
}
@container hero-wrapper (width > 35rem) {
  .project-hero__slides {
    display: flex;
    position: relative;
  }
}
.project-hero__slide-item {
  display: grid;
  transition: opacity 500ms;
}
.project-hero__slide-item:not(.is-active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}
.project-hero__slide {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
}
.project-hero__slide-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 190px;
}
.project-hero__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-inline: 0.5rem;
}
@container hero-wrapper (width > 18rem) {
  .project-hero__nav {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container hero-wrapper (width > 35rem) {
  .project-hero__nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    margin: 0;
  }
}
.project-hero__nav-link {
  text-decoration: none;
  transition: background-color 300ms;
  display: flex;
  gap: 0.5rem;
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--light-600);
  overflow: hidden;
  border: 2px solid var(--primary-500);
  mask: unset;
}
.project-hero__nav-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--url);
  background-size: cover;
  filter: blur(5px);
  transform: scale(3);
}
@container hero-wrapper (width > 35rem) {
  .project-hero__nav-link {
    padding: 0.5rem 1rem;
    background: var(--primary-500);
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .project-hero__nav-link::before {
    display: none;
  }
}
@container hero-wrapper (width <= 35rem) {
  .project-hero__nav-link--empty {
    display: none;
  }
}
.project-hero__nav-index {
  position: absolute;
  display: flex;
  background: var(--accent-500);
  color: var(--primary-500);
  top: 0;
  left: 0;
  padding: 0.25rem;
  border-radius: 0 0 0.5rem 0;
}
@container hero-wrapper (width > 35rem) {
  .project-hero__nav-index {
    position: initial;
    background: none;
    color: inherit;
    padding: 0;
  }
}
.project-hero__nav-title {
  display: none;
}
@container hero-wrapper (width > 35rem) {
  .project-hero__nav-title {
    display: inline;
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.project-hero__nav-image {
  margin: auto;
}
@container hero-wrapper (width > 35rem) {
  .project-hero__nav-image {
    display: none;
  }
}

.media__usages {
  margin-top: 0.5rem;
  display: flex;
  flex-grow: 1;
  gap: 2rem;
}
.media__usages li {
  width: 200px;
  padding: 0.5rem 1rem;
  height: fit-content;
  background: var(--light-500);
  color: var(--primary-500);
}

.media__usages-wrapper {
  display: flex;
  gap: 2rem;
}

.media-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
}
.media-list label {
  align-items: center;
  background: rgba(0, 0, 0, 0.3019607843);
}
.media-list__control {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.media-list__item {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 1.25rem;
  width: min-content;
}
.media-list__item img {
  transition: transform 0.2s ease-in-out;
}
.media-list__item picture {
  transition: outline 0.3s ease-in-out, border-radius 0.3s ease-in-out;
  justify-content: center;
  overflow: hidden;
  width: 220px;
  background-color: var(--dark-800);
}
.media-list__item picture::after {
  content: "";
  position: absolute;
  height: 0.5rem;
  width: 0%;
  bottom: 0;
  background-color: var(--warning-500);
  border-radius: 1rem;
  transition: width 0.3s ease-in-out;
}
.media-list__item input:checked + picture {
  outline: 4px solid var(--warning-500);
  border-radius: 0.25rem;
}
.media-list__item input:checked + picture::after {
  width: 50%;
}
.media-list__item input:checked + picture img {
  transform: scale(1.2);
}

.media-manager__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.media-selector {
  padding-right: 1rem;
  border-right: solid var(--secondary-600) 2px;
}
.media-selector__control {
  display: flex;
  margin-top: 0.5rem;
  gap: 0.5rem;
}
.media-selector__edit {
  flex-grow: 1;
}

.media-picker-field__body--with-meta {
  display: grid;
  gap: 1rem;
  align-items: start;
}
@container page-block (min-width: 40rem) {
  .media-picker-field__body--with-meta {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}
@container page-block (max-width: 39.999rem) {
  .media-picker-field__body--with-meta .media-selector {
    display: grid;
    justify-content: center;
    padding-right: 0;
    border-right: none;
  }
  .media-picker-field__body--with-meta .media-selector__image {
    justify-self: center;
  }
}
.media-picker-field__meta {
  display: none;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
}
@container page-block (min-width: 40rem) {
  .media-picker-field__meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-content: start;
  }
}
.media-picker-field__meta dt {
  color: var(--light-700);
}
.media-picker-field__meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.media-fieldset {
  container: media-fieldset/inline-size;
  display: grid;
  gap: 1rem;
  margin-bottom: 0.25rem;
  padding: 1rem;
}
.media-fieldset > .form-group {
  gap: 1rem;
}
.media-fieldset .image-upload {
  flex-grow: 1;
}
@media screen and (max-width: 768px) {
  .media-fieldset .image-upload {
    flex-grow: 0;
  }
}
.media-fieldset__upload {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
@container media-fieldset (width <= 768px) {
  .media-fieldset__upload .spoiler--help {
    min-width: 30ch;
  }
  .media-fieldset__upload .help-text {
    max-width: 30ch;
  }
}
.media-fieldset__legend {
  margin-bottom: 0.25rem;
}
.media-fieldset__picker {
  display: grid;
}
.media-fieldset__help {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
}
.media-fieldset__alt {
  min-height: 120px;
  display: flex;
  flex-direction: column;
}
.media-fieldset__alt textarea {
  flex-grow: 1;
}

.image-upload {
  position: relative;
  min-width: 200px;
  max-width: 400px;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 0.5rem;
  height: 100%;
}
.image-upload picture {
  margin: 0;
  height: fit-content;
}

.image-upload .dropzone-container {
  position: absolute;
  min-width: 150px;
  align-items: end;
  inset: 0;
  padding: 0;
}

.image-upload .dropzone-placeholder {
  color: var(--light-500);
  background: color-mix(in srgb, var(--primary-500), transparent 15%);
  padding-block: 0.25rem;
}

.image-upload .dropzone-preview-button {
  margin-top: 0.25rem;
}
.image-upload .dropzone-preview-button::before {
  font-size: 1.424rem;
  background: color-mix(in srgb, var(--primary-500), transparent 15%);
}

.image-upload .dropzone-preview {
  margin: auto;
}

.image-upload .dropzone-preview-image {
  width: 128px;
  height: 128px;
  max-width: unset;
  margin: 0;
  flex-basis: unset;
  background-size: cover;
  background-position: center;
}

.image-upload .dropzone-preview-filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: var(--light-500);
  background: color-mix(in srgb, var(--primary-500), transparent 15%);
  padding: 0.25rem 1rem;
  text-align: center;
}

.media-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}
.media-preview__output {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 1fr;
  row-gap: 0.75rem;
  column-gap: 1rem;
}
.media-preview__title {
  grid-column: span 2;
}
.media-preview__size {
  margin-bottom: 0.25rem;
}
.media-preview__sample {
  display: grid;
}
.media-preview__sample--narrow {
  max-width: 225px;
}

.social-embed-preview-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  grid-column: 1/-1;
}
.social-embed-preview-group__label {
  margin-bottom: 0.375rem;
  font-size: 0.79rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--secondary-300);
}

.social-embed-preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 280px;
  border-radius: 0.75rem;
}
.social-embed-preview__image {
  width: 100%;
}
.social-embed-preview__body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.social-embed-preview__domain {
  text-transform: uppercase;
  font-size: 0.79rem;
}
.social-embed-preview__title {
  font-size: 0.889rem;
}
.social-embed-preview__description {
  font-size: 0.79rem;
}
.social-embed-preview--twitter {
  border: 1px solid #cfd9de;
  background: #fff;
  color: #0f1419;
}
.social-embed-preview--twitter .social-embed-preview__domain {
  color: #536471;
}
.social-embed-preview--facebook {
  background: #f0f2f5;
  color: #050505;
}
.social-embed-preview--facebook .social-embed-preview__domain {
  color: #65676b;
  letter-spacing: 0.02em;
}
.social-embed-preview--discord {
  background: #2b2d31;
  color: #dbdee1;
  border-left: 4px solid #5865f2;
  border-radius: 0.25rem;
}
.social-embed-preview--discord .social-embed-preview__domain {
  color: #949cf7;
}
.social-embed-preview--discord .social-embed-preview__title {
  color: #fff;
}

.splide__pagination {
  position: initial;
  padding-bottom: 1rem;
}

.splide__arrows {
  bottom: 0.5rem;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.splide__arrow {
  position: initial;
  width: 4rem;
  height: 1.75em;
  border-radius: 0.25rem;
  opacity: 1;
  color: var(--primary-500);
  background-color: var(--light-500);
  transform: none;
}
.splide__arrow svg {
  fill: currentColor;
}

.article-homepage {
  container: article-homepage/inline-size;
  padding-block: 1rem 0.5rem;
}
.article-homepage header {
  padding-inline: 1rem;
}
.article-homepage section {
  padding-inline: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@container article-homepage (width > 40rem) {
  .article-homepage section {
    flex-wrap: nowrap;
  }
  .article-homepage section picture {
    flex-basis: 315px;
    flex-shrink: 0;
  }
}
.article-homepage__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: fit-content;
}
.article-homepage__body--empty {
  margin-top: 1rem;
}

.card {
  container: card/inline-size;
  padding: 1rem;
  background-color: var(--primary-400);
  color: var(--light-500);
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: relative;
}
.card a {
  position: relative;
  align-items: center;
}
.card a::after {
  position: absolute;
  content: "";
  inset: 0;
  display: block;
  z-index: 5;
}
.card.card--hover {
  transition: background-color 0.3s ease;
}
.card.card--hover:hover {
  background-color: var(--primary-300);
}
.card__title {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.card__title h2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__title a {
  width: 100%;
  display: block;
}
.card__link {
  position: unset !important;
  isolation: isolate;
}
.card__link::after {
  z-index: 1 !important;
}
.card__infos {
  font-size: 0.79rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

[data-display-mode=full] .card,
.result-card-full {
  box-sizing: border-box;
  border: 1px solid var(--primary-600);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  mask: none;
  -webkit-mask: none;
  padding: 0.75rem;
  display: grid;
  gap: 0.25rem 0.5rem;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "title title" "thumbnail content" "infos infos" "genres genres";
}
[data-display-mode=full] .card:hover, [data-display-mode=full] .card:focus-visible,
.result-card-full:hover,
.result-card-full:focus-visible {
  border-color: var(--accent-500);
}
[data-display-mode=full] .card .mini,
.result-card-full .mini {
  display: none;
}
@media screen and (min-width: 768px) {
  [data-display-mode=full] .card,
  .result-card-full {
    grid-template-areas: "thumbnail title" "thumbnail infos" "thumbnail genres" "thumbnail content";
  }
  [data-display-mode=full] .card .mini,
  .result-card-full .mini {
    display: inline-flex;
  }
}
[data-display-mode=full] .card .card__thumbnail-frame,
.result-card-full .card__thumbnail-frame {
  grid-area: thumbnail;
  position: relative;
}
[data-display-mode=full] .card .card__thumbnail,
.result-card-full .card__thumbnail {
  display: block;
  border-radius: 0.375rem;
  overflow: hidden;
}
[data-display-mode=full] .card .card__badge,
.result-card-full .card__badge {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 2;
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--dark-500), transparent 10%);
}
[data-display-mode=full] .card .card__badge svg,
.result-card-full .card__badge svg {
  width: 1rem;
  height: 1rem;
}
[data-display-mode=full] .card .card__badges,
.result-card-full .card__badges {
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
[data-display-mode=full] .card .card__badges .card__badge,
.result-card-full .card__badges .card__badge {
  position: static;
  top: auto;
  left: auto;
}
[data-display-mode=full] .card .card__format,
.result-card-full .card__format {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--light-500);
}
[data-display-mode=full] .card .card__format-interactive,
.result-card-full .card__format-interactive {
  color: var(--accent-500);
}
[data-display-mode=full] .card .card__favorite,
.result-card-full .card__favorite {
  margin-left: auto;
  flex-shrink: 0;
  z-index: 2;
  mask: none;
  -webkit-mask: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-display-mode=full] .card .card__favorite::before,
.result-card-full .card__favorite::before {
  border-radius: inherit;
}
[data-display-mode=full] .card .card__favorite svg,
.result-card-full .card__favorite svg {
  width: 1.125rem;
  height: 1.125rem;
}
[data-display-mode=full] .card .card__title,
.result-card-full .card__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  grid-area: title;
}
[data-display-mode=full] .card .card__title *,
.result-card-full .card__title * {
  font-size: 1rem;
  font-weight: bold;
}
[data-display-mode=full] .card .card__content,
.result-card-full .card__content {
  font-size: 0.889rem;
  grid-area: content;
  margin: auto;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 768px) {
  [data-display-mode=full] .card .card__content,
  .result-card-full .card__content {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}
[data-display-mode=full] .card .list-infos,
.result-card-full .list-infos {
  grid-area: infos;
  display: grid;
  row-gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
}
[data-display-mode=full] .card .list-infos li:nth-child(2),
.result-card-full .list-infos li:nth-child(2) {
  border-right: none;
}
@container card (width > 30rem) {
  [data-display-mode=full] .card .list-infos,
  .result-card-full .list-infos {
    grid-template-columns: repeat(4, 1fr);
  }
  [data-display-mode=full] .card .list-infos li:nth-child(2),
  .result-card-full .list-infos li:nth-child(2) {
    border-right: solid color-mix(in srgb, var(--light-500), transparent 80%) 1px;
  }
}
[data-display-mode=full] .card .tag-list,
.result-card-full .tag-list {
  grid-area: genres;
  align-items: center;
}

[data-display-mode=thumbnail] .card {
  box-sizing: border-box;
  border: 1px solid var(--primary-600);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  mask: none;
  -webkit-mask: none;
  padding: 0.5rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "title     title" "thumbnail infos" "genres    genres";
}
[data-display-mode=thumbnail] .card:hover, [data-display-mode=thumbnail] .card:focus-visible {
  border-color: var(--accent-500);
}
@media screen and (min-width: 768px) {
  [data-display-mode=thumbnail] .card {
    grid-template-columns: 85px auto;
  }
}
[data-display-mode=thumbnail] .card .card__thumbnail-frame {
  grid-area: thumbnail;
  position: relative;
}
[data-display-mode=thumbnail] .card .card__thumbnail {
  display: block;
  border-radius: 0.25rem;
  overflow: hidden;
}
[data-display-mode=thumbnail] .card .card__thumbnail img {
  max-height: 62.5px;
}
@media screen and (min-width: 768px) {
  [data-display-mode=thumbnail] .card .card__thumbnail img {
    max-height: 125px;
  }
}
[data-display-mode=thumbnail] .card .card__badge {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  padding: 0.1875rem;
  border-radius: 0.1875rem;
  background-color: color-mix(in srgb, var(--dark-500), transparent 25%);
}
[data-display-mode=thumbnail] .card .card__badge svg {
  width: 0.75rem;
  height: 0.75rem;
}
[data-display-mode=thumbnail] .card .card__badges {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
[data-display-mode=thumbnail] .card .card__badges .card__badge {
  position: static;
  top: auto;
  left: auto;
}
[data-display-mode=thumbnail] .card .card__format {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  color: var(--light-500);
}
[data-display-mode=thumbnail] .card .card__format-interactive {
  color: var(--accent-500);
}
[data-display-mode=thumbnail] .card .card__favorite {
  margin-left: auto;
  flex-shrink: 0;
  z-index: 2;
  mask: none;
  -webkit-mask: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-display-mode=thumbnail] .card .card__favorite::before {
  border-radius: inherit;
}
[data-display-mode=thumbnail] .card .card__favorite svg {
  width: 0.875rem;
  height: 0.875rem;
}
[data-display-mode=thumbnail] .card .card__title {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  grid-area: title;
  margin-bottom: auto;
}
[data-display-mode=thumbnail] .card .card__title * {
  font-size: 0.889rem;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  [data-display-mode=thumbnail] .card .card__title * {
    font-size: 1rem;
  }
}
[data-display-mode=thumbnail] .card .card__content {
  display: none;
}
[data-display-mode=thumbnail] .card * {
  font-size: 0.889rem;
}
[data-display-mode=thumbnail] .card .list-infos {
  grid-area: infos;
  gap: 0.25rem;
  flex-wrap: wrap;
  flex-direction: column;
}
[data-display-mode=thumbnail] .card .list-infos li {
  text-align: initial;
  display: block;
  padding: 0;
  border: none;
}
[data-display-mode=thumbnail] .card .list-infos .card__rating {
  color: var(--light-800);
}
[data-display-mode=thumbnail] .card .tag-list {
  grid-area: genres;
  gap: 0.25rem;
  flex-wrap: nowrap;
  overflow: hidden;
}
[data-display-mode=thumbnail] .card li > span:first-child {
  display: none;
}
@media screen and (min-width: 768px) {
  [data-display-mode=thumbnail] .card li:not(:first-child) {
    display: block;
  }
}

.search-result-card {
  display: flex;
  gap: 0.5rem;
  position: relative;
  align-items: flex-start;
  box-sizing: border-box;
  height: 100%;
  padding: 0.75rem;
  border: 1px solid var(--primary-600);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.search-result-card:hover {
  border-color: var(--accent-500);
  background-color: var(--primary-300);
}
.search-result-card__thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 8rem;
}
.search-result-card__thumbnail picture {
  display: block;
}
.search-result-card__thumbnail img {
  width: 100%;
  height: 6rem;
  object-fit: cover;
  border-radius: 0.375rem;
}

.search-result-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}

.search-result-card__footer {
  display: flex;
  align-items: flex-end;
  margin-top: auto;
}

.search-result-card__author {
  display: flex;
  gap: 0.25rem;
}

.search-result-card__avatar {
  border-radius: 999px;
}

.news-card {
  background-color: transparent;
  color: var(--light-500);
  position: relative;
  width: fit-content;
}
.news-card__image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.news-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--primary-500), transparent 55%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.3s ease;
}
.news-card__excerpt {
  border-top: 1px solid #557379;
  background-color: color-mix(in srgb, var(--dark-500), transparent 80%);
  padding: 0.5rem;
  opacity: 0;
  height: 100%;
  max-height: 0;
  transition: opacity 0.3s ease, max-height 0.7s ease;
}
.news-card:hover .news-card__excerpt {
  opacity: 1;
  max-height: 200px;
}
.news-card:hover .news-card__content {
  background-color: var(--primary-400);
}

.newest-list {
  container: project-list-newest-wrapper/inline-size;
  margin-block: 1rem;
}
.newest-list__list {
  display: grid;
  gap: 1rem;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  min-width: 0;
}
@container project-list-newest-wrapper (width > 48.75rem) {
  .newest-list__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container project-list-newest-wrapper (width > 65rem) {
  .newest-list__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.newest-list__card {
  border: 1px solid var(--primary-600);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  mask: none;
  -webkit-mask: none;
  padding: 0.75rem;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "thumbnail title" "thumbnail content" "footer footer";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0.5rem 0.75rem;
}
@media screen and (min-width: 576px) {
  .newest-list__card {
    grid-template-areas: "thumbnail title" "thumbnail content" "thumbnail footer";
  }
}
.newest-list__card .newest-list__thumbnail {
  margin-top: auto;
  grid-area: thumbnail;
  display: block;
  position: relative;
}
.newest-list__card .newest-list__thumbnail .newest-list__cover {
  display: block;
  border-radius: 0.375rem;
  overflow: hidden;
}
.newest-list__card .newest-list__thumbnail .card__badge {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 2;
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--dark-500), transparent 10%);
}
.newest-list__card .newest-list__thumbnail .card__badge svg {
  width: 1rem;
  height: 1rem;
}
.newest-list__card .newest-list__thumbnail .card__badges {
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.newest-list__card .newest-list__thumbnail .card__badges .card__badge {
  position: static;
  top: auto;
  left: auto;
}
.newest-list__card .newest-list__thumbnail .card__format {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--light-500);
}
.newest-list__card .newest-list__thumbnail .card__format-interactive {
  color: var(--accent-500);
}
.newest-list__card .newest-list__header {
  grid-area: title;
  overflow: hidden;
}
.newest-list__card .newest-list__content {
  grid-area: content;
  overflow: hidden;
  min-width: 0;
}
.newest-list__card .newest-list__content a {
  text-decoration: none;
  position: relative;
}
.newest-list__card .newest-list__content a::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  top: unset;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.newest-list__card .newest-list__content a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.newest-list__card .newest-list__footer {
  grid-area: footer;
}
.newest-list__separator {
  margin-top: 0.5rem;
}
.newest-list__pages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}
.newest-list__page {
  display: flex;
  gap: 0.25rem;
}
.newest-list__footer {
  display: flex;
  align-items: flex-end;
}
.newest-list__author {
  display: flex;
  gap: 0.25rem;
}
.newest-list__avatar {
  border-radius: 999px;
}
.newest-list__empty {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.newest-list__empty-action {
  margin-top: 1rem;
}

.pagination__list {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.375rem;
}

.pagination .pagination__page {
  color: var(--dark-500);
  height: 1.75rem;
  width: 1.75rem;
}
.pagination .pagination__page.is-current {
  background: transparent;
  color: var(--light-500);
  border: 1px solid var(--light-500);
}

.pagination__move {
  display: flex;
  align-items: center;
}
.pagination__move a {
  display: inline-flex;
}
.pagination__move span {
  line-height: 0;
}
.pagination__move svg {
  stroke: currentColor;
  height: 1.25rem;
  width: 1.25rem;
}

.flow {
  color: var(--dark-500);
}
.flow > * + * {
  margin-top: 1em;
}
.flow p {
  color: currentColor;
}
.flow ul {
  list-style-type: disc;
}
.flow ol {
  list-style-type: decimal;
}
.flow blockquote {
  background-color: var(--secondary-200);
  padding: 1rem;
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: relative;
}
.flow blockquote::after, .flow blockquote::before {
  font-size: 2.027rem;
  display: flex;
  line-height: 0;
  color: color-mix(in srgb, var(--primary-500), transparent 80%);
}
.flow blockquote::after {
  content: "”";
  align-items: flex-end;
  justify-content: flex-end;
}
.flow blockquote::before {
  align-items: flex-start;
  position: absolute;
  top: 2.5rem;
  content: "“";
}

.ql-hidden {
  display: none;
}

.ql-toolbar {
  background-color: var(--secondary-200);
  border-bottom: 1px solid color-mix(in srgb, var(--dark-500), transparent 65%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ql-editor {
  min-height: 100px;
  max-height: 300px;
  background-color: var(--secondary-200);
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--light-500), transparent 90%);
  color: var(--dark-500);
  font-size: 1rem;
}
.ql-editor ul {
  list-style: inside;
  padding: revert;
}
.ql-editor ol {
  list-style: decimal;
  padding: revert;
}
.ql-editor a {
  color: var(--primary-300);
}
.ql-editor a:hover {
  color: var(--primary-200);
}
.ql-editor blockquote {
  background-color: var(--secondary-700);
  padding: 0.25rem;
}
.ql-editor hr {
  opacity: unset;
  border-color: unset;
}

.ql-formats {
  display: inline-flex;
  gap: 0.25rem;
}
.ql-formats button {
  display: flex;
  justify-content: center;
  background-color: transparent;
  transition: background-color 0.3s ease;
  padding: 0.25rem;
}
.ql-formats svg {
  height: 1.5rem;
  width: auto;
  fill: unset;
  stroke: unset;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  z-index: 10;
}

.ql-toolbar.ql-snow,
.ql-container {
  font-family: var(--font-family);
  flex-wrap: wrap;
}

.ql-container.wysiwyg__editor {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
}
.ql-container.wysiwyg__editor > .ql-editor {
  flex: 1 1 0;
  height: auto;
  min-height: 300px;
  max-height: none;
}

.alert {
  --animation-duration: 300ms;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fade-in var(--animation-duration) ease-in-out;
}
@media screen and (min-width: 992px) {
  .alert {
    -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
    mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
    -webkit-mask-size: 105% 100%;
    mask-size: 105% 100%;
  }
}
.alert.is-leaving {
  animation: fade-out var(--animation-duration) ease-in-out;
}
.alert--success {
  background-color: var(--success-700);
  color: var(--light-300);
}
.alert--error {
  background-color: var(--danger-500);
  color: var(--light-500);
}
.alert__message, .alert__close {
  margin-left: auto;
}

.spoiler {
  transition: border-inline-start 0.3s ease-in-out;
  border-inline-start: 2px solid var(--secondary-600);
  height: fit-content;
}
.spoiler[open] {
  border-inline-start: 2px solid var(--accent-500);
}
.spoiler:hover {
  border-inline-start: 2px solid var(--accent-500);
}
.spoiler__summary {
  flex-wrap: wrap;
  stroke: var(--light-500);
  color: var(--light-500);
  align-items: center;
  border: none;
  box-sizing: border-box;
  background-color: color-mix(in srgb, var(--dark-500), transparent 80%);
  cursor: pointer;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0.75rem;
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1), stroke 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  width: 100%;
}
.spoiler__title {
  order: 2;
}
.spoiler__title * {
  transition: color 0.3s ease;
}
.spoiler__icon {
  transition: transform 0.3s ease-in-out, stroke 0.3s ease, color 0.3s ease;
  order: 1;
}
.spoiler[open] .spoiler__icon {
  transform: rotate(180deg);
}
.spoiler__summary:hover .spoiler__icon, .spoiler__summary:hover .spoiler__title * {
  color: var(--accent-500);
}
.spoiler__summary:hover .spoiler__icon {
  stroke: var(--accent-500);
}
.spoiler__actions {
  order: 3;
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  padding-right: 1.5rem;
}
.spoiler__actions .button-link.button-link--light:hover {
  color: var(--accent-500);
}
.spoiler__content {
  border-top: 1px solid #557379;
  background-color: color-mix(in srgb, var(--dark-500), transparent 80%);
  padding: 0.5rem;
}
.spoiler--solid .spoiler__summary, .spoiler--solid .spoiler__content {
  background-color: var(--primary-700);
}
.spoiler--help .spoiler__summary {
  background: none;
  flex-wrap: nowrap;
  padding-block: 0.25rem;
  font-size: 0.889rem;
}
.spoiler--help .spoiler__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.list-infos {
  display: flex;
  justify-content: space-between;
}
.list-infos > li {
  flex: auto;
  padding: 0 0.75rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.25rem;
}
.list-infos > li:not(:last-child) {
  border-right: solid color-mix(in srgb, var(--light-500), transparent 80%) 1px;
}

.list-pills,
.list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.list-pills > li {
  display: flex;
}
.list-pills > li,
.list-pills .pill {
  flex-grow: 1;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
}
.tag-list .tag {
  padding: 0.25rem 0.5rem;
}

.results-grid {
  container: resultsgrid/inline-size;
  box-sizing: border-box;
}

.search-main-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.results-grid > ul,
ul.results-grid {
  display: grid;
  gap: 0.75rem;
}
.results-grid > ul .tag,
ul.results-grid .tag {
  color: var(--light-500);
  background-color: var(--primary-200);
  line-height: 1;
}
.results-grid > ul[data-display-mode=full],
ul.results-grid[data-display-mode=full] {
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  min-height: 0;
  min-width: 0;
}
.results-grid > ul[data-display-mode=full] > li,
ul.results-grid[data-display-mode=full] > li {
  overflow: hidden;
  min-width: 0;
}
.results-grid > ul[data-display-mode=thumbnail],
ul.results-grid[data-display-mode=thumbnail] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: 0.75rem;
}
@media screen and (min-width: 992px) {
  .results-grid > ul[data-display-mode=thumbnail],
  ul.results-grid[data-display-mode=thumbnail] {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  }
}

.search-divider {
  margin-bottom: 1rem;
}

.table {
  color: var(--dark-500);
  width: 100%;
  border: none;
  border-collapse: collapse;
  background-color: color-mix(in srgb, var(--secondary-200), transparent 30%);
  isolation: isolate;
}
.table thead {
  background-color: var(--primary-900);
  color: var(--light-500);
  border-top: 5px solid var(--primary-100);
}
@media screen and (min-width: 992px) {
  .table thead {
    position: sticky;
  }
}
.table tfoot {
  background-color: var(--dark-500);
  color: var(--light-500);
}
@media screen and (min-width: 992px) {
  .table tfoot {
    position: sticky;
  }
}
.table thead {
  top: 0;
  z-index: 10;
}
.table tfoot {
  bottom: 0;
}
.table tbody tr:nth-child(odd) {
  background-color: color-mix(in srgb, var(--secondary-500), transparent 50%);
}
.table th {
  text-transform: capitalize;
  user-select: none;
}
.table th svg {
  fill: currentColor;
  width: 1.25rem;
  height: 1.25rem;
}
.table td {
  position: relative;
}
.table td,
.table th {
  padding: 0.5rem 1rem;
  border: none;
  vertical-align: middle;
}
.table td img, .table td > svg,
.table th img,
.table th > svg {
  display: block;
  margin: auto;
}
.table th {
  padding: 1rem;
}
.table a {
  color: var(--primary-500);
  fill: var(--primary-500);
  stroke: var(--primary-500);
}
.table a:hover {
  color: var(--primary-300);
  fill: var(--primary-300);
  stroke: var(--primary-300);
}
.table__row-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.table tbody .table__row--clickable {
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}
.table tbody .table__row--clickable:hover {
  background-color: color-mix(in srgb, var(--light-500), transparent 90%);
}

.datatable-container {
  margin-bottom: 0.5rem;
  overflow: scroll;
  max-width: 100vw;
}

.datatable-top {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-block: 1rem 0.75rem;
}

.datatable-ascending .datatable-sorter {
  color: var(--accent-500);
}
.datatable-ascending .datatable-sorter::before {
  color: var(--accent-500);
}

.datatable-descending .datatable-sorter {
  color: var(--accent-500);
}
.datatable-descending .datatable-sorter::after {
  color: var(--accent-500);
}

.datatable-sorter {
  background-color: transparent;
  color: var(--light-500);
  width: 100%;
  position: relative;
  text-align: start;
  padding-left: 0.75rem;
  font-size: 1rem;
}
.datatable-sorter, .datatable-sorter::before, .datatable-sorter::after {
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.datatable-sorter::after {
  content: "▼";
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.5rem;
  font-family: initial;
  color: var(--light-900);
}
.datatable-sorter::before {
  content: "▲";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.5rem;
  font-family: initial;
  color: var(--light-900);
}
.datatable-sorter:hover, .datatable-sorter:focus, .datatable-sorter:hover::before, .datatable-sorter:hover::after {
  color: var(--accent-500);
}

.datatable-pagination-list {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.25rem;
}

.datatable-pagination-list-item-link {
  color: #212121;
  height: 1.75rem;
  width: 1.75rem;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2.2rem 1.9rem 2.3rem 2rem;
  background-color: var(--secondary-600);
  overflow: hidden;
  -webkit-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.datatable-pagination-list-item:not(.datatable-disabled) .datatable-pagination-list-item-link:hover {
  background-color: var(--light-500);
}

.datatable-active .datatable-pagination-list-item-link {
  background: transparent;
  color: var(--light-500);
  border: 1px solid var(--light-500);
}

.datatable-disabled button {
  background: transparent;
  color: var(--light-500);
  border: 1px solid var(--light-500);
  cursor: initial;
}

.table__actions {
  display: flex;
  gap: 0.25rem;
}
.table__actions--end {
  justify-content: flex-end;
}

.ts-wrapper.multi .ts-control [data-value] {
  margin: 0;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: 0.25rem 0.5rem;
}

.has-items .ts-control > input {
  margin: 0 !important;
}

.ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--secondary-200);
  background-image: none;
  border: none;
  box-sizing: border-box;
  background-image: none;
  box-shadow: none;
}
@media screen and (min-width: 768px) {
  .ts-control,
  .ts-wrapper.single .ts-control,
  .ts-wrapper.single.input-active .ts-control {
    font-size: 1rem;
  }
}

.ts-control {
  gap: 0.25rem;
}
.ts-control input {
  mask: none;
  width: fit-content;
  min-width: 4rem;
  font-size: 1rem;
}

.ts-dropdown {
  z-index: 30;
  color: var(--light-500);
  background-color: color-mix(in srgb, var(--primary-800), transparent 5%);
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  border: none;
  font-size: 1rem;
}
.ts-dropdown [class~=active].create,
.ts-dropdown [class~=active] {
  color: var(--light-500);
  background-color: color-mix(in srgb, var(--secondary-800), transparent 60%);
}

.ts-wrapper.multi .ts-control [data-value],
.ts-wrapper.multi .ts-control [data-value][class~=active] {
  background: var(--primary-500);
  color: var(--light-500);
  border: 0;
  text-shadow: none;
  box-shadow: none;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-wrapper.multi .ts-control > div[class~=active] {
  border: 0;
}

.ts-wrapper[class~=plugin-remove_button]:not(.rtl) .item .remove {
  padding-right: 0.75rem;
  font-weight: 500;
  font-size: 1rem;
  border-color: color-mix(in srgb, var(--light-500), transparent 90%);
}

.ts-wrapper.dropdown-active .ts-control,
.ts-wrapper.focus .ts-control {
  height: auto;
  overflow: visible;
}

.ts-wrapper.single.has-items .ts-control input {
  min-width: 0;
}

[class~=plugin-clear_button].focus.has-items .clear-button, [class~=plugin-clear_button]:not([class~=disabled]):hover.has-items .clear-button {
  pointer-events: initial;
}
[class~=plugin-clear_button] .clear-button {
  height: 100%;
  right: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.ts-wrapper[class~=plugin-clear_button] .ts-control > .clear-button {
  border-color: var(--danger-600);
  padding: 0 0.5rem;
}

[class~=plugin-clear_button] .clear-button {
  background-color: var(--danger-500) !important;
}

.ts-hidden-accessible {
  left: 0;
}

.ts-dropdown .optgroup [class~=optgroup-header] {
  color: var(--accent-500);
  background-color: var(--primary-800);
  font-weight: bold;
}

.form--link-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26em), 1fr));
  gap: 0.5rem;
}

.form--link-collection-empty {
  display: none;
}

.form--link-collection:empty + .form--link-collection-empty {
  display: block;
}

.collection-row-controls {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.link-entry__card {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.link-entry__card > :first-child {
  margin-top: 0;
}
.link-entry__card label {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
.link-entry__card ul {
  margin-top: 0.25rem;
}

.link-entry__card .link-entry__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.link-entry__card .link-entry__header label {
  margin: auto 0 0;
}

.link-entry__delete {
  flex-shrink: 0;
}

.link-entry__text {
  flex-grow: 1;
}

.social-links-field__fieldset {
  flex-grow: 1;
}
.social-links-field__legend {
  margin-bottom: 0.25rem;
}

.comment {
  display: grid;
  gap: 0.5rem;
  color: var(--light-500);
  padding: 1rem;
  background-color: var(--primary-400);
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@media screen and (max-width: 992px) {
  .comment svg {
    height: 1.25rem;
    width: 1.25rem;
  }
}
@container (width < 20rem) {
  .comment {
    padding: 0.25rem 0.75rem;
  }
  .comment .comment__action-label {
    display: none;
  }
}
.comment__header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
@container (width < 20rem) {
  .comment__header * {
    font-size: 0.79rem;
  }
}
.comment__author, .comment__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.comment__avatar {
  border-radius: 999px;
}
.comment__quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--primary-500);
  color: var(--light-900);
  font-style: italic;
  font-size: 0.889rem;
}
.comment__quote-source {
  display: flex;
  gap: 0.25rem;
}
.comment__quote-link {
  display: inline-flex;
}
@container (width < 20rem) {
  .comment__body * {
    font-size: 0.889rem !important;
  }
}
.comment__gif {
  margin-top: 0.5rem;
  max-width: 100%;
}
.comment__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment__actions {
  display: flex;
  gap: 0.5rem;
}
.comment__edit.button[aria-pressed=true] {
  color: var(--danger-500);
}

@keyframes show-comments {
  0% {
    opacity: 0;
    transform: translate(0, -50px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
.comment-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: scroll;
  padding: 0.75rem;
  scroll-behavior: smooth;
}
.comment-thread .comment {
  animation: show-comments 1s ease;
}
.comment-thread__item {
  order: 2;
}
.comment-thread__item--root {
  order: 1;
}
.comment-thread__back {
  width: 100%;
  margin-block: 0.25rem;
}
.comment-thread__separator {
  margin-top: 0.75rem;
  border-color: var(--secondary-500);
}

.comment-section {
  color: var(--primary-500);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.comment-section textarea {
  min-height: 75px;
}
.comment-section__empty-message {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: var(--light-500);
}
@media screen and (min-width: 992px) {
  .comment-section__empty-message {
    padding: 4rem;
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.comment-form {
  padding: 0.75rem;
  position: sticky;
  bottom: 0;
  background-color: color-mix(in srgb, var(--primary-800), transparent 10%);
  color: var(--light-500);
}
.comment-form button {
  transition: all 0.5s ease-in-out;
}
.comment-form button[type=button] {
  transform-origin: right;
  animation: grow-x 0.5s ease-in-out;
  max-width: fit-content;
}
.comment-form article {
  transform-origin: top;
  animation: show-comments 0.5s ease-in-out;
}
.comment__body .comment-form {
  background-color: transparent;
  padding: 0;
}
.comment-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.comment-form__submit {
  flex-grow: 1;
}

@keyframes grow-x {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.comment-rating {
  display: flex;
  gap: 0.5rem;
}

.comment-go-to-link--deleted {
  margin-block: auto;
}

.review__header {
  align-items: center;
}
.review__author, .review__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.review__avatar {
  border-radius: 999px;
}
.review__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review__actions {
  display: flex;
  gap: 0.5rem;
}

.review-list__header {
  display: grid;
  gap: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 992px) {
  .review-list__header {
    grid-template-columns: 1fr 1fr;
  }
  .review-list__header .comment-form {
    grid-column: span 2;
  }
}
.review-list__header .button.button--accent {
  padding-inline: 2rem;
}
.review-list__intro {
  display: grid;
  gap: 0.75rem;
}
.review-list__disclaimer {
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--primary-400);
  color: var(--light-500);
}
.review-list__login, .review-list__back {
  margin-right: auto;
}
.review-list__separator {
  margin-block: 1rem;
}
.review-list__current {
  display: grid;
  gap: 0.5rem;
}
.review-list__current-separator {
  margin-top: 0.75rem;
}
.review-list__item {
  order: 2;
}
.review-list__body .comment-thread {
  overflow: unset;
}
.review-list__body .comment-form {
  order: 1;
  z-index: 10;
  top: 0;
  bottom: unset;
}

.review-form__actions {
  display: flex;
  gap: 0.5rem;
}
.review-form__submit {
  margin-left: auto;
}

.karma {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.karma__score {
  padding: 0.125rem 0.25rem;
}
.karma__score.karma__score--good {
  background-color: var(--success-500);
  color: var(--primary-500);
}
.karma__score.karma__score--neutral {
  background-color: var(--warning-500);
  color: var(--primary-800);
}
.karma__score.karma__score--bad {
  background-color: var(--danger-500);
  color: var(--light-700);
}

.not-verified-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: var(--warning-500);
  display: flex;
  justify-content: center;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  color: var(--dark-800);
}
.not-verified-banner svg {
  width: 2rem;
  height: auto;
}
.not-verified-banner__warning {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
}

.password-field__label {
  display: flex;
  gap: 0.25rem;
  justify-content: space-between;
}
.password-field__strength {
  border-radius: 0.25rem;
  padding-inline: 0.25rem;
}
.password-field[data-strength="0"] .password-field__strength {
  background-color: var(--danger-800);
  color: var(--light-500);
}
.password-field[data-strength="0"] .password-field__bar {
  color: var(--danger-800);
}
.password-field[data-strength="0"] .password-field__bar::-moz-progress-bar {
  background: var(--danger-800);
}
.password-field[data-strength="0"] .password-field__bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-field[data-strength="0"] .password-field__bar::-webkit-progress-value {
  background: var(--danger-800);
}
.password-field[data-strength="1"] .password-field__strength {
  background-color: var(--danger-500);
  color: var(--light-500);
}
.password-field[data-strength="1"] .password-field__bar {
  color: var(--danger-500);
}
.password-field[data-strength="1"] .password-field__bar::-moz-progress-bar {
  background: var(--danger-500);
}
.password-field[data-strength="1"] .password-field__bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-field[data-strength="1"] .password-field__bar::-webkit-progress-value {
  background: var(--danger-500);
}
.password-field[data-strength="2"] .password-field__strength {
  background-color: var(--warning-500);
  color: var(--light-500);
}
.password-field[data-strength="2"] .password-field__bar {
  color: var(--warning-500);
}
.password-field[data-strength="2"] .password-field__bar::-moz-progress-bar {
  background: var(--warning-500);
}
.password-field[data-strength="2"] .password-field__bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-field[data-strength="2"] .password-field__bar::-webkit-progress-value {
  background: var(--warning-500);
}
.password-field[data-strength="3"] .password-field__strength {
  background-color: var(--success-500);
  color: var(--light-500);
}
.password-field[data-strength="3"] .password-field__bar {
  color: var(--success-500);
}
.password-field[data-strength="3"] .password-field__bar::-moz-progress-bar {
  background: var(--success-500);
}
.password-field[data-strength="3"] .password-field__bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-field[data-strength="3"] .password-field__bar::-webkit-progress-value {
  background: var(--success-500);
}
.password-field[data-strength="4"] .password-field__strength {
  background-color: var(--success-300);
  color: var(--light-500);
}
.password-field[data-strength="4"] .password-field__bar {
  color: var(--success-300);
}
.password-field[data-strength="4"] .password-field__bar::-moz-progress-bar {
  background: var(--success-300);
}
.password-field[data-strength="4"] .password-field__bar::-webkit-progress-bar {
  background: var(--secondary-200);
}
.password-field[data-strength="4"] .password-field__bar::-webkit-progress-value {
  background: var(--success-300);
}
.password-field__bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  height: 0.5rem;
  border: none;
}
.password-field__errors {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.password-field__error {
  display: flex;
}
.password-field__message {
  display: inline-flex;
  background-color: var(--danger-800);
  color: var(--light-500);
  font-size: 0.889rem;
  padding-left: 0.25rem;
  border-radius: 0.25rem;
  flex-grow: 1;
}

.visual-settings {
  padding: 1rem;
}

.news {
  display: grid;
  gap: 1rem;
  color: var(--dark-500);
}
.news a {
  color: var(--primary-500);
}
.news a:hover {
  color: var(--primary-300);
}
.news .button-link {
  color: var(--primary-500);
}
.news .button.button--dark,
.news .button.button--dark:visited {
  color: var(--primary-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--light-500);
}
.news .button.button--dark:focus::before,
.news .button.button--dark:visited:focus::before {
  border-color: var(--accent-500);
}
.news .button.button--dark:not(:disabled):hover,
.news .button.button--dark:visited:not(:disabled):hover {
  color: var(--primary-200);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--light-500);
}
.news .button.button--dark:not(:disabled):hover:focus::before,
.news .button.button--dark:visited:not(:disabled):hover:focus::before {
  border-color: var(--accent-500);
}
.news .button.button--dark:disabled,
.news .button.button--dark:visited:disabled {
  cursor: not-allowed;
  background-color: var(--light-900);
}
.news .button.button--light,
.news .button.button--light:visited {
  color: var(--light-500);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--primary-500);
}
.news .button.button--light:focus::before,
.news .button.button--light:visited:focus::before {
  border-color: var(--accent-500);
}
.news .button.button--light:not(:disabled):hover,
.news .button.button--light:visited:not(:disabled):hover {
  color: var(--light-700);
  stroke: currentColor;
  fill: currentColor;
  background-color: var(--primary-400);
}
.news .button.button--light:not(:disabled):hover:focus::before,
.news .button.button--light:visited:not(:disabled):hover:focus::before {
  border-color: var(--accent-500);
}
.news picture {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 1rem;
  position: relative;
}
.news picture::before {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(135deg, var(--light-500) 0%, var(--light-500) 47%, var(--primary-500) 47%, var(--primary-500) 50%, transparent 50%, transparent 100%);
  width: 35px;
  height: 35px;
  top: -5px;
  left: -5px;
}
.news picture::after {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(135deg, transparent 0%, transparent 47%, var(--primary-500) 47%, var(--primary-500) 50%, var(--light-500) 50%, var(--light-500) 100%);
  width: 35px;
  height: 35px;
  bottom: -5px;
  right: -5px;
}
.news footer {
  display: flex;
  justify-content: space-between;
  background-color: var(--light-500);
  padding-block: 0.5rem;
}

.news__project {
  position: relative;
}

.news__navigation {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.latest-articles__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.latest-articles__all {
  margin-left: auto;
}
.latest-articles__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.5rem;
  justify-items: center;
}

.saga-book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  container-type: inline-size;
  row-gap: 0.25rem;
}

@container (width < 24rem) {
  .saga-book-list__item:nth-child(1n) .saga-book-list__index {
    right: 0;
  }
}
@container (width < 36rem) {
  .saga-book-list__item:nth-child(2n) .saga-book-list__index {
    right: 0;
  }
}
@container (width < 48rem) {
  .saga-book-list__item:nth-child(3n) .saga-book-list__index {
    right: 0;
  }
}
@container (width < 60rem) {
  .saga-book-list__item:nth-child(4n) .saga-book-list__index {
    right: 0;
  }
}
@container (width < 72rem) {
  .saga-book-list__item:nth-child(5n) .saga-book-list__index {
    right: 0;
  }
}
@container (width < 84rem) {
  .saga-book-list__item:nth-child(6n) .saga-book-list__index {
    right: 0;
  }
}
@container (width < 96rem) {
  .saga-book-list__item:nth-child(7n) .saga-book-list__index {
    right: 0;
  }
}
@container (width < 108rem) {
  .saga-book-list__item:nth-child(8n) .saga-book-list__index {
    right: 0;
  }
}
.saga-book-list__item {
  --color: var(--primary-300);
  background-color: var(--color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.saga-book-list__item:nth-child(odd) {
  --color: var(--primary-200);
}

.saga-book-list__book {
  cursor: move;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 1rem;
  height: calc(100% - 2rem);
}
.saga-book-list__book .media-image {
  justify-content: center;
}

.saga-book-list__handlebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: move;
}

.saga-book-list__index {
  position: absolute;
  top: 0;
  right: -1.5rem;
  padding: 0.5rem;
  background-color: var(--color);
  border-radius: 0 0 0.5rem 0;
  font-size: 1.125rem;
}

.saga-book-list__header {
  margin-bottom: 0.5rem;
}

.saga-book-list__title {
  flex-grow: 1;
  display: inline-flex;
  margin-top: 0.5rem;
}

.saga-book-list__footer {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.saga-book-list__remove {
  margin-left: auto;
}

.saga-book-list__toolbar {
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.saga-book-list__help {
  flex-grow: 1;
  width: 100%;
}

.saga-book-list__separator {
  margin-block: 1rem;
}

.star-rating--collapsed, .star-rating__score {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.star-rating--collapsed svg, .star-rating__score svg {
  fill: var(--accent-500);
}
.star-rating--expanded, .star-rating__stars {
  display: flex;
}
.star-rating__star.is-filled svg {
  fill: var(--accent-500);
}
.star-rating__total {
  display: flex;
  font-size: 1.802rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.star-rating__total svg {
  height: 1.266rem;
  width: 1.266rem;
}
.star-rating__criteria {
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6em), 1fr));
  align-items: end;
}
@media screen and (min-width: 768px) {
  .star-rating__criteria {
    max-width: 300px;
  }
}
@media screen and (min-width: 992px) {
  .star-rating__criteria {
    max-width: 600px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  }
}

.rating-input {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}
@media screen and (min-width: 992px) {
  .rating-input {
    flex-grow: 0;
    justify-content: flex-start;
    width: fit-content;
  }
}
.rating-input svg {
  height: 1.75rem;
  width: 100%;
}
.rating-input__star, .rating-input__none {
  margin: 0;
  padding: 0.5rem;
  cursor: pointer;
}
@media screen and (min-width: 992px) {
  .rating-input__star, .rating-input__none {
    padding: 0;
    padding-right: 0.125rem;
  }
}
.rating-input__star svg {
  fill: var(--accent-500);
}
.rating-input__none svg {
  fill: none;
  stroke: var(--light-900);
  stroke-width: 16px;
}
.rating-input__radio {
  display: none;
}
.rating-input__radio--none:checked + .rating-input__none svg {
  fill: var(--danger-500);
  stroke: var(--danger-500);
}
.rating-input__radio:checked ~ .rating-input__star svg {
  fill: var(--light-900);
}
.rating-input:hover .rating-input__star svg {
  fill: var(--accent-500);
}
.rating-input:hover .rating-input__radio--none:not(:hover) + .rating-input__none svg {
  fill: none;
}
.rating-input__radio:hover ~ .rating-input__star * {
  fill: var(--light-900);
}
.rating-input__radio--none:hover + .rating-input__none svg {
  fill: var(--danger-500);
  stroke: var(--danger-500);
}

.thumbnail-color-input {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.thumbnail-color-input__legend {
  margin-bottom: 0.5rem;
  padding: 0;
}
.thumbnail-color-input__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.thumbnail-color-input__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.thumbnail-color-input__swatch {
  --swatch: var(--light-500);
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--light-500) 50%, transparent);
  border-radius: 0.25rem;
  background: var(--swatch);
  color: var(--light-500);
  font-family: "Lora", serif;
  text-shadow: 0 0 2px var(--dark-900);
  cursor: pointer;
}
@supports (color: contrast-color(red)) {
  .thumbnail-color-input__swatch {
    color: contrast-color(var(--swatch));
    text-shadow: none;
  }
}
.thumbnail-color-input__radio:checked + .thumbnail-color-input__swatch {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
}
.thumbnail-color-input__radio:focus-visible + .thumbnail-color-input__swatch {
  outline: 3px dashed var(--primary-500);
  outline-offset: 2px;
}
.thumbnail-color-input__picker {
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.review-criteria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.5rem;
}
.review-criteria__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
}
.review-criteria__label {
  width: 100%;
  justify-content: space-between;
}

.book-status {
  display: grid;
  align-content: center;
}

.book-status--abandoned svg {
  fill: var(--danger-500);
}

.book-status--finished svg {
  fill: var(--accent-500);
}

.book-status--hiatus svg {
  fill: var(--warning-500);
}

.book-status--ongoing svg {
  fill: var(--success-500);
}

.favorite-select {
  display: none;
  position: absolute;
  z-index: 10;
  inset: 0;
  border-radius: inherit;
}
.favorite-select input {
  position: absolute;
  opacity: 0;
}
.favorite-select__label {
  -webkit-transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  cursor: pointer;
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dotted transparent;
  border-radius: inherit;
  background-color: color-mix(in srgb, var(--primary-500), transparent 60%);
}
.favorite-select__label:hover {
  border-color: var(--accent-500);
}
.favorite-select__icon {
  -webkit-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.25rem;
  width: 3.25rem;
  border: 2px solid var(--primary-500);
  border-radius: 50%;
  background-color: var(--secondary-500);
}
.favorite-select__icon svg {
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  height: 1.75rem;
  width: 1.75rem;
  fill: var(--primary-500);
  opacity: 0.2;
}
.favorite-select__label:hover .favorite-select__icon {
  border-color: var(--accent-500);
}
.favorite-select__label:hover .favorite-select__icon svg {
  opacity: 0.5;
}
input:focus-visible + .favorite-select__label {
  outline: 3px solid var(--accent-500);
  outline-offset: -3px;
}
input:checked + .favorite-select__label {
  border: 3px solid var(--accent-500);
  background-color: transparent;
}
input:checked + .favorite-select__label .favorite-select__icon {
  background-color: var(--accent-500);
}
input:checked + .favorite-select__label svg {
  opacity: 1;
}

.table-of-content {
  flex-grow: 1;
}

.table-of-content__chapters details {
  background-color: var(--primary-400);
}
.table-of-content__chapters .table-of-content__handle {
  display: flex;
}

.table-of-content__chapter:not(:first-child) {
  border-top: 1px solid #557379;
}

.table-of-content__pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  position: relative;
  isolation: isolate;
}
@media screen and (min-width: 768px) {
  .table-of-content__pages {
    grid-template-columns: repeat(3, 1fr);
  }
}
.table-of-content__pages:not(:has(*)) {
  min-height: 2rem;
}
.table-of-content__pages:not(:has(*))::before {
  content: attr(data-empty-text);
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-300);
  z-index: -1;
}
.table-of-content__pages .table-of-content__entry {
  display: flex;
  padding: 0.5rem;
  gap: 0.5rem;
  align-items: center;
  background-color: var(--primary-300);
}
.table-of-content__pages .table-of-content__entry.table-of-content__entry--editable {
  display: grid;
  grid-template-columns: 1rem 1rem 1fr auto;
}
.table-of-content__pages .table-of-content__entry.table-of-content__entry--editable .table-of-content__index {
  margin: auto;
}
.table-of-content__pages .table-of-content__entry .table-of-content__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.table-of-content__pages .table-of-content__entry .table-of-content__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.table-of-content__pages .table-of-content__entry .table-of-content__action svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.table-of-content__pages .table-of-content__entry .table-of-content__action:hover, .table-of-content__pages .table-of-content__entry .table-of-content__action:focus-visible {
  background-color: var(--primary-200);
  color: var(--accent-500);
}
.table-of-content__pages .table-of-content__entry .table-of-content__action.table-of-content__action--danger:hover, .table-of-content__pages .table-of-content__entry .table-of-content__action.table-of-content__action--danger:focus-visible {
  background-color: color-mix(in srgb, var(--danger-500), transparent 80%);
  color: var(--danger-500);
}
.table-of-content__pages .table-of-content__entry .table-of-content__action--draft {
  opacity: 0.5;
}
.table-of-content__pages .table-of-content__entry .table-of-content__action--draft:hover, .table-of-content__pages .table-of-content__entry .table-of-content__action--draft:focus-visible {
  opacity: 1;
}
.table-of-content__pages .table-of-content__entry:nth-child(odd) {
  background-color: var(--primary-400);
}
.table-of-content__pages .table-of-content__entry .table-of-content__handle {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: grab;
  margin: auto;
}
.table-of-content__pages .table-of-content__entry:last-child::before, .table-of-content__pages .table-of-content__entry:last-child::after {
  content: "";
  display: flex;
  width: 100%;
  position: absolute;
  inset: 0;
  z-index: -1;
}
.table-of-content__pages .table-of-content__entry:last-child::after {
  grid-column: 3/3;
  background-color: inherit;
}
.table-of-content__pages .table-of-content__entry:last-child::before {
  grid-column: 2/3;
}
.table-of-content__pages .table-of-content__entry:last-child:nth-child(even)::before {
  background-color: var(--primary-400);
}
.table-of-content__pages .table-of-content__entry:last-child:nth-child(odd)::before {
  background-color: var(--primary-300);
}
.table-of-content__pages .table-of-content__entry:last-child:nth-child(3n+2):nth-child(even)::after {
  background-color: var(--primary-400);
}
.table-of-content__pages .table-of-content__entry:last-child:nth-child(3n+2):nth-child(odd)::after {
  background-color: var(--primary-300);
}

.favorite-entries {
  list-style: none;
  margin: 0;
  border-radius: 0.5rem;
  padding: 0.75rem 0;
  box-sizing: border-box;
  display: grid;
  gap: 1rem 0.5rem;
  --column-width: 6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column-width)), 1fr));
}
@container favorites-list (width >= 50rem) {
  .favorite-entries {
    --column-width: 9.5rem;
  }
}

.favorite-entry {
  position: relative;
  display: grid;
  align-content: start;
  height: 100%;
  box-sizing: border-box;
  gap: 0.25rem;
  overflow: hidden;
  border: 1px solid var(--primary-600);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
}
.favorite-entry > header,
.favorite-entry > footer {
  padding-inline: 0.5rem;
}
.favorite-entry > header {
  padding-bottom: 0.5rem;
}
.favorite-entry--cover-link {
  -webkit-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorite-entry--cover-link header a::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
}
.favorite-entry--cover-link:hover {
  color: var(--accent-500);
}
.favorite-entry header * {
  color: currentColor;
  transition: none;
}
.favorite-entry header span {
  display: block;
}
.favorite-entry footer {
  width: 100%;
  box-sizing: border-box;
}
.favorite-entry footer time {
  white-space: nowrap;
}

.favorite-entry__thumbnail {
  position: relative;
  width: 100%;
}
.favorite-entry__thumbnail img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.favorite-entry__thumbnail .card__badge {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 2;
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--dark-500), transparent 10%);
}
.favorite-entry__thumbnail .card__badge svg {
  width: 1rem;
  height: 1rem;
}
.favorite-entry__thumbnail .card__badge.card__badge--bottom {
  top: auto;
  bottom: 0.375rem;
  padding: 0.25rem 0.5rem;
}
.favorite-entry__thumbnail .card__badge.card__badge--bottom a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  color: var(--light-500);
  text-decoration: none;
}

.favorites-row-meta,
.favorites-row-title-icon {
  display: none;
}

.favorite-entry:has(> .favorites-row-actions) {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.5rem;
}
.favorite-entry:has(> .favorites-row-actions) > * {
  grid-column: 1/-1;
}
.favorite-entry:has(> .favorites-row-actions) > .favorite-entry__thumbnail {
  grid-row: 1;
}
.favorite-entry:has(> .favorites-row-actions) > .favorites-row-actions {
  grid-column: 2;
  grid-row: 2;
}
.favorite-entry:has(> .favorites-row-actions) > footer {
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  padding-inline: 0.5rem 0;
}
.favorite-entry:has(> .favorites-row-actions) > header {
  grid-row: 3;
}

.favorites-row-actions {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  padding-right: 0.25rem;
}
.favorites-row-actions .favorites-row-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.375rem;
  border: none;
  border-radius: 0.25rem;
  background-color: transparent;
  color: var(--light-500);
  cursor: pointer;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorites-row-actions .favorites-row-more:hover, .favorites-row-actions .favorites-row-more:focus-visible, .favorites-row-actions .favorites-row-more[aria-expanded=true] {
  background-color: var(--accent-500);
  color: var(--primary-500);
}
.favorites-row-actions .favorites-row-more svg {
  width: 1rem;
  height: 1rem;
}
.favorites-row-actions .dropdown__menu button {
  text-transform: capitalize;
}

.favorite-entry:has(.dropdown__menu:not([hidden])) {
  overflow: visible;
  z-index: 10;
}

.favorite-entries[data-display-mode=list] {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) {
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas: "thumb title" "thumb meta" "thumb actions";
  align-items: center;
  align-content: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  overflow: visible;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorite-entry__thumbnail {
  grid-area: thumb;
  grid-row: 1/span 3;
  overflow: hidden;
  border-radius: 0.25rem;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorite-entry__thumbnail .card__badge {
  display: none;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) > footer {
  display: none;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) > header {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) > header .favorites-row-title-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin: 0;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) > header .favorites-row-title-icon svg {
  width: 1rem;
  height: 1rem;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.25rem;
  min-width: 0;
  font-size: 0.79rem;
  color: var(--light-700);
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0 0.75rem;
  box-sizing: border-box;
  border-left: 1px solid color-mix(in srgb, var(--secondary-500), transparent 40%);
  line-height: 1.2;
  white-space: nowrap;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-meta > *:first-child {
  padding-left: 0;
  border-left: none;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-meta svg {
  width: 0.875rem;
  height: 0.875rem;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-release {
  display: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-pages {
  padding-left: 0;
  border-left: none;
}
@container favorites-list (width >= 40rem) {
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "thumb title actions" "thumb meta actions";
    row-gap: 0.125rem;
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorite-entry__thumbnail {
    grid-row: 1/span 2;
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) > header {
    align-self: end;
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) > header .favorites-row-title-icon {
    display: none;
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-meta {
    align-self: start;
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-release {
    display: inline-flex;
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-pages {
    padding-left: 0.75rem;
    border-left: 1px solid color-mix(in srgb, var(--secondary-500), transparent 40%);
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-actions {
    justify-self: auto;
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-release {
    flex: 0 0 8.25rem;
  }
  .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-pages {
    flex: 0 0 5.75rem;
  }
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-actions {
  grid-area: actions;
  justify-self: end;
  position: relative;
  margin: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-actions:has(.dropdown__menu:not([hidden])) {
  z-index: 10;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-actions .dropdown__menu button {
  text-transform: capitalize;
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--light-500);
  cursor: pointer;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-more:hover, .favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-more:focus-visible {
  background-color: var(--primary-300);
  color: var(--accent-500);
}
.favorite-entries[data-display-mode=list] .favorite-entry:has(> .favorites-row-meta) .favorites-row-more svg {
  width: 1.25rem;
  height: 1.25rem;
}

.favorite-entry__footer {
  display: flex;
}

.favorites-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.project-table--wrapper {
  border-top: 3px solid var(--primary-500);
}

table.project-table {
  color: var(--light-500);
  background-color: var(--primary-500);
}
table.project-table thead {
  background-color: var(--primary-300);
}
table.project-table thead svg {
  width: 1.125rem;
  height: 1.125rem;
}
table.project-table tbody tr {
  height: 4rem;
}
table.project-table tbody tr:nth-child(odd) {
  background-color: transparent;
  border-block: 1px solid color-mix(in srgb, var(--secondary-900), transparent 60%);
}
table.project-table .project-table--genres {
  font-size: 1rem;
  text-align: start;
}
table.project-table .project-title {
  min-width: 20ch;
}
table.project-table .project-table--text-ellipsis {
  max-width: 10rem;
  overflow: hidden;
  text-align: start;
}

.loader {
  --loader-cog-width: min(20vw, 200px);
  --loader-spoke-size: min(3vw, 33px);
  width: 0;
  height: calc((var(--loader-cog-width) + var(--loader-spoke-size) + 1rem) * 2);
  max-width: 100%;
  position: relative;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: clip;
  animation: fade-in 0.2s ease-in-out;
}

.loader__cog {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  width: var(--loader-cog-width);
  height: var(--loader-cog-width);
  z-index: 10;
  animation: loader-spin 5s infinite linear;
  border: 2px solid var(--primary-900);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 15%, black 16%);
  mask-position: center;
  mask-clip: no-clip;
  mask-size: calc(var(--loader-cog-width) + var(--loader-spoke-size) + 5px);
}
.loader__cog::before {
  position: absolute;
  content: "";
  background-color: var(--primary-300);
  border-radius: 999px;
  z-index: 10;
  inset: 0;
  display: block;
}
.loader__cog--top-left {
  top: calc(var(--loader-spoke-size) * 2);
  right: calc(var(--loader-cog-width) / 2);
}
.loader__cog--bottom {
  animation: loader-spin-reverse 5s infinite linear;
  top: calc(var(--loader-spoke-size) * 1.4 + var(--loader-cog-width));
  right: calc(var(--loader-cog-width) * 0.45 * -1 + var(--loader-spoke-size) * 2);
}
.loader__cog--top-right {
  top: calc(var(--loader-spoke-size) * 2);
  right: calc(var(--loader-cog-width) * 0.725 * -1);
}

.loader__spoke {
  background-color: var(--primary-300);
  position: absolute;
  height: calc(var(--loader-spoke-size) + var(--loader-cog-width));
  width: calc(var(--loader-spoke-size) + var(--loader-cog-width) * 0.02);
  border-radius: 5px;
  z-index: 10;
  border-block: 2px solid var(--primary-900);
  transform: rotateZ(var(--loader-spoke-angle, 0deg));
}

.loader__hole {
  position: absolute;
  width: 85%;
  height: auto;
  aspect-ratio: 1;
  background-color: var(--secondary-800);
  border-radius: 999px;
  z-index: 3000;
  display: flex;
}
.loader__hole::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 75%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 999px;
  margin: auto;
  border: 2px solid var(--secondary-700);
}

@keyframes loader-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader-spin-reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.lazy-placeholder {
  color: var(--primary-500);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--secondary-800);
  color: var(--light-500);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  opacity: 0.95;
}
.back-to-top__button:hover {
  background-color: var(--accent-700);
  color: var(--primary-800);
  transform: scale(1.1);
  opacity: 1;
}
.back-to-top__button:active {
  transform: scale(0.95);
}
.back-to-top__button svg {
  width: 1.5rem;
  height: 1.5rem;
}

.gif-picker__section {
  container: gif-picker-section/inline-size;
}
.gif-picker__grid {
  display: grid;
  gap: 1.5rem;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 250px;
  padding: 0.5rem;
}
@container gif-picker-section (max-width: 800px) {
  .gif-picker__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@container gif-picker-section (max-width: 600px) {
  .gif-picker__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container gif-picker-section (max-width: 400px) {
  .gif-picker__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gif-picker__grid:has(.gif-picker__image--selected) img:not(.gif-picker__image--selected) {
  filter: grayscale(80%);
}
.gif-picker__item {
  position: relative;
}
.gif-picker__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.gif-picker__image--selected {
  border: 4px solid var(--warning-500);
  border-radius: 0.25rem;
  animation: scaleUp 0.3s ease-in-out forwards;
}
.gif-picker__footer {
  display: flex;
  gap: 0.5rem;
}
.gif-picker__selected-badge {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  isolation: isolate;
  padding: 0.25rem 0.5rem;
}
.gif-picker__selected-badge::before {
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  background-color: var(--dark-500);
  opacity: 0.5;
  z-index: -1;
}

@keyframes scaleUp {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
.icon-source-panel {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.icon-source-panel--custom {
  padding: 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
}

.icon-picker {
  container: icon-picker/inline-size;
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
}
@container icon-picker (min-width: 26rem) {
  .icon-picker {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
  }
}
.icon-picker__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  background-color: var(--secondary-200);
  color: var(--primary-700);
}
.icon-picker__preview svg {
  width: 2rem;
  height: 2rem;
}
.icon-picker__search {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.icon-picker__search form {
  gap: 0;
}
.icon-picker__browse-all {
  justify-self: start;
}

.icon-browse-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}
.icon-browse-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  color: var(--primary-700);
}
.icon-browse-list__item svg {
  background-color: var(--secondary-200);
  border-radius: 0.25rem;
  padding: 0.5rem;
  width: 3rem;
  height: 3rem;
}
.icon-browse-list__item span {
  font-size: 0.79rem;
  word-break: break-word;
  color: var(--light-700);
}

.icon-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.75rem;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.5rem;
}
.icon-search-results__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  color: var(--primary-700);
}
.icon-search-results__item svg {
  background-color: var(--secondary-200);
  border-radius: 0.25rem;
  padding: 0.4rem;
  width: 2.5rem;
  height: 2.5rem;
}
.icon-search-results__item span {
  font-size: 0.79rem;
  text-align: center;
  word-break: break-word;
  color: var(--light-700);
}
.icon-search-results__item:hover, .icon-search-results__item:focus-visible {
  border-color: var(--accent-500);
}
.icon-search-results__hint {
  grid-column: 1/-1;
  margin: 0;
  padding: 0.5rem;
  color: var(--light-700);
  text-align: center;
}

.dropdown {
  position: relative;
}

.dropdown__menu {
  display: grid;
  gap: 0.25rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  min-width: 12rem;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.5rem;
  box-sizing: border-box;
  list-style: none;
  background-color: color-mix(in srgb, var(--primary-800), transparent 5%);
  -webkit-mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  mask: url("../images/rectangle_input-OIVmums.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  border: none;
}
.dropdown__menu li a,
.dropdown__menu li button {
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  color: var(--light-500);
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.dropdown__menu li a:hover, .dropdown__menu li a:focus-visible,
.dropdown__menu li button:hover,
.dropdown__menu li button:focus-visible {
  background-color: color-mix(in srgb, var(--secondary-800), transparent 60%);
}
.dropdown__menu li a[aria-current=true],
.dropdown__menu li button[aria-current=true] {
  color: var(--accent-500);
}
.dropdown__menu li a svg,
.dropdown__menu li button svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.dropdown__menu li a img,
.dropdown__menu li button img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.flag-icon {
  display: inline-flex;
  border-radius: 0.125rem;
  overflow: hidden;
}
.flag-icon svg {
  width: 1.5rem;
  height: 1.125rem;
}

.favorites-list {
  container: favorites-list/inline-size;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-inline: 1rem;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .favorites-list {
    padding-inline: 0;
  }
}

.favorites-list-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
}

.favorites-status-tabs,
.favorites-sort-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}
.favorites-status-tabs ul,
.favorites-sort-tabs ul {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.favorites-status-tabs li,
.favorites-sort-tabs li {
  display: contents;
}
.favorites-status-tabs input[type=radio],
.favorites-sort-tabs input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.favorites-status-tabs label,
.favorites-status-tabs label.checkbox.radio,
.favorites-sort-tabs label,
.favorites-sort-tabs label.checkbox.radio {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  box-sizing: border-box;
  padding: 0 0.875rem;
  border: 1px solid var(--primary-600);
  border-radius: 999px;
  background-color: var(--primary-500);
  color: var(--light-500);
  cursor: pointer;
  text-transform: capitalize;
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorites-status-tabs label:hover,
.favorites-status-tabs label.checkbox.radio:hover,
.favorites-sort-tabs label:hover,
.favorites-sort-tabs label.checkbox.radio:hover {
  border-color: var(--accent-500);
}
.favorites-status-tabs .checkbox__icon,
.favorites-sort-tabs .checkbox__icon {
  display: none;
}
.favorites-status-tabs input[type=radio]:checked + label,
.favorites-status-tabs label.checkbox:has(input:checked),
.favorites-sort-tabs input[type=radio]:checked + label,
.favorites-sort-tabs label.checkbox:has(input:checked) {
  border-color: var(--accent-500);
  background-color: var(--accent-500);
  color: var(--primary-500);
}
.favorites-status-tabs input[type=radio]:focus-visible + label,
.favorites-status-tabs label.checkbox:has(input:focus-visible),
.favorites-sort-tabs input[type=radio]:focus-visible + label,
.favorites-sort-tabs label.checkbox:has(input:focus-visible) {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.favorites-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.favorites-search-row .form-group {
  flex-grow: 1;
  min-width: 12rem;
}
.favorites-search-row input[type=text] {
  height: 2.5rem;
  box-sizing: border-box;
}
.favorites-search-row .favorites-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  box-sizing: border-box;
}
.favorites-search-row .favorites-advanced-toggle__chevron {
  display: inline-flex;
  order: 1;
  -webkit-transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorites-search-row .favorites-advanced-toggle__chevron svg {
  width: 0.875rem;
  height: 0.875rem;
}
.favorites-search-row .favorites-advanced-toggle[aria-expanded=true] .favorites-advanced-toggle__chevron {
  transform: rotate(180deg);
}

.favorites-advanced-filters {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}
.favorites-advanced-filters:not([inert]) {
  grid-template-rows: minmax(0, 1fr);
  overflow: visible;
  transition: grid-template-rows 0.3s ease, overflow 0s linear 0.3s;
  transition-behavior: allow-discrete;
}

.favorites-advanced-filters-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--primary-600);
  border-radius: 0.5rem;
  background-color: var(--primary-500);
}
.favorites-advanced-filters:not([inert]) .favorites-advanced-filters-inner {
  overflow: visible;
  transition: overflow 0s linear 0.3s;
  transition-behavior: allow-discrete;
}

.favorites-advanced-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
}
.favorites-advanced-filters-row .form-group {
  flex-grow: 1;
  min-width: 10rem;
}

.form-group.favorites-release-date {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  flex-basis: 28rem;
  flex-grow: 0;
  min-width: 0;
}
.form-group.favorites-release-date .form-row {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 13rem;
}
.form-group.favorites-release-date .form-row label {
  white-space: nowrap;
}

.favorites-reset-filters {
  margin-left: auto;
  align-self: flex-end;
}

.favorites-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.favorites-toolbar .display-switch__buttons {
  border: none;
}

.favorites-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.favorites-manager {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  text-align: start;
  background-color: var(--primary-400);
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
  padding: 0 1rem;
  margin-top: -1rem;
  opacity: 0;
  -webkit-transition: max-height 0.3s cubic-bezier(0.42, 0, 0.58, 1), padding 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), visibility 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: max-height 0.3s cubic-bezier(0.42, 0, 0.58, 1), padding 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), visibility 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: max-height 0.3s cubic-bezier(0.42, 0, 0.58, 1), padding 0.3s cubic-bezier(0.42, 0, 0.58, 1), margin 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), visibility 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (prefers-reduced-motion: reduce) {
  .favorites-manager {
    transition: none;
  }
}
.favorites-manager__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  width: 100%;
}
.favorites-manager__hint {
  margin: 0;
}
.favorites-manager__help {
  flex-basis: 100%;
}
.favorites-manager__help p {
  margin: 0;
}
.favorites-manager__help p + p {
  margin-top: 0.375rem;
}
.favorites-manager__groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 2rem;
  width: 100%;
}
.favorites-manager__group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  border: none;
}
.favorites-manager__group > legend {
  margin-bottom: 0.375rem;
}
.favorites-manager__group-title {
  padding: 0;
  margin-bottom: 0;
  font-size: 0.889rem;
  font-weight: bold;
  color: var(--light-600);
}
.favorites-manager__modes {
  display: flex;
  gap: 0.5rem;
}
.favorites-manager__modes input {
  position: absolute;
  opacity: 0;
}
.favorites-manager__mode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--primary-200);
  border-radius: 0.375rem;
  color: var(--light-500);
  cursor: pointer;
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorites-manager__mode svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}
.favorites-manager__mode:hover {
  border-color: var(--accent-500);
}
.favorites-manager__mode-icon {
  display: inline-flex;
}
.favorites-manager__mode-icon--move {
  transform: rotate(-90deg);
}
.favorites-manager__mode-name {
  display: block;
  font-weight: bold;
}
.favorites-manager__mode-effect {
  display: block;
  font-size: 0.889rem;
  color: var(--light-600);
}
.favorites-manager__modes input:checked + .favorites-manager__mode {
  border-color: var(--accent-500);
  color: var(--accent-500);
  background-color: color-mix(in srgb, var(--accent-500), transparent 88%);
}
.favorites-manager__modes input:focus-visible + .favorites-manager__mode {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.favorites-manager__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}
.favorites-manager__status select {
  height: auto;
}
.favorites-manager__status .ts-wrapper {
  min-width: 11rem;
}
.favorites-manager__status .ts-control,
.favorites-manager__status .ts-wrapper.single .ts-control,
.favorites-manager__status .ts-wrapper.single.input-active .ts-control {
  -webkit-mask: unset;
  mask: unset;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.favorites-manager__status .favorite-picker__item {
  display: inline-block;
}
.favorites-manager__status .favorite-picker__item::first-letter {
  text-transform: uppercase;
}
.favorites-manager__status .ts-wrapper.single.dropdown-active .ts-control > .item {
  display: none;
}
.favorites-manager__status button svg {
  height: 1.25rem;
  width: 1.25rem;
}

:root:has(.favorites-manage-toggle:checked) .favorites-manager {
  visibility: visible;
  max-height: 30rem;
  padding-block: 0.75rem;
  margin-top: 0;
  opacity: 1;
  overflow: visible;
  transition: max-height 0.3s, padding 0.3s, margin 0.3s, opacity 0.3s, visibility 0.3s, overflow 0s linear 0.3s;
  transition-behavior: allow-discrete;
}
:root:has(.favorites-manage-toggle:checked) .favorite-select {
  display: block;
}
:root:has(.favorites-manage-toggle:checked) .favorite-entries .favorite-entry .favorites-row-actions {
  display: none;
}
:root:has(.favorites-manage-toggle:checked) .favorite-entry--cover-link:not(.oldest-consultation__card) header a::before {
  content: none;
}

.favorite-category-create {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  box-sizing: border-box;
  border: 1px dashed var(--light-600);
  border-radius: 999px;
  color: var(--light-500);
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorite-category-create:hover, .favorite-category-create:focus-within {
  border-color: var(--accent-500);
}
.favorite-category-create__toggle {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 0.375rem;
  padding: 0 0.875rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.favorite-category-create__toggle:hover {
  color: var(--accent-500);
}
.favorite-category-create__icon {
  display: inline-flex;
  -webkit-transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorite-category-create__icon svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}
.favorite-category-create__cancel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.favorite-category-create__panel {
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
}
.favorite-category-create__panel[inert] {
  display: none;
}
.favorite-category-create__panel input {
  width: 11rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border: none;
  border-bottom: 1px solid var(--light-600);
  background: transparent;
  color: var(--light-500);
  font: inherit;
  -webkit-mask: none;
  mask: none;
}
.favorite-category-create__panel input::placeholder {
  color: var(--light-700);
}
.favorite-category-create__panel input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent-500);
}
.favorite-category-create__panel button {
  display: inline-flex;
  align-items: center;
  padding: 0 0.375rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.favorite-category-create__panel button:hover {
  color: var(--accent-500);
}
.favorite-category-create__panel button svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}
.favorite-category-create:has(> .favorite-category-create__toggle[aria-expanded=true]) .favorite-category-create__toggle {
  padding-right: 0.25rem;
}
.favorite-category-create:has(> .favorite-category-create__toggle[aria-expanded=true]) .favorite-category-create__icon {
  transform: rotate(45deg);
}
.favorite-category-create:has(> .favorite-category-create__toggle[aria-expanded=true]) .favorite-category-create__new {
  display: none;
}

.favorite-categories__choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  color: var(--light-500);
  white-space: nowrap;
  cursor: pointer;
}
.favorite-categories__choice:hover {
  background-color: color-mix(in srgb, var(--secondary-800), transparent 60%);
}
.favorite-categories__choice:has(input:disabled) {
  cursor: not-allowed;
}

.favorite-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.favorites-status-tabs .favorite-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.favorite-category-pill__grip, .favorite-category-pill__move {
  display: none;
}
.favorite-category-pill.is-dragging {
  opacity: 0.5;
}

:root:has(.favorites-manage-toggle:checked) .favorites-search-row,
:root:has(.favorites-manage-toggle:checked) .favorites-advanced-filters,
:root:has(.favorites-manage-toggle:checked) .favorites-sort-tabs {
  opacity: 0.5;
  pointer-events: none;
}
:root:has(.favorites-manage-toggle:checked) .favorite-category-pill label {
  cursor: grab;
}

:root:has(.favorites-manage-toggle:checked) .favorite-category-pill {
  position: relative;
}
:root:has(.favorites-manage-toggle:checked) .favorite-category-pill label.checkbox.radio {
  padding-left: 2rem;
}
:root:has(.favorites-manage-toggle:checked) .favorite-category-pill__grip {
  display: inline-flex;
  position: absolute;
  left: 0.625rem;
  top: 1.25rem;
  z-index: 1;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--light-600);
}
:root:has(.favorites-manage-toggle:checked) .favorite-category-pill__grip svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
:root:has(.favorites-manage-toggle:checked) .favorite-category-pill__move {
  display: inline-flex;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  padding: 0 0.375rem;
  border: none;
  background: var(--primary-500);
  color: var(--light-500);
  font: inherit;
  cursor: pointer;
}
:root:has(.favorites-manage-toggle:checked) .favorite-category-pill:focus-within .favorite-category-pill__move {
  position: static;
  width: auto;
  height: 2rem;
  align-items: center;
  clip-path: none;
}

.favorite-picker__dropdown .option::first-letter {
  text-transform: uppercase;
}

.favorite-shelf {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 0.5rem;
  border: 2px dashed transparent;
  border-radius: 0.5rem;
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.favorite-shelf.is-drop-target {
  border-color: var(--accent-500);
  background-color: color-mix(in srgb, var(--accent-500), transparent 90%);
}
.favorite-shelf--empty {
  display: none;
}
.favorite-shelf__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--primary-300);
}
.favorite-shelf__title {
  margin: 0;
  font-size: 1rem;
}
.favorite-shelf__title::first-letter {
  text-transform: uppercase;
}
.favorite-shelf__count {
  color: var(--light-700);
  font-weight: normal;
}
.favorite-shelf__rename, .favorite-shelf__delete {
  display: none;
}
.favorite-shelf__rename {
  flex: 1 1 12rem;
}
.favorite-shelf__rename input {
  width: 100%;
  max-width: 24rem;
  padding: 0.25rem 0;
  border: none;
  border-bottom: 1px solid var(--light-600);
  background: transparent;
  color: var(--light-500);
  font: inherit;
  font-weight: bold;
  -webkit-mask: none;
  mask: none;
}
.favorite-shelf__rename input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent-500);
}
.favorite-shelf__delete {
  margin-left: auto;
}
.favorite-shelf__empty {
  margin: 0;
  padding: 1rem 0;
  color: var(--light-700);
}
.favorite-shelf .favorite-entries {
  padding-block: 0.25rem;
}
.favorite-shelf--empty .favorite-entries {
  min-height: 3rem;
}
.favorite-shelf .is-dragging {
  opacity: 0.5;
}

.favorite-shelf--highlight:not(:has(li)) {
  display: none;
}
.favorite-shelf--highlight .favorite-shelf__title .ts-wrapper {
  min-width: 12rem;
}
.favorite-shelf--highlight .favorite-shelf__title .ts-control,
.favorite-shelf--highlight .favorite-shelf__title .ts-wrapper.single .ts-control,
.favorite-shelf--highlight .favorite-shelf__title .ts-wrapper.single.input-active .ts-control {
  -webkit-mask: none;
  mask: none;
  padding: 0.25rem 2rem 0.25rem 0;
  border: none;
  box-shadow: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.favorite-shelf--highlight .favorite-shelf__title .ts-control input,
.favorite-shelf--highlight .favorite-shelf__title .ts-wrapper.single .ts-control input,
.favorite-shelf--highlight .favorite-shelf__title .ts-wrapper.single.input-active .ts-control input {
  color: inherit;
}

:root:has(.favorites-manage-toggle:checked) .favorite-shelf--highlight {
  display: none;
}

:root:has(.favorites-manage-toggle:checked) .favorite-shelf--empty {
  display: flex;
}
:root:has(.favorites-manage-toggle:checked) .favorite-shelf__header:has(.favorite-shelf__rename) .favorite-shelf__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:root:has(.favorites-manage-toggle:checked) .favorite-shelf__rename {
  display: flex;
}
:root:has(.favorites-manage-toggle:checked) .favorite-shelf__delete {
  display: block;
}
:root:has(.favorites-manage-toggle:checked) .favorite-shelf .favorite-select {
  cursor: grab;
}

.display-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.display-switch__label {
  display: none;
  font-weight: 600;
  text-transform: capitalize;
}
@media screen and (min-width: 768px) {
  .display-switch__label {
    display: inline;
  }
}

.display-switch__buttons {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.125rem;
  box-sizing: border-box;
  border: 1px solid var(--primary-600);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
}

.display-switch__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--light-700);
  cursor: pointer;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.display-switch__button:hover {
  color: var(--light-500);
}
.display-switch__button[aria-pressed=true] {
  background-color: var(--primary-300);
  color: var(--accent-500);
}
.display-switch__button svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.frame-search {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  padding-inline: 1rem;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .frame-search {
    padding-inline: 0;
  }
}

.frame-search__form form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
}
.frame-search__form form > .form-group,
.frame-search__form form > .form-row {
  flex: 1 1 18rem;
  min-width: 0;
  flex-wrap: nowrap;
}
.frame-search__form form > .frame-search__wide {
  flex-basis: 100%;
}
.frame-search__form form > .frame-search__wide textarea {
  min-height: 4.5rem;
  resize: vertical;
}
.frame-search__form form > .frame-search__reset {
  flex: 0 0 auto;
  margin-left: auto;
}
.frame-search__form form > .frame-search__date {
  flex-basis: 26rem;
  flex-grow: 2;
  flex-wrap: nowrap;
}
.frame-search__form form > .frame-search__date .form-row {
  flex-basis: 0;
  min-width: 11rem;
}

.frame-search__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 0.25rem;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--primary-700), transparent 50%);
}
.reading-progress[hidden] {
  display: none;
}

.reading-progress-fill {
  height: 100%;
  background-color: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left;
}

.publication-control {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.publication-control legend {
  padding: 0 0 0.25rem;
}

.publication-container {
  container: publication/inline-size;
}

.publication-layout {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}
@container publication (min-width: 40rem) {
  .publication-layout {
    grid-template-columns: minmax(0, 22rem) minmax(0, 20rem);
  }
}

.publication-options {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.publication-option {
  position: relative;
  display: grid;
  gap: 0.125rem;
  align-content: start;
  padding: 0.625rem 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  cursor: pointer;
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.publication-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.publication-option:hover {
  border-color: var(--accent-500);
}
.publication-option:has(input:checked) {
  border-color: var(--accent-500);
  background-color: color-mix(in srgb, var(--accent-500), transparent 85%);
}
.publication-option:has(input:focus-visible) {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.publication-option-title {
  font-weight: 600;
}

.publication-option-hint {
  font-size: 0.79rem;
  color: var(--light-700);
}

.publication-schedule {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.publication-schedule .help-text {
  font-size: 0.79rem;
}
.publication-schedule:has(input:disabled) {
  opacity: 0.5;
}
.publication-schedule:has(input:disabled) input {
  cursor: not-allowed;
}

.publication-control:has(.publication-option input[value=scheduled]:checked) .publication-schedule {
  border-color: var(--accent-500);
  background-color: color-mix(in srgb, var(--accent-500), transparent 85%);
}

.choice-cards {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.choice-cards > li {
  display: contents;
}
.choice-cards .checkbox-wrapper {
  display: block;
}
.choice-cards label.checkbox.radio {
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  cursor: pointer;
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.choice-cards label.checkbox.radio > div {
  flex-direction: column;
  gap: 0.375rem;
}
.choice-cards label.checkbox.radio .checkbox__label {
  font-weight: 600;
}
.choice-cards label.checkbox.radio:hover {
  border-color: var(--accent-500);
}
.choice-cards label.checkbox.radio:has(input:checked) {
  border-color: var(--accent-500);
  background-color: color-mix(in srgb, var(--accent-500), transparent 85%);
}
.choice-cards label.checkbox.radio:has(input:focus-visible) {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.choice-cards--inline {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.layout-picker__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  align-content: start;
  gap: 0.75rem;
  max-height: 26rem;
  overflow-y: auto;
  padding: 0.75rem;
  box-sizing: border-box;
  background-color: var(--primary-400);
}
@media screen and (min-width: 992px) {
  .layout-picker__cards {
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.layout-card {
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-500);
  position: relative;
  cursor: pointer;
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.layout-card .checkbox-wrapper,
.layout-card .checkbox {
  position: static;
}
.layout-card .checkbox.radio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.layout-card picture,
.layout-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}
.layout-card .small {
  margin: 0;
  color: var(--light-700);
}
.layout-card:hover {
  border-color: var(--accent-500);
}
.layout-card:has(input:checked) {
  border-color: var(--accent-500);
  background-color: color-mix(in srgb, var(--accent-500), transparent 85%);
}
.layout-card:has(input:focus-visible) {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.layout-card--none {
  align-content: center;
}

.project-banner {
  margin-bottom: 1rem;
  padding-block: 1rem;
  background-color: var(--primary-400);
  color: var(--light-500);
  mask-position: 110% 100%;
  mask-size: 110% 100%;
}
.project-banner--with-image {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-content: center;
  margin-inline: 1rem;
  min-height: 8rem;
  mask-position: 100% 100%;
  mask-size: 100% 100%;
}
.project-banner--with-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-700), transparent 55%), color-mix(in srgb, var(--primary-700), transparent 75%));
}
.project-banner__image {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.project-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-banner--preview {
  grid-column: 1/-1;
  align-self: start;
  margin: 0;
}

.diegesis-home {
  container: diegesis-home/inline-size;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  color: var(--light-500);
}
.diegesis-home__layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@container diegesis-home (min-width: 60rem) {
  .diegesis-home__layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
  }
}
.diegesis-home__main, .diegesis-home__aside {
  display: grid;
  gap: 1rem;
  min-width: 0;
  align-content: start;
}

.diegesis-panel {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  color: var(--light-500);
}
.diegesis-panel .card {
  background-color: var(--primary-300);
}
.diegesis-panel .flow,
.diegesis-panel .flow * {
  color: inherit;
}
.diegesis-panel__title {
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 1.602rem;
}

.diegesis-categories {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.diegesis-category {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  height: 100%;
  padding: 1rem 0.5rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--light-500) 8%, transparent);
  color: inherit;
  text-align: center;
  text-decoration: none;
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.diegesis-category svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
}
.diegesis-category:hover, .diegesis-category:focus-visible, .diegesis-category[aria-current=page] {
  border-color: var(--accent-500);
  background-color: color-mix(in srgb, var(--accent-500) 15%, transparent);
}
.diegesis-category__name {
  font-weight: 600;
}
.diegesis-category__count {
  font-size: 0.79rem;
  color: var(--light-700);
}

.diegesis-latest {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.diegesis-latest__link {
  display: flex;
  color: var(--light-500);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.diegesis-latest__link:hover, .diegesis-latest__link:focus-visible {
  background-color: var(--primary-300);
}
.diegesis-latest__title {
  font-weight: 600;
}
.diegesis-latest__meta {
  font-size: 0.79rem;
  color: var(--light-700);
}

.diegesis-infobox img {
  width: 100%;
  height: auto;
}
.diegesis-infobox__list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.375rem 1rem;
  margin: 0;
}
.diegesis-infobox__list dt {
  color: var(--light-700);
}
.diegesis-infobox__list dt::first-letter {
  text-transform: capitalize;
}
.diegesis-infobox__list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.diegesis-category__icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.diegesis-featured__body {
  display: grid;
  gap: 1rem;
}
@container diegesis-home (min-width: 34rem) {
  .diegesis-featured__body {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}
.diegesis-featured__body img {
  width: 100%;
  max-width: 12rem;
  height: auto;
}

.diegesis-featured__text {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  justify-items: start;
}

.diegesis-featured__title {
  margin: 0;
}

.diegesis-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

body.reading-page .diegesis-home a:not([class]) {
  color: inherit;
  text-decoration: underline;
}

.content-listing {
  container: content-listing/inline-size;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.content-listing__item {
  min-width: 0;
}
.content-listing__link {
  display: grid;
  gap: 0.5rem;
  height: 100%;
  padding: 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--light-500) 8%, transparent);
  color: inherit;
  text-decoration: none;
  -webkit-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.content-listing__link:hover, .content-listing__link:focus-visible {
  border-color: var(--accent-500);
}
.content-listing__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}
.content-listing__title {
  font-weight: bold;
  font-size: 1.125rem;
}
.content-listing__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.content-listing__meta {
  font-size: 0.889rem;
  opacity: 0.8;
}
.content-listing__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16/9;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--light-500) 12%, transparent);
}
.content-listing__placeholder svg {
  width: 3rem;
  height: 3rem;
}
.content-listing--grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.content-listing--list .content-listing__link {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.content-listing--list .content-listing__excerpt {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
@container content-listing (min-width: 36rem) {
  .content-listing--list .content-listing__link {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "title meta" "excerpt meta";
  }
  .content-listing--list .content-listing__link--illustrated {
    grid-template-columns: 6.5rem minmax(0, 1fr) max-content;
    grid-template-areas: "image title meta" "image excerpt meta";
  }
  .content-listing--list .content-listing__image {
    grid-area: image;
  }
  .content-listing--list .content-listing__title {
    grid-area: title;
  }
  .content-listing--list .content-listing__excerpt {
    grid-area: excerpt;
  }
  .content-listing--list .content-listing__meta {
    grid-area: meta;
  }
}
.content-listing--gallery {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}
.content-listing--gallery .content-listing__link {
  padding: 0.5rem;
  text-align: center;
}

.menu-editor {
  container: menu-editor/inline-size;
  display: grid;
  gap: 1rem;
}
.menu-editor__edit {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--primary-400);
}
.menu-editor__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-editor__list--group {
  min-height: 2.5rem;
  border-radius: 0.5rem;
}
.menu-editor__list--group:not(:has(> li)) {
  border: 1px dashed var(--border-subtle);
}
.menu-editor__item--group {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--light-500) 10%, transparent);
}
.menu-editor__item--group .menu-editor__list--group {
  margin-left: 2rem;
}
.menu-editor__row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--primary-700) 40%, transparent);
}
.menu-editor__row.has-error {
  border-color: var(--danger-500);
}
.menu-editor__handle {
  display: inline-flex;
  align-self: center;
  padding: 0.25rem;
  border: none;
  background: none;
  color: inherit;
  cursor: grab;
}
.menu-editor__handle svg {
  width: 1.25rem;
  height: 1.25rem;
}
.menu-editor__fields {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  gap: 0.5rem 1rem;
  min-width: 0;
}
.menu-editor__field {
  display: grid;
  flex: 1 1 12rem;
  gap: 0.5rem;
  min-width: 0;
}
.menu-editor__field select,
.menu-editor__field input {
  width: 100%;
  box-sizing: border-box;
}
.menu-editor__error {
  flex-basis: 100%;
  margin: 0;
  color: var(--danger-500);
}
.menu-editor__actions {
  display: flex;
}
.menu-editor__add-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - 2rem);
  margin: 0.5rem 0 0 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border-subtle);
  border-radius: 0.5rem;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-editor__add-link:hover, .menu-editor__add-link:focus-visible {
  border-color: var(--accent-500);
  color: var(--accent-500);
}
.menu-editor__add-link svg {
  width: 1.25rem;
  height: 1.25rem;
}
.menu-editor__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1rem;
}
@media screen and (min-width: 768px) {
  .menu-editor__footer {
    padding-inline: 0;
  }
}
.menu-editor__adder {
  display: grid;
  gap: 0.5rem;
}
.menu-editor__kind-select {
  min-width: 9rem;
}
.menu-editor__preview {
  display: none;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 24rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  overflow: hidden;
}
@container menu-editor (width < 40rem) {
  .menu-editor__preview {
    grid-template-columns: minmax(0, 1fr);
  }
}
.menu-editor__preview-breadcrumb {
  grid-column: 1/-1;
  padding: 1rem;
}
.menu-editor__preview-crumb {
  width: 5rem;
}
.menu-editor__preview-nav {
  display: grid;
  align-content: start;
  padding-top: 4rem;
  background-color: var(--primary-400);
}
.menu-editor__preview-page {
  display: grid;
  align-content: start;
  gap: 1rem;
}

:root:has(.menu-preview-toggle:checked) .menu-editor__help,
:root:has(.menu-preview-toggle:checked) .menu-editor__edit,
:root:has(.menu-preview-toggle:checked) .menu-editor__adder {
  display: none;
}
:root:has(.menu-preview-toggle:checked) .menu-editor__preview {
  display: grid;
}

.discord-widget {
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  border-top: 3px solid var(--discord-500);
}
.discord-widget__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.discord-widget__logo {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background-color: var(--discord-500);
  color: var(--light-500);
}
.discord-widget__logo svg {
  width: 1.5rem;
  height: 1.5rem;
}
.discord-widget__eyebrow {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--discord-300);
}
.discord-widget__name {
  margin: 0;
  font-size: 1.266rem;
  overflow-wrap: anywhere;
}
.discord-widget__online {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.discord-widget__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--success-500);
}
.discord-widget__members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.discord-widget__member {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--primary-300);
  font-size: 0.79rem;
  font-weight: 600;
}
.discord-widget__member--more {
  width: auto;
  padding-inline: 0.625rem;
  border-radius: 1rem;
}
.discord-widget__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contest-placeholder {
  margin-block: 1rem;
}

.social-links {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}
.social-links__list {
  display: grid;
  gap: 0.5rem;
}

html.no-diegesis-theme body.diegesis-themed {
  --primary-100: inherit !important;
  --primary-200: inherit !important;
  --primary-300: inherit !important;
  --primary-400: inherit !important;
  --primary-500: inherit !important;
  --primary-600: inherit !important;
  --primary-700: inherit !important;
  --primary-800: inherit !important;
  --primary-900: inherit !important;
  --secondary-100: inherit !important;
  --secondary-200: inherit !important;
  --secondary-300: inherit !important;
  --secondary-400: inherit !important;
  --secondary-500: inherit !important;
  --secondary-600: inherit !important;
  --secondary-700: inherit !important;
  --secondary-800: inherit !important;
  --secondary-900: inherit !important;
  --accent-100: inherit !important;
  --accent-200: inherit !important;
  --accent-300: inherit !important;
  --accent-400: inherit !important;
  --accent-500: inherit !important;
  --accent-600: inherit !important;
  --accent-700: inherit !important;
  --accent-800: inherit !important;
  --accent-900: inherit !important;
  --warning-100: inherit !important;
  --warning-200: inherit !important;
  --warning-300: inherit !important;
  --warning-400: inherit !important;
  --warning-500: inherit !important;
  --warning-600: inherit !important;
  --warning-700: inherit !important;
  --warning-800: inherit !important;
  --warning-900: inherit !important;
  --danger-100: inherit !important;
  --danger-200: inherit !important;
  --danger-300: inherit !important;
  --danger-400: inherit !important;
  --danger-500: inherit !important;
  --danger-600: inherit !important;
  --danger-700: inherit !important;
  --danger-800: inherit !important;
  --danger-900: inherit !important;
  --success-100: inherit !important;
  --success-200: inherit !important;
  --success-300: inherit !important;
  --success-400: inherit !important;
  --success-500: inherit !important;
  --success-600: inherit !important;
  --success-700: inherit !important;
  --success-800: inherit !important;
  --success-900: inherit !important;
  --discord-100: inherit !important;
  --discord-200: inherit !important;
  --discord-300: inherit !important;
  --discord-400: inherit !important;
  --discord-500: inherit !important;
  --discord-600: inherit !important;
  --discord-700: inherit !important;
  --discord-800: inherit !important;
  --discord-900: inherit !important;
  --light-100: inherit !important;
  --light-200: inherit !important;
  --light-300: inherit !important;
  --light-400: inherit !important;
  --light-500: inherit !important;
  --light-600: inherit !important;
  --light-700: inherit !important;
  --light-800: inherit !important;
  --light-900: inherit !important;
  --dark-100: inherit !important;
  --dark-200: inherit !important;
  --dark-300: inherit !important;
  --dark-400: inherit !important;
  --dark-500: inherit !important;
  --dark-600: inherit !important;
  --dark-700: inherit !important;
  --dark-800: inherit !important;
  --dark-900: inherit !important;
}

html:not(.no-diegesis-theme) body.diegesis-themed {
  --diegesis-line: color-mix(in srgb, var(--light-500) 10%, transparent);
}
html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--image {
  background-image: var(--diegesis-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--none::before, html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--image::before, html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--dots::before, html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--stripes::before, html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--crosshatch::before {
  display: none;
}
html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--dots {
  background-image: radial-gradient(var(--diegesis-line) 2px, transparent 2px);
  background-size: 1.5rem 1.5rem;
}
html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--stripes {
  background-image: repeating-linear-gradient(45deg, var(--diegesis-line) 0 2px, transparent 2px 1.25rem);
}
html:not(.no-diegesis-theme) body.diegesis-themed.diegesis-bg--crosshatch {
  background-image: repeating-linear-gradient(45deg, var(--diegesis-line) 0 1px, transparent 1px 1rem), repeating-linear-gradient(-45deg, var(--diegesis-line) 0 1px, transparent 1px 1rem);
}

.theme-palette {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.theme-variable {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-areas: "label label" "picker text" "errors errors";
  gap: 0.25rem 0.5rem;
  align-items: center;
}
.theme-variable label {
  grid-area: label;
  margin: 0;
  font-weight: 600;
}
.theme-variable input[type=color] {
  grid-area: picker;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border-subtle);
  background: none;
  cursor: pointer;
}
.theme-variable input[type=text] {
  grid-area: text;
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-family: monospace;
}

.page-blocks-help {
  margin: 0 0 0.5rem;
  font-size: 0.889rem;
}

.page-content-block {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--primary-400);
  box-sizing: border-box;
  container: page-block/inline-size;
}
.page-content-block [data-block-section=image]:not([hidden]) {
  display: grid;
  gap: 1rem;
}
.page-content-block__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.page-content-block__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: none;
  color: inherit;
  cursor: grab;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.page-content-block__handle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}
.page-content-block__handle:hover, .page-content-block__handle:focus-visible {
  background-color: var(--primary-200);
  color: var(--accent-500);
}
.page-content-block__type {
  font-weight: 600;
}
.page-content-block__unsaved {
  font-size: 0.79rem;
  padding: 0.125rem 0.5rem;
  border: 1px dashed var(--border-subtle);
  border-radius: 999px;
  color: var(--light-700);
}
.page-content-block__delete {
  margin-left: auto;
}

.breadcrumb {
  align-self: stretch;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.889rem;
  color: var(--primary-700);
  margin-left: 0.5rem;
  text-transform: capitalize;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
}
.breadcrumb__link {
  color: inherit;
  text-decoration: none;
}
.breadcrumb__link:hover, .breadcrumb__link:focus-visible {
  color: var(--accent-500);
  text-decoration: underline;
}
.breadcrumb [aria-current=page] {
  color: var(--primary-500);
  font-weight: 600;
}
.breadcrumb__separator svg {
  width: 0.6rem;
  height: 0.6rem;
  stroke: currentColor;
  fill: none;
}

.reading-page .breadcrumb .breadcrumb__list {
  color: var(--light-700);
}
.reading-page .breadcrumb [aria-current=page] {
  color: var(--light-500);
}

.schedule-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.schedule-view--table[data-display-mode=schedule-calendar-mode] {
  display: none;
}

.schedule-view--calendar {
  display: none;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: var(--primary-400);
}
.schedule-view--calendar[data-display-mode=schedule-calendar-mode] {
  display: block;
}

.schedule-calendar-container {
  container: schedule-calendar/inline-size;
  overflow-x: auto;
}

.schedule-calendar {
  width: 100%;
  min-width: 32rem;
  border-collapse: separate;
  border-spacing: 0;
}

.schedule-calendar-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 0.75rem;
  color: var(--light-500);
  font-weight: 600;
  text-transform: capitalize;
}

.schedule-calendar-navigation-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.schedule-calendar-navigation-form select,
.schedule-calendar-navigation-form .ts-wrapper {
  width: 9rem;
}
.schedule-calendar-navigation-form input[type=number] {
  width: 5.5rem;
}
.schedule-calendar-navigation-form select,
.schedule-calendar-navigation-form input[type=number] {
  box-sizing: border-box;
  height: 2rem;
  padding: 0 0.5rem;
  text-transform: none;
  font-weight: normal;
}

.schedule-calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  color: var(--light-700);
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.schedule-calendar-nav svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.schedule-calendar-nav:hover, .schedule-calendar-nav:focus-visible {
  background-color: var(--primary-300);
  color: var(--accent-500);
}

.schedule-calendar thead th {
  padding: 0.5rem;
  color: var(--light-700);
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

.schedule-calendar-day {
  width: 14.28%;
  height: 6rem;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--light-500), transparent 60%);
  background-color: var(--primary-500);
  color: var(--light-500);
}
@container schedule-calendar (max-width: 40rem) {
  .schedule-calendar-day {
    height: 4rem;
    padding: 0.25rem;
  }
}

.schedule-calendar-day--outside {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--light-500), transparent 85%);
}

.schedule-calendar-day--has-content {
  border-color: var(--accent-500);
  background-color: color-mix(in srgb, var(--accent-500), var(--primary-500) 75%);
}

.schedule-calendar-day-number {
  display: block;
  font-weight: 600;
  font-size: 0.79rem;
}

.schedule-calendar-day-items {
  display: grid;
  gap: 0.125rem;
  margin-top: 0.25rem;
  list-style: none;
}

.schedule-calendar-day-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.125rem 0.25rem;
  background-color: var(--accent-500);
  color: var(--primary-900);
  font-size: 0.79rem;
}
@media screen and (min-width: 992px) {
  .schedule-calendar-day-item {
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.schedule-calendar-day-item-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.schedule-calendar-day-item-type {
  font-size: 0.85em;
}

.schedule-calendar-day-item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 0.25rem;
  color: var(--primary-900);
  width: 1.75rem;
  height: 1.75rem;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.schedule-calendar-day-item-remove:hover, .schedule-calendar-day-item-remove:focus-visible {
  background-color: color-mix(in srgb, var(--primary-900), transparent 85%);
  color: var(--danger-500);
}
.schedule-calendar-day-item-remove svg {
  width: 1.5rem;
  height: 1.5rem;
}

.schedule-management__list {
  margin-top: 1rem;
}

.comment-stats {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}
.comment-stats > * {
  min-width: 0;
}

.comment-stats__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}
.comment-stats__list dt {
  color: var(--light-700);
}
.comment-stats__list dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.comment-stats__latest {
  display: grid;
  gap: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--light-500), transparent 85%);
}
.comment-stats__latest > * {
  min-width: 0;
}

.comment-stats__latest-label {
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--light-700);
}

.comment-stats__latest-author {
  display: block;
  font-weight: 600;
}

.comment-stats__latest-excerpt {
  display: block;
  overflow: hidden;
  color: var(--light-700);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-posting-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1rem;
}

.job-posting-card__title {
  margin: 0;
  font-size: 1.266rem;
}

.job-posting-card__description {
  max-height: 10rem;
  overflow-y: auto;
  padding-right: 0.5rem;
  color: var(--light-600);
}

.job-posting-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.join-request-job-posting {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--light-500), transparent 85%);
}

.join-request-job-posting__label {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--light-700);
}

.join-request-job-posting__description {
  max-height: 10rem;
  overflow-y: auto;
  padding: 1rem;
  padding-right: 0.5rem;
  background-color: var(--primary-400);
  color: var(--light-600);
}

.join-request-job-posting .flow {
  color: var(--light-600);
}

.community-rules {
  padding: 1rem;
}
.community-rules__body {
  color: var(--light-600);
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}
.member-list__author-name {
  flex-grow: 1;
}
.member-list__avatar {
  border-radius: 999px;
}

.team-request-row__actions {
  display: flex;
  gap: 0.25rem;
}

.role-tree {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.role-tree--nested {
  margin-left: 1rem;
}

.draft-form__options {
  display: grid;
  gap: 0.5rem;
}

.reading-page .tabs-page .tabs-page__panels > .category-tree-page {
  max-width: none;
  width: 100%;
}

.category-tree-page {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.category-tree-page textarea {
  flex-grow: 1;
}

.category-tree-page__add {
  align-self: flex-start;
}

.category-tree,
.category-tree-children {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-tree-children {
  padding-left: 1.5rem;
  border-left: 3px solid var(--light-600);
  display: grid;
}

.category-tree-node {
  max-width: 100%;
  display: grid;
  gap: 0.5rem;
}

.category-tree-node__row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  border-radius: 0 5rem 5rem 0;
  padding-left: 1rem;
  background-color: var(--primary-400);
  color: var(--light-600);
}
.category-tree-node__row > svg {
  height: 1.5rem;
  width: 1.5rem;
}

.category-tree-node__handle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--light-600);
  cursor: grab;
}
.category-tree-node__handle svg {
  height: 1.25rem;
  width: 1.25rem;
}

.category-tree-node__icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  box-sizing: border-box;
  border: 1px dashed var(--light-600);
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.category-tree-node__tag-form {
  display: contents;
}
.category-tree-node__tag-form .ts-wrapper {
  min-width: 10rem;
}
.category-tree-node__tag-form .ts-wrapper.single .ts-control {
  --ts-pr-caret: 0;
}
.category-tree-node__tag-form .ts-wrapper.single .ts-control::after {
  display: none;
}

.category-tree-node__actions {
  display: flex;
  flex-wrap: nowrap;
  margin-left: auto;
}

.category-tree-node__more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 5rem;
  background: transparent;
  color: var(--light-600);
  cursor: pointer;
}

.content-category-form--icon-only .content-category-form__other-fields {
  display: none;
}

.content-type-builder {
  display: grid;
  gap: 1rem;
}

.content-type-builder__canvas {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.content-type-builder__unassigned {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px dashed var(--border-subtle);
  border-radius: 0.5rem;
}

.content-type-builder__zone {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  box-sizing: border-box;
}

.content-type-builder__add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.content-type-builder__add .ts-wrapper {
  min-width: 14rem;
}
.content-type-builder__add .ts-wrapper .clear-button {
  display: none;
}

.content-type-palette {
  position: sticky;
  bottom: 3rem;
  z-index: 5;
  margin: 1rem 0 -2rem;
  border-top: 2px solid var(--accent-500);
  background-color: color-mix(in srgb, var(--primary-400), transparent 15%);
  color: var(--light-500);
}
@media screen and (min-width: 768px) {
  .content-type-palette {
    bottom: 0;
    margin-inline: -1rem;
  }
}
@media screen and (min-width: 992px) {
  .content-type-palette {
    margin-inline: -3rem;
  }
}

.content-type-palette__bar {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
}

.content-type-palette__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.content-type-palette__title {
  margin: 0;
  color: var(--accent-500);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content-type-palette__list {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0.5rem 0 0.75rem;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.field-palette__item {
  flex-shrink: 0;
  white-space: nowrap;
  cursor: grab;
}

.field-card {
  background-color: var(--primary-400);
  color: var(--light-600);
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  box-sizing: border-box;
}

.field-card__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.field-card__handle {
  cursor: grab;
}

.field-card__title {
  font-size: 1.125rem;
}

.field-card__body {
  display: grid;
  gap: 0.5rem;
}

.field-card__label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.field-card__name,
.field-card__machine {
  width: 100%;
  box-sizing: border-box;
}

.field-card svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.field-card__machine-row {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}

.field-card__machine:read-only {
  opacity: 0.75;
}

.field-card:not([data-field-type=image], [data-field-type=image_gallery]) .field-card__image-format {
  display: none;
}

.field-card__options {
  display: none;
  gap: 0.5rem;
}

.field-card[data-field-type=image_gallery] .field-card__options--gallery,
.field-card[data-field-type=table] .field-card__options--table,
.field-card[data-field-type=unit] .field-card__options--unit,
.field-card[data-field-type=internal_link] .field-card__options--internal-link {
  display: grid;
}

fieldset.field-card__options,
.field-card__allowed-units {
  margin: 0;
  padding: 0;
  border: none;
}

.field-card__pair {
  container-type: inline-size;
  display: grid;
  gap: 0.5rem;
}
@container (min-width: 24rem) {
  .field-card__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.field-card__pair select {
  min-width: 0;
  max-width: 100%;
}

.field-card__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.field-card__named-columns {
  display: none;
  gap: 0.5rem;
}

.field-card:has(.field-card__table-header option[value=fixed]:checked) .field-card__named-columns,
.field-card:has(.field-card__table-footer option[value=fixed]:checked) .field-card__named-columns {
  display: grid;
}
.field-card:has(.field-card__table-header option[value=fixed]:checked) .field-card__max-columns,
.field-card:has(.field-card__table-footer option[value=fixed]:checked) .field-card__max-columns {
  display: none;
}

.field-card__allowed-units {
  display: none;
  gap: 0.25rem;
}

.field-card[data-field-type=table] .field-card__allowed-units {
  display: grid;
}

.field-card__columns {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: table-column;
}
.field-card__columns:empty {
  display: none;
}

.field-card__column {
  counter-increment: table-column;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.25rem;
}
.field-card__column::before {
  content: counter(table-column);
  grid-row: 1/span 2;
  align-self: center;
  font-weight: 600;
}

.field-card__column-header,
.field-card__column-footer {
  display: none;
  grid-column: 2;
}

.field-card__column-remove {
  grid-column: 3;
  grid-row: 1/span 2;
  align-self: center;
}

.field-card:has(.field-card__table-header option[value=fixed]:checked) .field-card__column-header,
.field-card:has(.field-card__table-footer option[value=fixed]:checked) .field-card__column-footer {
  display: grid;
}

.field-card__preview {
  display: none;
}

:root:has(.content-type-preview-toggle:checked) .field-card__body {
  display: none;
}
:root:has(.content-type-preview-toggle:checked) .field-card__preview {
  display: block;
}

.field-card .field-preview {
  display: none;
}

.field-card[data-field-type=short_text] .field-preview--short-text,
.field-card[data-field-type=long_text] .field-preview--long-text,
.field-card[data-field-type=wysiwyg] .field-preview--wysiwyg,
.field-card[data-field-type=link_list] .field-preview--link-list,
.field-card[data-field-type=table] .field-preview--table,
.field-card[data-field-type=unit] .field-preview--unit,
.field-card[data-field-type=internal_link] .field-preview--internal-link {
  display: grid;
}

.field-card:has(.field-card__table-header option[value=none]:checked) .field-preview__row--head,
.field-card:has(.field-card__table-footer option[value=none]:checked) .field-preview__row--foot,
.field-card:not(:has(.field-card__allowed-units input:checked)) .field-preview__cell-unit,
.field-card:has(.field-card__link-multiple:not(:checked)) .field-preview__link--extra {
  display: none;
}

.field-card[data-field-type=image] .field-preview--image,
.field-card[data-field-type=image_gallery] .field-preview--image-gallery {
  display: flex;
}

.content-layout {
  container-type: inline-size;
}

.content-layout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.content-layout__region {
  min-width: 0;
  min-height: 3rem;
}

@container (min-width: 40rem) {
  .content-layout__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .content-layout__region {
    grid-column: var(--grid-column)/span var(--grid-span);
    grid-row: var(--grid-row);
  }
}
.content-type-builder__layout .content-layout__region {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px dashed var(--border-subtle);
  border-radius: 0.5rem;
}

.content-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  align-content: start;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.content-type-grid__new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  block-size: 100%;
  min-block-size: 12rem;
  box-sizing: border-box;
  padding: 1rem;
  border: 2px dashed var(--accent-500);
  border-radius: 0.5rem;
  color: var(--accent-500);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.content-type-grid__new:hover, .content-type-grid__new:focus-visible {
  background-color: color-mix(in srgb, var(--accent-500) 12%, transparent);
}
.content-type-grid__new svg {
  inline-size: 2rem;
  block-size: 2rem;
  fill: currentColor;
}

.content-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border: 1px solid var(--primary-300);
  border-radius: 0.5rem;
  background-color: var(--primary-600);
  color: var(--light-500);
}
.content-type-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  background-color: var(--primary-400);
  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.content-type-card:has(.content-type-card__link:hover) .content-type-card__header {
  background-color: var(--primary-300);
}
.content-type-card__name {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-type-card__link {
  color: inherit;
  text-decoration: none;
}
.content-type-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.content-type-card__link:focus-visible {
  outline: none;
}
.content-type-card:has(.content-type-card__link:hover) {
  border-color: var(--accent-500);
}
.content-type-card:has(.content-type-card__link:focus-visible) {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
}
.content-type-card__delete {
  position: relative;
  z-index: 1;
}
.content-type-card__preview {
  flex: 1;
  aspect-ratio: 4/3;
  padding: 0.75rem;
  overflow: hidden;
}
.content-type-card__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: start;
}
.content-type-card__region {
  display: grid;
  gap: 0.5rem;
  grid-column: var(--grid-column)/span var(--grid-span);
  grid-row: var(--grid-row);
  min-inline-size: 0;
}
.content-type-card__preview .field-preview {
  gap: 0.25rem;
  padding: 0;
}
.content-type-card__preview .field-preview__line {
  height: 0.25rem;
}
.content-type-card__preview .field-preview__line--heading {
  height: 0.5rem;
}
.content-type-card__preview .field-preview__line--bullet {
  margin-left: 0.5rem;
}
.content-type-card__preview .field-preview--image svg {
  width: 2.5rem;
  height: 2.5rem;
}
.content-type-card__preview .field-preview--image-gallery svg {
  width: 1.25rem;
  height: 1.25rem;
}

.field-preview {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.field-preview--image, .field-preview--image-gallery {
  display: flex;
  justify-content: center;
}
.field-preview svg {
  opacity: 0.6;
}
.field-preview--image svg {
  width: 5rem;
  height: 5rem;
}
.field-preview--image-gallery svg {
  width: 3rem;
  height: 3rem;
}

.field-preview__line {
  display: block;
  height: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--light-800);
  opacity: 0.6;
}
.field-preview__line--short {
  width: 60%;
}
.field-preview__line--heading {
  width: 40%;
  height: 0.875rem;
}
.field-preview__line--medium {
  width: 45%;
}
.field-preview__line--brief {
  width: 30%;
}

.field-preview__table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--light-800);
  border-radius: 0.25rem;
  opacity: 0.8;
}

.field-preview__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.field-preview__row + .field-preview__row {
  border-top: 1px solid color-mix(in srgb, var(--light-800), transparent 50%);
}
.field-preview__row--head {
  background-color: var(--light-800);
}
.field-preview__row--head .field-preview__cell-text {
  height: 0.375rem;
  background-color: var(--primary-500);
}
.field-preview__row--foot {
  border-top: 2px solid var(--light-800);
}

.field-preview__cell {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
}
.field-preview__cell + .field-preview__cell {
  border-left: 1px solid color-mix(in srgb, var(--light-800), transparent 50%);
}

.field-preview__cell-text {
  display: block;
  width: 60%;
  height: 0.3rem;
  border-radius: 0.125rem;
  background-color: var(--light-800);
}

.field-preview__cell-unit {
  width: 0.6rem;
  height: 0.375rem;
  margin-left: auto;
  border-radius: 0.125rem;
  background-color: var(--accent-500);
}

.field-preview__measure {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.field-preview__line--number {
  width: 30%;
}

.field-preview__badge {
  width: 1.25rem;
  height: 0.75rem;
  border-radius: 0.25rem;
  background-color: var(--accent-500);
  opacity: 0.6;
}

.field-preview__link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.field-preview__link svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.content-table-field {
  display: grid;
  gap: 0.5rem;
}
.content-table-field__scroll {
  overflow-x: auto;
}
.content-table-field__table {
  border-collapse: collapse;
  min-width: 100%;
}
.content-table-field__table th,
.content-table-field__table td {
  padding: 0.25rem;
  text-align: left;
  vertical-align: middle;
}
.content-table-field__table th {
  font-weight: 600;
}
.content-table-field__input {
  width: 100%;
  min-width: 8rem;
  box-sizing: border-box;
}
.content-table-field .content-table-field__unit {
  flex: 0 0 auto;
  width: auto;
  min-width: 5rem;
}
.content-unit-field .content-table-field__input {
  flex: 1 1 6rem;
  width: auto;
  min-width: 6rem;
}
.content-table-field__action {
  width: 1%;
  white-space: nowrap;
}
.content-table-field__action svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}
.content-table-field__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.content-table-field__actions svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.content-unit-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.content-unit-field input {
  flex: 1;
  min-width: 0;
}
.content-unit-field__unit {
  flex-shrink: 0;
  font-weight: 600;
}

.content-table {
  overflow-x: auto;
}
.content-table__amount {
  text-align: right;
  white-space: nowrap;
}

.unit-form {
  container-type: inline-size;
  display: grid;
  gap: 0.75rem;
}
.unit-form__names, .unit-form__conversion {
  display: grid;
  gap: 0.75rem;
}
.unit-form:has(.unit-form__base option[value=""]:checked) .unit-form__conversion {
  display: none;
}
@container (min-width: 36rem) {
  .unit-form__names {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .unit-form__conversion {
    grid-template-columns: 1fr 1fr;
  }
}

.unit-list {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}
.unit-list__family {
  display: grid;
  gap: 0.5rem;
  overflow-x: auto;
}
.unit-list__name {
  display: inline-block;
  padding-left: calc(var(--unit-depth, 0) * 1rem);
}

.media-image__img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.page-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.page-navigation__current {
  margin: auto;
}

.notification__body {
  display: flex;
  gap: 1rem;
}

.notification__main {
  flex-grow: 1;
  display: grid;
}

.notification__header {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.notification__content {
  margin-top: 0.5rem;
}

.notification__separator {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.notification__footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  gap: 0.5rem;
}

.notification__actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.notification__row {
  display: flex;
  gap: 0.5rem;
}

.notification__status {
  display: flex;
  gap: 0.25rem;
}

.notification__meta {
  margin-top: 0.25rem;
}

.notification-list {
  background-color: var(--primary-500);
  color: var(--light-600);
}
.notification-list__filter-toggle {
  margin-left: auto;
}
.notification-list__filters {
  margin-block: 1rem;
  max-height: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease, max-height 0.5s ease-out, opacity 0.3s ease;
}
.notification-list__filters:not([inert]) {
  max-height: 500px;
  opacity: 1;
  transform: scaleY(1);
}
.notification-list__items {
  display: grid;
  gap: 0.75rem;
}
.notification-list__empty {
  padding-block: 1rem;
}

.book-recommendations__sagas {
  margin-top: 1rem;
}

.oldest-consultation {
  grid-column: span 2;
  display: flex;
}
.oldest-consultation__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-left: 4px solid var(--accent-500);
  border-radius: 0.5rem;
}
.oldest-consultation__card--done {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.oldest-consultation__cover {
  flex: 0 0 auto;
  width: auto;
}
.oldest-consultation__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.oldest-consultation__question {
  margin: 0;
  color: var(--accent-500);
  font-weight: bold;
}
.oldest-consultation__title {
  margin: 0;
  font-size: 1rem;
}
.oldest-consultation__detail {
  margin: 0;
  color: var(--light-600);
}
.oldest-consultation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-top: 0.25rem;
}
.oldest-consultation__card--done .oldest-consultation__actions {
  justify-content: center;
}
@container favorites-list (width < 30rem) {
  .oldest-consultation {
    grid-column: 1/-1;
  }
}

.favorite-button[aria-pressed=false] > svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 50px;
}

.book-card__header {
  overflow: hidden;
}

.book-card__pages {
  display: flex;
  gap: 0.25rem;
}

.saga-card__header {
  overflow: hidden;
}

.saga-card__count {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
}

.translate-form__source {
  padding: 0.5rem;
}
.translate-form__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.translate-form__synopsis {
  display: flex;
  flex-direction: column;
}
.translate-form__synopsis textarea {
  flex-grow: 1;
}

.rt-whisper {
  font-size: 0.889rem;
  font-style: italic;
  opacity: 0.75;
}

.rt-shout {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rt-small-caps {
  font-variant: small-caps;
}

.rt-thought {
  font-style: italic;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.flash-messages {
  position: fixed;
  top: 1rem;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

body {
  background-color: var(--secondary-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
}

main {
  max-width: 83.75rem;
  width: 100%;
  padding-bottom: 1.5rem;
}

.book-view-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "content" "aside";
}
@media screen and (min-width: 768px) {
  .book-view-layout {
    gap: 2rem;
  }
}
.book-view-layout > aside {
  overflow: hidden;
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.book-view-layout .grid-layout-content {
  grid-area: content;
}
.book-view-layout > header {
  grid-area: header;
  display: grid;
  column-gap: 0.5rem;
  row-gap: 1rem;
  grid-template-columns: 125px 1fr;
  grid-template-areas: "thumbnail title" "thumbnail genres" "infos infos";
}
@media screen and (min-width: 768px) {
  .book-view-layout > header {
    column-gap: 2rem;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "thumbnail title" "thumbnail infos" "thumbnail infos" "thumbnail genres";
  }
}
.book-view-layout > header picture {
  grid-area: thumbnail;
}
@media screen and (max-width: 768px) {
  .book-view-layout > header picture img {
    height: auto;
    width: 125px;
  }
}
.book-view-layout > header .grid-layout-title {
  grid-area: title;
}
.book-view-layout > header .grid-layout-infos {
  grid-area: infos;
}
.book-view-layout > header .grid-layout-genres {
  grid-area: genres;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .book-view-layout > header .grid-layout-genres {
    align-items: center;
    flex-direction: row;
  }
}

.book-view-layout__status {
  display: flex;
  gap: 0.25rem;
}

.book-view-layout__infos {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.book-view-layout__genres {
  display: flex;
  gap: 0.5rem;
}

.book-view-layout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.section {
  margin: 1rem 0;
}
.section > header {
  margin-bottom: 0.75rem;
}

.tabs-page__list {
  font-size: 1.266rem;
  text-transform: capitalize;
  display: flex;
  flex-wrap: wrap;
  min-height: 2.5rem;
  overflow: hidden;
}
.tabs-page__list span {
  text-align: left;
}
.tabs-page__list li {
  position: relative;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
}
@media screen and (min-width: 992px) {
  .tabs-page__list li {
    flex-basis: var(--tab-element-width, fit-content);
  }
  .tabs-page__list li:not(:first-child) {
    margin-left: var(--margin-offset, 0);
  }
}
@media screen and (min-width: 992px) {
  .tabs-page__list li:first-child a:not(.button) {
    justify-content: flex-start;
    padding-left: 1.5rem;
  }
}
.tabs-page__list li a:not(.button) {
  text-decoration: none;
  background-color: color-mix(in srgb, var(--secondary-500) 20%, var(--dark-400));
  padding: 1rem 0;
  width: 100%;
}
.tabs-page__list li a:not(.button) svg {
  width: 1.5rem;
  height: 1.5rem;
}
.tabs-page__list li a:not(.button) picture,
.tabs-page__list li a:not(.button) img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: cover;
  border-radius: 0.25rem;
}
@media screen and (min-width: 768px) {
  .tabs-page__list li a:not(.button) {
    display: inline-flex;
    justify-content: center;
    gap: 0.25rem;
    align-items: center;
    clip-path: url(#tabsClip);
    border-top-left-radius: 20px;
  }
}
.tabs-page__list li a:not(.button)::before {
  content: "";
  position: absolute;
  display: block;
  inset: 0;
}
.tabs-page__list li:has(> a[aria-selected=true]) {
  z-index: 100 !important;
}
.tabs-page__list li:has(> a[aria-selected=true]) a {
  justify-content: flex-start;
  color: var(--accent-500);
  padding: 1.5rem;
}

.tabs-page__panels {
  -webkit-mask: url("../images/rectangle_container_flat-usBa_0s.svg") no-repeat;
  mask: url("../images/rectangle_container_flat-usBa_0s.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--primary-500);
  color: var(--light-500);
  padding: 2rem 0rem;
  max-width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 992px) {
  .tabs-page__panels {
    mask-size: 102% 100%;
    mask-position-x: center;
  }
}
@media screen and (min-width: 768px) {
  .tabs-page__panels {
    padding: 2rem 1rem;
  }
}
@media screen and (min-width: 992px) {
  .tabs-page__panels {
    padding: 2rem 3rem;
  }
}

.tabs-page__list--tabs:not(:has(li)) {
  display: none;
}

.tabs-page__toggle {
  grid-row: 1;
}

.tabs-page__list--links {
  grid-row: 2;
}

.tabs-page__list--menu {
  grid-row: 3;
}

.tabs-page__list--tabs {
  flex-grow: 1;
}

.tabs-page__link {
  flex-wrap: wrap;
}

.tabs-page .tabs-page__list ul.tabs-page__list--group li.tabs-page__link a {
  padding-left: 2rem;
}

.tabs-page__chevron {
  display: inline-flex;
  margin-left: auto;
  transition: rotate 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .tabs-page__chevron {
    transition: none;
  }
}

.tabs-page__disclosure {
  border-top: solid 3px color-mix(in srgb, var(--secondary-700), transparent 90%);
}

.tabs-page__disclosure[aria-expanded=true] .tabs-page__chevron {
  rotate: 180deg;
}

.tabs-page__collapse {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .tabs-page__collapse {
    transition: none;
  }
}
.tabs-page__collapse[inert] {
  grid-template-rows: 0fr;
}
.tabs-page__collapse > .tabs-page__list {
  min-height: 0;
}

.tabs-page__fill {
  flex-grow: 1;
}

.tabs-page__panels {
  display: flex;
  justify-content: center;
}
.tabs-page__panels--grid {
  display: grid;
  justify-content: normal;
}

.reading-page .tabs-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: min-content 1fr;
  grid-template-areas: "nav header " "nav content";
}
.reading-page .tabs-page > .tabs-page__nav {
  transform: translateY(calc(100% - 3rem));
  transition: transform 0.3s ease-in-out;
  background: linear-gradient(180deg, transparent 3rem, var(--primary-400) 3rem, var(--primary-400) 100%);
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  grid-area: nav;
  gap: 1rem;
  display: grid;
}
.reading-page .tabs-page > .tabs-page__nav.is-open {
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  .reading-page .tabs-page > .tabs-page__nav {
    grid-template-rows: minmax(5rem, max-content) min-content auto;
    background-color: var(--primary-400);
    transform: unset;
    position: relative;
    z-index: 1;
    width: 250px;
  }
}
.reading-page .tabs-page .tabs-page__nav form.tabs-page__search {
  flex-grow: 1;
  padding: 0;
}
.reading-page .tabs-page .tabs-page__nav form.tabs-page__search .input-group,
.reading-page .tabs-page .tabs-page__nav form.tabs-page__search input {
  flex-grow: 1;
}
.reading-page .tabs-page .tabs-page__nav form {
  color: var(--light-500);
}
.reading-page .tabs-page .tabs-page__nav form label {
  color: var(--light-500);
}
.reading-page .tabs-page .tabs-page__nav form .form-group {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--light-500), transparent 85%);
}
@media screen and (min-width: 768px) {
  .reading-page .tabs-page .tabs-page__nav form {
    padding: 0 1rem 1rem;
    box-sizing: border-box;
  }
}
.reading-page .tabs-page .tabs-page__nav .tabs-page__list--links,
.reading-page .tabs-page .tabs-page__nav .tabs-page__list--group,
.reading-page .tabs-page .tabs-page__nav .tabs-page__list--tabs {
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .reading-page .tabs-page .tabs-page__nav .tabs-page__list--tabs li a:not(.button) {
    padding-left: 2rem;
  }
}
.reading-page .tabs-page .tabs-page__nav .tabs-page__list--tabs a:not([role=tab]) {
  color: var(--light-700);
}
@media screen and (min-width: 768px) {
  .reading-page .tabs-page .tabs-page__nav .tabs-page__list--group .button {
    padding-left: 2rem;
  }
  .reading-page .tabs-page .tabs-page__nav .tabs-page__list--group .tabs-page__list--tabs li a:not(.button) {
    padding-left: 3rem;
  }
}
.reading-page .tabs-page .tabs-page__nav .tabs-page__list--links {
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .reading-page .tabs-page .tabs-page__nav .tabs-page__list--links {
    gap: 0;
    padding-bottom: 0;
  }
}
.reading-page .tabs-page .tabs-page__nav .button[aria-current=page]:not(.tabs-page__toggle),
.reading-page .tabs-page .tabs-page__nav .tabs-page__link:has(.tabs-page__collapse [aria-current=page]) > .tabs-page__disclosure--group {
  color: var(--accent-500);
}
.reading-page .tabs-page .tabs-page__nav .button.button--dark {
  mask: unset;
}
.reading-page .tabs-page .tabs-page__nav .button.button--dark:hover {
  color: var(--accent-500);
  background-color: color-mix(in srgb, var(--primary-500), transparent 50%);
}
.reading-page .tabs-page .tabs-page__nav .button.button--dark:focus::before {
  outline-color: var(--accent-500);
}
.reading-page .tabs-page .tabs-page__nav .button.button--danger {
  mask: unset;
  color: var(--danger-500);
  background-color: var(--primary-500);
}
.reading-page .tabs-page .tabs-page__nav .button.button--danger:hover {
  color: var(--danger-300);
  background-color: color-mix(in srgb, var(--primary-500), transparent 50%);
}
.reading-page .tabs-page .tabs-page__nav .button.button--danger:focus::before {
  outline-color: var(--danger-500);
}
.reading-page .tabs-page .tabs-page__toggle {
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .reading-page .tabs-page .tabs-page__toggle {
    display: none;
  }
}
.reading-page .tabs-page > header {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: none;
  color: var(--light-500);
  grid-area: header;
  mask: none;
}
.reading-page .tabs-page > header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--primary-400);
}
@media screen and (min-width: 992px) {
  .reading-page .tabs-page > header::before {
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-position: 110% 100%;
    mask-size: 110% 100%;
  }
}
.reading-page .tabs-page .tabs-page__list {
  height: fit-content;
}
.reading-page .tabs-page .tabs-page__list li {
  flex-basis: unset;
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .reading-page .tabs-page .tabs-page__list li {
    width: 100%;
  }
}
.reading-page .tabs-page .tabs-page__list li button,
.reading-page .tabs-page .tabs-page__list li a.button {
  font-size: 1.266rem;
  flex-grow: 1;
  text-decoration: none;
  text-transform: capitalize;
  justify-content: flex-start;
  padding-inline: 1rem;
  gap: 0.25rem;
  font-weight: unset;
}
.reading-page .tabs-page .tabs-page__list li button svg,
.reading-page .tabs-page .tabs-page__list li a.button svg {
  height: 1.5rem;
  width: 1.5rem;
}
.reading-page .tabs-page .tabs-page__list li a:not(.button) {
  clip-path: unset;
  border-radius: unset;
  padding: 0.5rem 1rem;
  justify-content: flex-start;
  border-top: 3px solid var(--primary-500);
  background-color: color-mix(in srgb, var(--primary-500), transparent 55%);
  position: relative;
}
.reading-page .tabs-page .tabs-page__list li a:not(.button):hover, .reading-page .tabs-page .tabs-page__list li a:not(.button)[aria-current=page] {
  color: var(--accent-500);
}
.reading-page .tabs-page .tabs-page__list li a:not(.button):hover::before, .reading-page .tabs-page .tabs-page__list li a:not(.button)[aria-current=page]::before {
  right: 0;
}
.reading-page .tabs-page .tabs-page__list li a:not(.button)::before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: -3px;
  right: 100%;
  transition: right 0.3s;
  background-color: var(--accent-500);
  height: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .reading-page .tabs-page .tabs-page__list li a:not(.button)::before {
    transition: none;
  }
}
.reading-page .tabs-page .tabs-page__panels {
  mask: unset;
  background: none;
  grid-area: content;
}
.reading-page .tabs-page .tabs-page__panels > div {
  max-width: 80ch;
  flex-grow: 1;
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel {
  margin-inline: -1rem;
  color: var(--primary-500);
  background-color: var(--light-500);
}
@media screen and (min-width: 768px) {
  .reading-page .tabs-page .tabs-page__panels > div > .paper-panel {
    margin-inline: unset;
  }
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel a:not(.button, .tag, .card__link) {
  color: var(--primary-700);
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel a:not(.button, .tag, .card__link):hover {
  color: var(--primary-200);
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel hr {
  border-color: var(--primary-500);
  opacity: 80%;
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel .tag {
  background-color: var(--primary-500);
  color: var(--light-500);
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel .tag:hover {
  background-color: var(--primary-400);
  color: var(--accent-500);
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel .table {
  background-color: var(--light-500);
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel .table thead,
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel .table tfoot {
  background-color: var(--dark-300);
  border: none;
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel .table tbody tr:nth-child(odd) {
  background-color: var(--light-600);
}
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel .table td,
.reading-page .tabs-page .tabs-page__panels > div > .paper-panel .table th {
  padding: 0.5rem 1rem;
  text-align: center;
}
.reading-page .tabs-page .tabs-page__panels > div.tab-panel--wide {
  max-width: 80rem;
}

.tabs-page__sidebar {
  grid-row: 2;
}

.reading-sheet {
  position: relative;
  padding: 1rem;
}
@media screen and (min-width: 992px) {
  .reading-sheet {
    padding: 4rem;
  }
}

.sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr));
  gap: 1rem;
}
.sitemap * {
  font-size: 1.125rem;
}
.sitemap ul {
  display: grid;
  gap: 0.5rem;
}
.sitemap span {
  font-weight: bold;
  padding-bottom: 0.5rem;
  display: inline-flex;
}

body.reading-page {
  background-color: var(--primary-500);
  position: relative;
}
body.reading-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(color-mix(in srgb, var(--light-500), transparent 98%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--light-500), transparent 98%) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--light-500), transparent 95%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--light-500), transparent 95%) 1px, transparent 1px);
  background-size: 1rem 1rem, 1rem 1rem, 5rem 5rem, 5rem 5rem;
  mask-image: radial-gradient(ellipse 70% 60% at 15% 10%, black 40%, transparent 85%), radial-gradient(ellipse 60% 70% at 85% 40%, black 35%, transparent 80%), radial-gradient(ellipse 80% 60% at 40% 85%, black 45%, transparent 90%);
  mask-composite: add, add, add;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 15% 10%, black 40%, transparent 85%), radial-gradient(ellipse 60% 70% at 85% 40%, black 35%, transparent 80%), radial-gradient(ellipse 80% 60% at 40% 85%, black 45%, transparent 90%);
  -webkit-mask-composite: source-over, source-over, source-over;
}
body.reading-page > header {
  background-color: var(--primary-700);
}
body.reading-page main {
  max-width: 100%;
  padding-bottom: 0;
  flex-grow: 1;
  display: grid;
}
body.reading-page main > header {
  background-color: var(--primary-400);
  mask: unset;
  margin: 0;
}
body.reading-page main a:not([role=tab], [class]) {
  color: var(--primary-500);
}
body.reading-page main :is(.comment, .review-list__disclaimer) {
  background-color: color-mix(in srgb, var(--primary-300), transparent 10%);
}
body.reading-page .masked-reading {
  isolation: isolate;
  position: absolute;
  z-index: -1;
  inset: 0;
}
body.reading-page .masked-reading::before {
  content: "";
  display: block;
  position: sticky;
  top: -2rem;
  background-color: var(--light-500);
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 102% 100%;
  mask-size: 102% 100%;
  mask-position: center;
  max-height: 130svh;
  height: 100%;
}
@media screen and (min-width: 768px) {
  body.reading-page .masked-reading::before {
    max-width: calc(80ch + 4rem);
    mask-size: 100% 100%;
  }
}
body.reading-page .list-infos > li {
  border-color: var(--primary-500);
}

.reading-wrapper {
  display: grid;
  grid-template-columns: 80ch;
  justify-content: center;
  margin: auto;
}

html.dark-theme .masked-reading::before {
  background-color: var(--dark-500);
}
html.dark-theme .masked-reading + .flow {
  color: var(--light-500);
}

.reading-book-thumbnail {
  display: grid;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem;
  margin: 1rem;
  width: fit-content;
  background-color: var(--primary-300);
  max-width: 200px;
  position: relative;
}
.reading-book-thumbnail picture {
  justify-content: center;
}
.reading-book-thumbnail a {
  font-weight: bold;
  text-decoration: none;
}
.reading-book-thumbnail .button {
  margin: -0.5rem;
  padding: 0.125rem;
  margin-bottom: 0.25rem;
}

.page-reading {
  position: relative;
}
.page-reading__sheet {
  padding: 1rem;
}
@media screen and (min-width: 992px) {
  .page-reading__sheet {
    padding: 4rem;
  }
}

.page-thought {
  padding: 2rem;
}
.page-thought__divider {
  margin-block: 0.5rem;
}
.page-thought__author {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.reading-nav__book {
  position: relative;
}

body.search-page .tabs-page .tabs-page__panels > div {
  max-width: none;
}
body.search-page .list-infos > li {
  border-color: color-mix(in srgb, var(--light-500), transparent 80%);
}

.results-grid > .comment-list-results[data-display-mode=full] {
  grid-template-columns: 1fr;
}
.results-grid > .comment-list-results[data-display-mode=thumbnail] {
  display: block;
  columns: 1;
  column-gap: 1rem;
}
@container resultsgrid (min-width: 40rem) {
  .results-grid > .comment-list-results[data-display-mode=thumbnail] {
    columns: 2;
  }
}
@container resultsgrid (min-width: 64rem) {
  .results-grid > .comment-list-results[data-display-mode=thumbnail] {
    columns: 3;
  }
}
.results-grid > .comment-list-results[data-display-mode=thumbnail] > li {
  break-inside: avoid;
  margin-bottom: 1rem;
}

.community-tab-container {
  container: community-tab/inline-size;
}

.community-tab {
  columns: 1;
  column-gap: 1rem;
  width: 100%;
}
@container community-tab (min-width: 40rem) {
  .community-tab {
    columns: 2;
  }
}
@container community-tab (min-width: 64rem) {
  .community-tab {
    columns: 3;
  }
}
.community-tab > * {
  min-width: 0;
  break-inside: avoid;
  margin-bottom: 1rem;
}

.book-content-manager {
  display: flex;
}

.chapter-form__submit {
  margin-left: auto;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.news-list__article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.news-list__image {
  float: left;
  margin-right: 0.5rem;
}

body.home-page {
  position: relative;
}
body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(color-mix(in srgb, var(--primary-500), transparent 98%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary-500), transparent 98%) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--primary-500), transparent 95%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary-500), transparent 95%) 1px, transparent 1px);
  background-size: 1rem 1rem, 1rem 1rem, 5rem 5rem, 5rem 5rem;
  mask-image: radial-gradient(ellipse 70% 60% at 15% 10%, black 40%, transparent 85%), radial-gradient(ellipse 60% 70% at 85% 40%, black 35%, transparent 80%), radial-gradient(ellipse 80% 60% at 40% 85%, black 45%, transparent 90%);
  mask-composite: add, add, add;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 15% 10%, black 40%, transparent 85%), radial-gradient(ellipse 60% 70% at 85% 40%, black 35%, transparent 80%), radial-gradient(ellipse 80% 60% at 40% 85%, black 45%, transparent 90%);
  -webkit-mask-composite: source-over, source-over, source-over;
}

.home-page__header {
  display: grid;
  gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .home-page__header {
    grid-template-columns: 1fr 1fr;
  }
}
.home-page__articles {
  display: grid;
  grid-template-rows: auto 1fr;
}

.home-content-switcher {
  margin-top: 1rem;
}
.home-content-switcher__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.home-content-switcher__button {
  flex-grow: 1;
}
.home-content-switcher__games {
  margin-block: 1rem;
}

.credits__contributors {
  display: grid;
  gap: 0.25rem;
}

.legal__editor {
  margin-bottom: 1rem;
}

.external-link-warning__container {
  display: grid;
  gap: 0.75rem;
}
.external-link-warning__actions {
  display: flex;
  gap: 0.5rem;
}

.public-profile {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 992px) {
  .public-profile {
    grid-template-columns: 0.5fr 1.5fr;
  }
}
.public-profile .splide {
  width: 100%;
}
.public-profile__aside {
  padding-block: 1rem;
}
.public-profile__summary {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
  padding-inline: 0.75rem;
}
.public-profile__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.public-profile__avatar {
  border-radius: 999px;
}
.public-profile__karma {
  margin-top: 0.25rem;
}
.public-profile__about {
  padding: 1rem;
  background-color: var(--primary-400);
  -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  overflow: scroll;
  width: 25ch;
}
.public-profile__heading {
  padding-inline: 0.75rem;
}
.public-profile__comments {
  display: grid;
  gap: 0.5rem;
}
.public-profile__comment {
  container-type: inline-size;
}
.public-profile__projects {
  margin-top: 0.5rem;
}
.public-profile__slider {
  display: flex;
  container-type: inline-size;
}

.profile-form__main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile-form__about {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media screen and (min-width: 992px) {
  .settings-form {
    flex-direction: row;
  }
}
.settings-form__display, .settings-form__account {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.settings-form__account {
  padding: 1rem;
}
.settings-form__contact {
  display: grid;
  gap: 0.5rem;
}
.settings-form__save {
  margin-top: auto;
}

.settings-modal {
  padding: 1rem;
}
@media screen and (min-width: 992px) {
  .settings-modal {
    padding: 4rem;
  }
}

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-page--illustrated {
  position: relative;
  min-height: 700px;
  background-image: url("../images/background-717KslV.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 992px) {
  .auth-page--illustrated {
    -webkit-mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    mask: url("../images/rectangle_container-_l9yHV8.svg") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
.auth-page__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.auth-page__switch {
  margin-top: 0.75rem;
}

.saga-view {
  container: saga/inline-size;
}

.saga-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@container saga (width > 40rem) {
  .saga-header {
    grid-template-columns: 295px auto;
  }
}
.saga-header picture {
  margin-inline: auto;
}

.saga-view__book {
  position: relative;
}
.saga-view__book:hover .saga-view__position {
  background: color-mix(in srgb, var(--primary-300), transparent 20%);
}

.saga-view__position {
  transition: background-color 0.3s ease;
  position: absolute;
  background: color-mix(in srgb, var(--primary-400), transparent 20%);
  z-index: 15;
  padding: 0.5rem;
  left: 1rem;
  top: 1rem;
  border-radius: 0 0 0.5rem 0;
  color: var(--light-500);
}

.saga-view__meta {
  margin-bottom: 0.5rem;
}

.saga-form {
  flex-grow: 1;
}

.saga-form__books {
  display: grid;
}

.saga-books__label {
  width: 100%;
}
.saga-books__title {
  flex-grow: 1;
}
.saga-books__divider {
  margin-block: 1rem;
}

.feedback-form__navigator {
  display: flex;
  justify-content: space-between;
}

.light-theme,
.nav-theme {
  --primary-100: #6c8589;
  --primary-200: #557379;
  --primary-300: #3e626a;
  --primary-400: #28505a;
  --primary-500: #113e4a;
  --primary-600: #133b46;
  --primary-700: #143842;
  --primary-800: #16353e;
  --primary-900: #17323a;
  --secondary-100: #dbe8e4;
  --secondary-200: #d7e7e4;
  --secondary-300: #d2e6e3;
  --secondary-400: #cee4e3;
  --secondary-500: #cae3e2;
  --secondary-600: #b9d0cf;
  --secondary-700: #a8bcbb;
  --secondary-800: #97a9a8;
  --secondary-900: #869595;
  --accent-100: #e9d386;
  --accent-200: #e7ce75;
  --accent-300: #e6ca65;
  --accent-400: #e4c554;
  --accent-500: #e2c044;
  --accent-600: #cfb041;
  --accent-700: #bba03d;
  --accent-800: #a8903a;
  --accent-900: #958036;
  --warning-100: #e9a687;
  --warning-200: #e79a77;
  --warning-300: #e68e66;
  --warning-400: #e48156;
  --warning-500: #e27546;
  --warning-600: #cf6d42;
  --warning-700: #bb643f;
  --warning-800: #a85c3b;
  --warning-900: #955337;
  --danger-100: #e98a87;
  --danger-200: #e77977;
  --danger-300: #e66866;
  --danger-400: #e45756;
  --danger-500: #e24646;
  --danger-600: #cf4242;
  --danger-700: #bb3f3f;
  --danger-800: #a83b3b;
  --danger-900: #953737;
  --success-100: #76b570;
  --success-200: #61ab5c;
  --success-300: #4ca148;
  --success-400: #379734;
  --success-500: #228d20;
  --success-600: #228220;
  --success-700: #227720;
  --success-800: #226d20;
  --success-900: #226220;
  --discord-100: #969dee;
  --discord-200: #878fef;
  --discord-300: #7781f0;
  --discord-400: #6873f1;
  --discord-500: #5865f2;
  --discord-600: #535edd;
  --discord-700: #4d57c8;
  --discord-800: #4851b3;
  --discord-900: #424a9e;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
  --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
}

@media (prefers-color-scheme: dark) {
  .nav-theme,
  html {
    --primary-100: #666a78;
    --primary-200: #515664;
    --primary-300: #3d4351;
    --primary-400: #282f3d;
    --primary-500: #131b29;
    --primary-600: #131a28;
    --primary-700: #121a27;
    --primary-800: #121926;
    --primary-900: #121825;
    --secondary-100: #afbbd3;
    --secondary-200: #a6b5ce;
    --secondary-300: #9dafc9;
    --secondary-400: #95a8c5;
    --secondary-500: #8CA2C0;
    --secondary-600: #8094b0;
    --secondary-700: #7386a0;
    --secondary-800: #677790;
    --secondary-900: #5a6980;
    --accent-100: #ddae60;
    --accent-200: #dca648;
    --accent-300: #db9d30;
    --accent-400: #da9518;
    --accent-500: #D98C00;
    --accent-600: #c58003;
    --accent-700: #b17406;
    --accent-800: #9d6809;
    --accent-900: #895c0c;
    --warning-100: #e2a08a;
    --warning-200: #e29579;
    --warning-300: #e28b68;
    --warning-400: #e28057;
    --warning-500: #e27546;
    --warning-600: #cd6b42;
    --warning-700: #b8623e;
    --warning-800: #a3583a;
    --warning-900: #8e4e36;
    --danger-100: #d87a80;
    --danger-200: #d6696e;
    --danger-300: #d5585b;
    --danger-400: #d34749;
    --danger-500: #d13636;
    --danger-600: #be3334;
    --danger-700: #aa2f31;
    --danger-800: #972c2f;
    --danger-900: #84282d;
    --success-100: #6faf73;
    --success-200: #5ca65e;
    --success-300: #499e49;
    --success-400: #359535;
    --success-500: #228d20;
    --success-600: #208120;
    --success-700: #1e7520;
    --success-800: #1d6920;
    --success-900: #1b5d20;
    --discord-100: #9097f1;
    --discord-200: #828af1;
    --discord-300: #747ef1;
    --discord-400: #6671f2;
    --discord-500: #5865f2;
    --discord-600: #515ddd;
    --discord-700: #4a55c8;
    --discord-800: #424db3;
    --discord-900: #3b459e;
    --light-100: #e9e7f2;
    --light-200: #e7e6f1;
    --light-300: #e6e4f1;
    --light-400: #e4e3f0;
    --light-500: #e3e1ef;
    --light-600: #d5d2e7;
    --light-700: #c7c3df;
    --light-800: #b9b4d7;
    --light-900: #aba4cf;
    --dark-100: #303b5c;
    --dark-200: #28324d;
    --dark-300: #20283e;
    --dark-400: #181e2e;
    --dark-500: #10141f;
    --dark-600: #0f131d;
    --dark-700: #0e121c;
    --dark-800: #0e111a;
    --dark-900: #0d1019;
    --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
  }
}

.dark-theme {
  --primary-100: #666a78;
  --primary-200: #515664;
  --primary-300: #3d4351;
  --primary-400: #282f3d;
  --primary-500: #131b29;
  --primary-600: #131a28;
  --primary-700: #121a27;
  --primary-800: #121926;
  --primary-900: #121825;
  --secondary-100: #afbbd3;
  --secondary-200: #a6b5ce;
  --secondary-300: #9dafc9;
  --secondary-400: #95a8c5;
  --secondary-500: #8CA2C0;
  --secondary-600: #8094b0;
  --secondary-700: #7386a0;
  --secondary-800: #677790;
  --secondary-900: #5a6980;
  --accent-100: #ddae60;
  --accent-200: #dca648;
  --accent-300: #db9d30;
  --accent-400: #da9518;
  --accent-500: #D98C00;
  --accent-600: #c58003;
  --accent-700: #b17406;
  --accent-800: #9d6809;
  --accent-900: #895c0c;
  --warning-100: #e2a08a;
  --warning-200: #e29579;
  --warning-300: #e28b68;
  --warning-400: #e28057;
  --warning-500: #e27546;
  --warning-600: #cd6b42;
  --warning-700: #b8623e;
  --warning-800: #a3583a;
  --warning-900: #8e4e36;
  --danger-100: #d87a80;
  --danger-200: #d6696e;
  --danger-300: #d5585b;
  --danger-400: #d34749;
  --danger-500: #d13636;
  --danger-600: #be3334;
  --danger-700: #aa2f31;
  --danger-800: #972c2f;
  --danger-900: #84282d;
  --success-100: #6faf73;
  --success-200: #5ca65e;
  --success-300: #499e49;
  --success-400: #359535;
  --success-500: #228d20;
  --success-600: #208120;
  --success-700: #1e7520;
  --success-800: #1d6920;
  --success-900: #1b5d20;
  --discord-100: #9097f1;
  --discord-200: #828af1;
  --discord-300: #747ef1;
  --discord-400: #6671f2;
  --discord-500: #5865f2;
  --discord-600: #515ddd;
  --discord-700: #4a55c8;
  --discord-800: #424db3;
  --discord-900: #3b459e;
  --light-100: #e9e7f2;
  --light-200: #e7e6f1;
  --light-300: #e6e4f1;
  --light-400: #e4e3f0;
  --light-500: #e3e1ef;
  --light-600: #d5d2e7;
  --light-700: #c7c3df;
  --light-800: #b9b4d7;
  --light-900: #aba4cf;
  --dark-100: #303b5c;
  --dark-200: #28324d;
  --dark-300: #20283e;
  --dark-400: #181e2e;
  --dark-500: #10141f;
  --dark-600: #0f131d;
  --dark-700: #0e121c;
  --dark-800: #0e111a;
  --dark-900: #0d1019;
  --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
}

.no-color-theme {
  --primary-100: #6c6b6a;
  --primary-200: #565554;
  --primary-300: #403f3f;
  --primary-400: #292929;
  --primary-500: #131313;
  --primary-600: #141414;
  --primary-700: #161616;
  --primary-800: #171717;
  --primary-900: #191919;
  --secondary-100: #efeeed;
  --secondary-200: #efeeed;
  --secondary-300: #eeeeed;
  --secondary-400: #eeeded;
  --secondary-500: #ededed;
  --secondary-600: #d9d9d9;
  --secondary-700: #c4c4c4;
  --secondary-800: #b0b0b0;
  --secondary-900: #9b9b9b;
  --accent-100: #dad9d8;
  --accent-200: #d6d5d5;
  --accent-300: #d2d2d1;
  --accent-400: #cecece;
  --accent-500: #cacaca;
  --accent-600: #b9b9b9;
  --accent-700: #a8a8a8;
  --accent-800: #979797;
  --accent-900: #868686;
  --warning-100: #c6c5c4;
  --warning-200: #bebebd;
  --warning-300: #b7b6b6;
  --warning-400: #afafaf;
  --warning-500: #a8a8a8;
  --warning-600: #9b9b9b;
  --warning-700: #8d8d8d;
  --warning-800: gray;
  --warning-900: #727272;
  --danger-100: #bab9b8;
  --danger-200: #b1b0af;
  --danger-300: #a8a7a7;
  --danger-400: #9e9e9e;
  --danger-500: #959595;
  --danger-600: #898989;
  --danger-700: #7e7e7e;
  --danger-800: #727272;
  --danger-900: #676767;
  --success-100: #efeeed;
  --success-200: #efeeed;
  --success-300: #eeeeed;
  --success-400: #eeeded;
  --success-500: #ededed;
  --success-600: #d9d9d9;
  --success-700: #c4c4c4;
  --success-800: #b0b0b0;
  --success-900: #9b9b9b;
  --discord-100: #b4b3b2;
  --discord-200: #a9a9a8;
  --discord-300: #9f9e9e;
  --discord-400: #949494;
  --discord-500: #8a8a8a;
  --discord-600: gray;
  --discord-700: #757575;
  --discord-800: #6b6b6b;
  --discord-900: #606060;
  --light-100: #f9f9f9;
  --light-200: #f9f9f9;
  --light-300: #f9f9f9;
  --light-400: #f8f8f8;
  --light-500: #f8f8f8;
  --light-600: #ececec;
  --light-700: #dfdfdf;
  --light-800: lightgray;
  --light-900: #c6c6c6;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
  --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
}

.protanopia-theme {
  --primary-100: #628589;
  --primary-200: #497379;
  --primary-300: #31626a;
  --primary-400: #18505a;
  --primary-500: #003e4a;
  --primary-600: #033b46;
  --primary-700: #073842;
  --primary-800: #0a353e;
  --primary-900: #0d323a;
  --secondary-100: #71e9e6;
  --secondary-200: #5be8e5;
  --secondary-300: #46e6e5;
  --secondary-400: #30e5e4;
  --secondary-500: #1ae4e4;
  --secondary-600: #1bd1d1;
  --secondary-700: #1bbdbd;
  --secondary-800: #1caaaa;
  --secondary-900: #1d9696;
  --accent-100: #6fe193;
  --accent-200: #59df85;
  --accent-300: #43dc77;
  --accent-400: #2dda69;
  --accent-500: #17d75b;
  --accent-600: #18c555;
  --accent-700: #19b34f;
  --accent-800: #1aa04a;
  --accent-900: #1b8e44;
  --warning-100: #ee91dd;
  --warning-200: #ed81db;
  --warning-300: #ec71d9;
  --warning-400: #eb61d7;
  --warning-500: #ea51d5;
  --warning-600: #d64cc3;
  --warning-700: #c247b1;
  --warning-800: #ae439f;
  --warning-900: #9a3e8d;
  --danger-100: #8c89b1;
  --danger-200: #7a78a8;
  --danger-300: #69669e;
  --danger-400: #575595;
  --danger-500: #46448c;
  --danger-600: #424181;
  --danger-700: #3f3d77;
  --danger-800: #3b3a6c;
  --danger-900: #373661;
  --success-100: #62b570;
  --success-200: #49ab5c;
  --success-300: #31a148;
  --success-400: #189734;
  --success-500: #008d20;
  --success-600: #038220;
  --success-700: #077720;
  --success-800: #0a6d20;
  --success-900: #0d6220;
  --discord-100: #969dee;
  --discord-200: #878fef;
  --discord-300: #7781f0;
  --discord-400: #6873f1;
  --discord-500: #5865f2;
  --discord-600: #535edd;
  --discord-700: #4d57c8;
  --discord-800: #4851b3;
  --discord-900: #424a9e;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
  --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
}

.deuteranopia-theme {
  --primary-100: #628589;
  --primary-200: #497379;
  --primary-300: #31626a;
  --primary-400: #18505a;
  --primary-500: #003e4a;
  --primary-600: #033b46;
  --primary-700: #073842;
  --primary-800: #0a353e;
  --primary-900: #0d323a;
  --secondary-100: #c3dfe3;
  --secondary-200: #bbdce2;
  --secondary-300: #b3dae1;
  --secondary-400: #abd7e0;
  --secondary-500: #a3d4df;
  --secondary-600: #96c2cc;
  --secondary-700: #89b0b9;
  --secondary-800: #7c9ea6;
  --secondary-900: #6f8c93;
  --accent-100: #b7e173;
  --accent-200: #addf60;
  --accent-300: #a3dc4c;
  --accent-400: #99da39;
  --accent-500: #8fd725;
  --accent-600: #84c525;
  --accent-700: #79b324;
  --accent-800: #6ea024;
  --accent-900: #638e23;
  --warning-100: #bed97a;
  --warning-200: #b5d568;
  --warning-300: #acd256;
  --warning-400: #a3ce43;
  --warning-500: #9aca31;
  --warning-600: #8eb92f;
  --warning-700: #82a82e;
  --warning-800: #76972c;
  --warning-900: #6a862b;
  --danger-100: #fbf75d;
  --danger-200: #fcf846;
  --danger-300: #fdf92e;
  --danger-400: #fefa17;
  --danger-500: #fffb00;
  --danger-600: #e9e503;
  --danger-700: #d3cf07;
  --danger-800: #bcba0a;
  --danger-900: #a6a40d;
  --success-100: #62b570;
  --success-200: #49ab5c;
  --success-300: #31a148;
  --success-400: #189734;
  --success-500: #008d20;
  --success-600: #038220;
  --success-700: #077720;
  --success-800: #0a6d20;
  --success-900: #0d6220;
  --discord-100: #969dee;
  --discord-200: #878fef;
  --discord-300: #7781f0;
  --discord-400: #6873f1;
  --discord-500: #5865f2;
  --discord-600: #535edd;
  --discord-700: #4d57c8;
  --discord-800: #4851b3;
  --discord-900: #424a9e;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
  --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
}
.deuteranopia-theme .button.button--danger svg {
  stroke: var(--primary-500);
  stroke-width: 50px;
}

.tritanopia-theme {
  --primary-100: #8680b2;
  --primary-200: #736ea9;
  --primary-300: #615ba0;
  --primary-400: #4e4997;
  --primary-500: #3c368e;
  --primary-600: #393483;
  --primary-700: #373278;
  --primary-800: #34306d;
  --primary-900: #312e62;
  --secondary-100: #dedce2;
  --secondary-200: #dad8e1;
  --secondary-300: #d6d5e0;
  --secondary-400: #d3d1df;
  --secondary-500: #cfcede;
  --secondary-600: #bebdcb;
  --secondary-700: #acabb8;
  --secondary-800: #9b9aa5;
  --secondary-900: #898992;
  --accent-100: #f1bdb9;
  --accent-200: #f1b5b1;
  --accent-300: #f0aca9;
  --accent-400: #f0a4a1;
  --accent-500: #ef9b99;
  --accent-600: #da8f8d;
  --accent-700: #c68381;
  --accent-800: #b17675;
  --accent-900: #9d6a69;
  --warning-100: #e9a687;
  --warning-200: #e79a77;
  --warning-300: #e68e66;
  --warning-400: #e48156;
  --warning-500: #e27546;
  --warning-600: #cf6d42;
  --warning-700: #bb643f;
  --warning-800: #a85c3b;
  --warning-900: #955337;
  --danger-100: #e98a87;
  --danger-200: #e77977;
  --danger-300: #e66866;
  --danger-400: #e45756;
  --danger-500: #e24646;
  --danger-600: #cf4242;
  --danger-700: #bb3f3f;
  --danger-800: #a83b3b;
  --danger-900: #953737;
  --success-100: #76b570;
  --success-200: #61ab5c;
  --success-300: #4ca148;
  --success-400: #379734;
  --success-500: #228d20;
  --success-600: #228220;
  --success-700: #227720;
  --success-800: #226d20;
  --success-900: #226220;
  --discord-100: #969dee;
  --discord-200: #878fef;
  --discord-300: #7781f0;
  --discord-400: #6873f1;
  --discord-500: #5865f2;
  --discord-600: #535edd;
  --discord-700: #4d57c8;
  --discord-800: #4851b3;
  --discord-900: #424a9e;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
  --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
}

.paper-yellow-theme {
  --primary-100: #816a3e;
  --primary-200: #715a2e;
  --primary-300: #604a1f;
  --primary-400: #503a0f;
  --primary-500: #402A00;
  --primary-600: #3d2903;
  --primary-700: #3a2807;
  --primary-800: #37270a;
  --primary-900: #34260d;
  --secondary-100: #e2ca9a;
  --secondary-200: #e2ca9a;
  --secondary-300: #e2ca9a;
  --secondary-400: #e2ca9a;
  --secondary-500: #e2ca9a;
  --secondary-600: #cfb98e;
  --secondary-700: #bba882;
  --secondary-800: #a89776;
  --secondary-900: #95866a;
  --accent-100: #e5ad4f;
  --accent-200: #e6a843;
  --accent-300: #e6a436;
  --accent-400: #e79f2a;
  --accent-500: #e79a1d;
  --accent-600: #d38e1d;
  --accent-700: #bf821e;
  --accent-800: #ac761e;
  --accent-900: #986a1f;
  --warning-100: #da9041;
  --warning-200: #d88732;
  --warning-300: #d77d24;
  --warning-400: #d57415;
  --warning-500: #d46a06;
  --warning-600: #c26309;
  --warning-700: #b05b0b;
  --warning-800: #9e540e;
  --warning-900: #8c4d11;
  --danger-100: #a5694b;
  --danger-200: #9b593e;
  --danger-300: #904831;
  --danger-400: #863824;
  --danger-500: #7c2817;
  --danger-600: #732718;
  --danger-700: #6a2719;
  --danger-800: #61261a;
  --danger-900: #58251b;
  --success-100: #9b9b4b;
  --success-200: #8f933e;
  --success-300: #838c30;
  --success-400: #778423;
  --success-500: #6b7c16;
  --success-600: #647317;
  --success-700: #5c6a18;
  --success-800: #556119;
  --success-900: #4d581a;
  --discord-100: #8f8dcf;
  --discord-200: #8183d8;
  --discord-300: #7479e0;
  --discord-400: #666fe9;
  --discord-500: #5865f2;
  --discord-600: #535edd;
  --discord-700: #4d57c8;
  --discord-800: #4851b3;
  --discord-900: #424a9e;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
  --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
}

.high-contrast-theme {
  --primary-100: #7c858d;
  --primary-200: #68737e;
  --primary-300: #54626e;
  --primary-400: #40505f;
  --primary-500: #2C3E50;
  --primary-600: #2b3b4b;
  --primary-700: #2a3847;
  --primary-800: #293542;
  --primary-900: #28323d;
  --secondary-100: #f4f0e8;
  --secondary-200: #f4f0e8;
  --secondary-300: #f4f0e8;
  --secondary-400: #f4f0e8;
  --secondary-500: #f4f0e8;
  --secondary-600: #dfdbd4;
  --secondary-700: #cac7c0;
  --secondary-800: #b5b2ac;
  --secondary-900: #a09d98;
  --accent-100: #fbe15d;
  --accent-200: #fcdf46;
  --accent-300: #fddc2e;
  --accent-400: #feda17;
  --accent-500: #FFD700;
  --accent-600: #e9c503;
  --accent-700: #d3b307;
  --accent-800: #bca00a;
  --accent-900: #a68e0d;
  --warning-100: #998db0;
  --warning-200: #8a7da6;
  --warning-300: #7a6c9d;
  --warning-400: #6b5c93;
  --warning-500: #5C4B8A;
  --warning-600: #564780;
  --warning-700: #504375;
  --warning-800: #4a3e6b;
  --warning-900: #443a60;
  --danger-100: #fb605d;
  --danger-200: #fc4846;
  --danger-300: #fd302e;
  --danger-400: #fe1817;
  --danger-500: #FF0000;
  --danger-600: #e90303;
  --danger-700: #d30707;
  --danger-800: #bc0a0a;
  --danger-900: #a60d0d;
  --success-100: #d4f95d;
  --success-200: #cffb46;
  --success-300: #cafc2e;
  --success-400: #c4fe17;
  --success-500: #BFFF00;
  --success-600: #afe903;
  --success-700: #9fd307;
  --success-800: #90bc0a;
  --success-900: #80a60d;
  --discord-100: #969dee;
  --discord-200: #878fef;
  --discord-300: #7781f0;
  --discord-400: #6873f1;
  --discord-500: #5865f2;
  --discord-600: #535edd;
  --discord-700: #4d57c8;
  --discord-800: #4851b3;
  --discord-900: #424a9e;
  --light-100: #f6f3ed;
  --light-200: #f6f2eb;
  --light-300: #f5f2ea;
  --light-400: #f5f1e9;
  --light-500: #f4f0e8;
  --light-600: #ece6d8;
  --light-700: #e5dbc8;
  --light-800: #ddd1b8;
  --light-900: #d5c6a8;
  --dark-100: #4d4d4d;
  --dark-200: #424242;
  --dark-300: #373737;
  --dark-400: #2c2c2c;
  --dark-500: #212121;
  --dark-600: #1f1f1f;
  --dark-700: #1e1e1e;
  --dark-800: #1c1c1c;
  --dark-900: #1a1a1a;
  --border-subtle: color-mix(in srgb, var(--light-500), transparent 75%);
}

.lora * {
  font-family: "Lora", serif;
}

.paquito * {
  font-family: "Paquito", sans-serif;
}

.open-dyslexic * {
  font-family: "OpenDyslexic", sans-serif;
}

.luciole * {
  font-family: "Luciole", sans-serif;
}

.no-mask * {
  mask: none !important;
}

/*# sourceMappingURL=app-7d1043473d.output.css.map */