@charset "UTF-8";@keyframes astroFadeInOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes astroFadeIn {
	from {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroFadeOut {
	from {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroSlideFromRight {
	from {
		transform: translateX(100%);
	}
}

@keyframes astroSlideFromLeft {
	from {
		transform: translateX(-100%);
	}
}

@keyframes astroSlideToRight {
	to {
		transform: translateX(100%);
	}
}

@keyframes astroSlideToLeft {
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	[data-astro-transition-scope] {
		animation: none !important;
	}
}
/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

* {
  box-sizing: border-box;
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  /*line-height: 1.15;  */
  margin: 0; /* 2 */
  box-sizing: border-box;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  appearance: button;
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  appearance: textfield; /* 1 */
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
@font-face {
  font-family: "Satoshi-Variable";
  src:
    url("/fonts/Satoshi-Variable.woff2") format("woff2"),
    url("/fonts/Satoshi-Variable.woff") format("woff"),
    url("/fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

html {
  font-size: calc(0.75rem + 0.41666666666666663vw);
}

@media screen and (max-width: 1920px) {
  html {
    font-size: calc(0.75rem + 0.41666666666666674vw);
  }
}

@media screen and (max-width: 1440px) {
  html {
    font-size: calc(0.8571428571428572rem + 0.2976190476190476vw);
  }
}

@media screen and (max-width: 800px) {
  html {
    font-size: calc(0.9998370273794003rem + 0.2607561929595828vw);
  }
}

a:any-link:not(.fc1, .fc2, .fc3, .disabled) {
  text-decoration: none;
  color: inherit;
}

a {
  cursor: pointer;
}

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

.mardown ol,
.markdown ul {
  max-width: 37.5rem;
}

.markdown ul li::before {
  content: "•";
  color: var(--fc2);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.markdown :is(ol, ul) {
  margin-bottom: 1em;
}

.markdown :is(h1, h2, h3) {
  margin-bottom: 0.5em;
  margin-top: 1em;
}

.markdown p {
  margin-bottom: 1em;
  color: var(--fc2);
}

.markdown ol li {
  list-style: number;
  line-height: 1.5;
  color: var(--fc2);
  margin-left: 1.25em;
  padding-left: 0.5em;
  margin-bottom: 0.5em;
}

.markdown a {
  color: var(--fc3) !important;
  text-decoration: underline !important;
}

[data-page="Terms of Use"] .markdown ol li {
  list-style: lower-alpha;
}

.markdown ul li {
  list-style: none !important;
  line-height: 1.5;
  color: var(--fc2);
  margin-left: 1em;
  padding-left: 0.5em;
  margin-bottom: 0.5em;
}

:root {
  --black: #101010;
  --black-transparent: #101010c0;
  --pink: #de0f66;
  --white: #fff;
  --grey: #fffa;
  --fc1: var(--white);
  --fc2: var(--grey);
  --fc3: var(--pink);
  --bg1: var(--black);
  --bg2: #ffffff14;
  --bc1: var(--pink);
  --bc2: var(--grey);
  --bc3: #ffffff33;
  --discord: #5865f2;

  --px: 0.0625rem;
  --s0-125: 0.125rem;
  --s0-25: 0.25rem;
  --s0-375: 0.375rem;
  --s0-5: 0.5rem;
  --s0-625: 0.625rem;
  --s0-75: 0.75rem;
  --s1: 1rem;
  --s1-25: 1.25rem;
  --s1-5: 1.5rem;
  --s2: 2rem;
  --s2-5: 2.5rem;
  --s3: 3rem;
  --s4: 4rem;
  --s5: 5rem;

  --br1: var(--s0-25);
  --br2: var(--s0-5);
  --br3: 100vw;

  --fs-xs: var(--s0-625);
  --fs-s: var(--s0-75);
  --fs-m: var(--s1);
  --fs-ml: var(--s1-5);
  --fs-l: var(--s2);
  --fs-xl: var(--s4);

  --fw-r: 400;
  --fw-m: 500;
  --fw-b: 700;

  --page-padding: clamp(1rem, 3.333vw, 3rem);

  --plyr-color-main: var(--pink);
  --plyr-control-icon-size: var(--s1);
  --plyr-control-spacing: var(--s0-625);
  --plyr-control-padding: var(--s0-375);
  --plyr-control-radius: var(--s0-25);
  --plyr-menu-radius: var(--s0-375);
  --plyr-menu-background: var(--bg1);
  --plyr-badge-background: var(--bg2);
  --plyr-badge-text-color: var(--fc1);
  --plyr-menu-color: var(--fc1);
  --plyr-menu-back-border-color: var(--bc2);
  --plyr-menu-border-color: var(--bc2);
  --plyr-menu-back-border-shadow-color: transparent;
  --plyr-menu-border-shadow-color: transparent;
  --plyr-range-thumb-height: var(--s0-75);

  scrollbar-width: thin;
  scrollbar-color: var(--fc2) var(--bg2);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill::first-line,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
select:-webkit-autofill::first-line,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active textarea:-webkit-autofill::first-line {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px transparent;
  font-family: "Satoshi-Variable", sans-serif;
  background: var(--bg2);
}

/* -------------------------------------------------------------------------- */
/* SECTION                           Global                                   */
/* -------------------------------------------------------------------------- */

body {
  font-family: "Satoshi-Variable", sans-serif;
  background-color: var(--bg1);
  color: var(--fc1);
  font-weight: var(--fw-r);
  caret-color: var(--fc2);
  overscroll-behavior-x: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color-scheme: dark;
  min-height: 100svh;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

header {
  padding-top: var(--s2);
}

button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: inherit;
}

.page-padding {
  padding: 0rem var(--page-padding);
}

.page_wrap {
  max-width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: -5rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow: clip;
  /* max-height: 100svh; */
  position: relative;
}

.t-200 {
  transition: all 200ms;
}

.scroll-wrapper {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--fc2) var(--bg2);
  /* margin-right: calc(var(--s0-75) * -1); */
  padding-right: var(--s0-5);
  transition: max-height 200ms;
}

.expand {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s1);
}

.expand-h {
  width: 100%;
}

.blur-bg,
#sendowl-checkout {
  backdrop-filter: blur(var(--s0-5));
  background-color: var(--black-transparent);
}

#sendowl-checkout {
  animation: sendowlFade 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sendowlFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.error {
  color: var(--pink);
  font-weight: 500;
  background-color: #de0f6633;
  text-align: center;
  padding-block: var(--s0-375);
  padding-inline: var(--s0-75);
  border-radius: var(--br3);
}

.success-message {
  color: #2ecc71;
  font-weight: 500;
  background-color: #2ecc7133;
  text-align: center;
  padding-block: var(--s0-375);
  padding-inline: var(--s0-75);
  border-radius: var(--br3);
}

.sucess-message:empty {
  display: none;
}

/* .success-message:not(:empty):not(:first-child) {
    display: none;
} */

.success-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  align-items: center;
  justify-content: center;
}

.info-message {
  color: var(--fc2);
  font-weight: 500;
  /* background-color: #ffffff33; */
  text-align: center;
  padding: var(--s0-25);
  border-radius: var(--br3);
  display: flex;
  align-items: center;
  gap: var(--s0-5);
  margin: auto;
}

.skeleton {
  animation: pulsing 0.875s infinite;
}

@keyframes pulsing {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.popover,
.zammad-form-modal-body {
  background-color: var(--black) !important;
  max-width: calc(100vw - 2 * var(--page-padding));
  max-height: calc(100svh - 4rem);
  height: fit-content;
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--br2);
  border: var(--px) solid var(--bc2);
  color: inherit;
  scrollbar-width: thin;
  overflow: hidden;
  min-height: min(calc(100svh - 4rem), 20rem);
  min-width: min(calc(100svw - 2 * var(--page-padding)), 20rem);
  /* display: flex;
    flex-direction: column; */
}

.popover:popover-open,
.popover[open] {
  display: flex;
  flex-direction: column;
}

.popover-content {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: min(25rem, 100%);
  height: min(25rem, 100%);
  max-height: 100%;
  padding-inline: var(--page-padding);
  padding-bottom: max(var(--s1-5), var(--page-padding));
  padding-top: max(var(--s3), var(--page-padding));
  overflow: auto;
  scrollbar-width: thin;
  min-height: min(100%, 20rem);
}

/* Upgrade modal specific styling */
.popover.upgrade-modal {
  justify-content: center;
  align-items: center;
}

.popover.upgrade-modal .popover-content {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.popover.upgrade-modal .upgrade-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
}

.popover.upgrade-modal .upgrade-modal-buttons {
  display: flex;
  flex-direction: row;
  column-gap: var(--s1);
  row-gap: var(--s0-5);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.popover.upgrade-modal .upgrade-modal-content .btn {
  margin-right: 0;
}

.popover > .btn.is-round {
  aspect-ratio: 1/1;
  padding: var(--s0-5);
  border-radius: 50%;
  position: absolute;
  top: var(--s1);
  right: var(--s1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.popover::backdrop,
.zammad-form-modal-backdrop {
  /* background: transparent; */
  opacity: 1;
  background-color: var(--black-transparent) !important;
  animation: fadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  backdrop-filter: blur(var(--s0-25));
}

.form-group.zammad-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
}

.form-group.zammad-form-group label {
  color: var(--fc1) !important;
}

.zammad-form h2 {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

body:has(:popover-open) {
  overflow: hidden;
}

.loader.opacity-0 {
  opacity: 0;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: var(--s2);
  padding: var(--s0-5);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
  margin: auto;
}
@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}

.loader.small {
  width: var(--s1);
  height: var(--s1);
  padding: var(--s0-125);
  margin: 0;
}

.loader.small.selected {
  width: var(--s1-25);
  height: var(--s1-25);
}

.form-wrapper form {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
  max-width: 40rem;
  margin: auto;
  padding-block: var(--s1-5);
}

#popover-content .form-wrapper {
  max-width: 18.5rem;
}

#popover-content .signup_wrapper {
  display: flex;
  border: 0px solid transparent;
  padding: 0;
  gap: var(--s0-5);
  margin-left: -0.25rem;
  align-items: center;
}

/* body:has(.htmx-request) {
    cursor: wait;
} */

.outline-container {
  outline: 2px solid var(--bg2);
  outline-offset: calc(var(--px) * -1);
  padding: var(--s1-5);
  border-radius: var(--br2);
}

.opacity-0 {
  opacity: 0;
}

[hx-indicator] .loader {
  display: none;
}

[hx-indicator] .loader.htmx-request {
  display: block;
}

/*  ANCHOR ------------  Buttons  ------------  */

.btn {
  padding: var(--s0-375) var(--s0-75);
  border-radius: var(--br3);
  outline: var(--px) solid var(--bc1);
  outline-offset: calc(var(--px) * -1);
  text-transform: uppercase;
  /* background-color: transparent; */
  background-color: var(--pink);
  color: var(--fc1);
  line-height: 100%;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: var(--s0-25);
  font-weight: var(--fw-m);
  transition: all 200ms;
  overflow: hidden;
  text-decoration: none;
}

@media (pointer: fine) {
  .btn:not(.btn-text):focus-visible,
  .nav_link.is-cta:focus-visible {
    box-shadow: 0 0 0.25rem var(--pink);
  }
  .btn:hover,
  .nav_link.is-cta:hover,
  .btn:focus-visible,
  .nav_link.is-cta:focus-visible {
    background-color: #de0f6633;
  }

  .btn:hover {
    scale: 1.05;
  }
}

.btn-icon-left {
  padding-left: var(--s0-625);
}

.btn-icon-right {
  padding-right: var(--s0-625);
}

.btn-icon {
  padding: var(--s0-375);
  aspect-ratio: 1/1;
}

.is-heart svg path {
  transition: all 200ms;
}
.is-heart:is(:hover, :focus-visible) svg path {
  fill: var(--pink);
}

.btn-secondary {
  outline-color: var(--bc2);
  background-color: transparent;
}

.btn-secondary:hover {
  background-color: var(--bg2);
}

.btn-secondary.selected {
  background-color: var(--pink);
  color: var(--fc1) !important;
  outline-color: var(--pink);
}

.btn-secondary.selected:hover {
  background-color: #de0f6633;
}

.btn-text {
  background-color: transparent;
  outline: none;
  padding-left: var(--s1);
  padding-right: var(--s1);
  margin-left: calc(var(--s0-5) * -1);
  margin-right: calc(var(--s0-5) * -1);
  /* border-radius: 0; */
}

.btn-text.fs-s {
  padding-left: var(--s0-5);
  padding-right: var(--s0-5);
}

@media (pointer: fine) {
  .btn-text.fc2:hover,
  .btn-text.fc2:focus-visible {
    color: var(--fc1);
  }

  .btn-text:focus-visible,
  .btn-text:hover {
    box-shadow: none;
    background-color: var(--bg2);
  }

  .btn-text.is-discord:hover,
  .btn-text.is-discord:focus-visible {
    background-color: #5865f233;
  }
}

.btn-small {
  font-size: var(--fs-s);
}

.btn.disabled {
  color: var(--fc2);
  /* cursor: not-allowed; */
}

.btn-arrow,
.btn-plus {
  padding-right: var(--s0-5);
  padding-left: var(--s0-75);
  overflow: hidden;
}

.btn-plus {
  margin-left: 0;
}

.btn_group {
  display: flex;
  gap: var(--s1);
  align-items: start;
  justify-content: start;
}

.btn_group.align-end {
  align-items: end;
}

.btn_group .btn {
  margin-right: 0;
}

.btn_group.divide {
  align-items: center;
  justify-content: center;
}

form .btn_group.divide {
  padding-top: var(--s0-5);
}

.btn_group.divide > #submit {
  flex: 1;
}

.btn_group.divide > *:not(span) {
  align-items: center;
  justify-content: center;
}

/*  ANCHOR ------------  Typography  ------------  */

/*
 * Use body-qualified heading selectors so these beat normalize.css
 * `h1 { font-size: 2em }` even if ClientRouter reorders <head> sheets
 * (equal-specificity source-order race left video titles at 2em after SPA nav).
 */
body h1,
.fs-xl {
  font-size: var(--fs-xl);
  font-weight: var(--fw-b);
  text-transform: uppercase;
}

body h2,
.fs-l {
  font-size: var(--fs-l);
  font-weight: var(--fw-r);
  margin: 0;
}

.fs-ml {
  font-size: var(--fs-ml);
  font-weight: var(--fw-r);
  margin: 0;
}

body h3,
.fs-m {
  font-size: var(--fs-m);
  font-weight: var(--fw-m);
  margin: 0;
}

body h1,
body h2,
.fs-xl,
.fs-l {
  letter-spacing: -0.02em;
  line-height: 115%;
  margin: 0;
  text-wrap: balance;
}

p,
.fs-r {
  font-size: var(--fs-r);
  font-weight: var(--fw-r);
  line-height: 150%;
  margin: 0;
  margin-bottom: var(--s0-75);
  max-width: 37.5rem;
}

p strong {
  font-weight: var(--fw-b);
  color: var(--fc1);
  font-size: var(--fs-s);
  text-transform: uppercase;
}

.fs-s {
  font-size: var(--fs-s);
  letter-spacing: 0.02em;
}

.fs-xs {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

.tt-u {
  text-transform: uppercase;
}

.tt-i {
  font-style: italic;
}

.tt-none {
  text-transform: none;
  font-style: normal;
}

.fc1 {
  color: var(--fc1);
}

.fc2,
.fc2 p {
  color: var(--fc2);
}

.fc3 {
  color: var(--fc3);
}

.fw-r {
  font-weight: var(--fw-r);
}

.fw-m {
  font-weight: var(--fw-m);
}

.fw-b {
  font-weight: var(--fw-b);
}

.lh100 {
  line-height: 100%;
}

.lh150 {
  line-height: 150%;
}

/*  ANCHOR ------------  Layout  ------------  */

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center > .btn {
  margin-right: 0;
}

.flex-h-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-c {
  display: flex;
  flex-direction: column;
}

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

.gp-xs {
  gap: var(--s0-5);
}

.gp-xms {
  gap: var(--s0-625);
}

.gp-s {
  gap: var(--s0-75);
}

.gp-m {
  gap: var(--s1);
}

.gp-l {
  gap: var(--s1-5);
}

.gp-xl {
  gap: var(--s3);
}

.pd1 {
  padding: var(--s1);
}

.pb1 {
  padding-bottom: var(--s1);
}

.pt0-5 {
  padding-top: var(--s0-25);
}

.pb0-5 {
  padding-bottom: var(--s0-25);
}

.pt0-625 {
  padding-top: var(--s0-625);
}

.pb0-625 {
  padding-bottom: var(--s0-625);
}

.pb0-75 {
  padding-bottom: var(--s0-75);
}

.pb1-5 {
  padding-bottom: var(--s1-5);
}

/*  ------------  Colors & Styling  ------------  */

.bg1 {
  background-color: var(--bg1);
}

.bg2 {
  background-color: var(--bg2);
}

.bg-pink {
  background-color: var(--pink);
}

.br1 {
  border-radius: var(--br1);
}

.br2 {
  border-radius: var(--br2);
}

/* !SECTION */
/* -------------------------------------------------------------------------- */
/* ANCHOR                              Nav                                    */
/* -------------------------------------------------------------------------- */

.nav_component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s1-25) var(--page-padding) 0rem var(--page-padding);
  position: relative;
  z-index: 9999;
}

.nav_toggle,
.nav_menu_overlay {
  display: none;
}

.nav_floating {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.nav_top {
  display: flex;
  padding: var(--s0-25);
  padding-left: var(--s0-5);
  background-color: var(--bg2);
  border-radius: var(--br1);
}

.nav_bottom {
  display: flex;
  gap: var(--s1);
  padding-top: var(--s0-75);
  padding-right: calc(var(--s0-25) + 1px);
  color: var(--fc2);
}

.nav_brand {
  width: 7.625rem;
  min-width: 7.625rem;
  height: 2.5rem;
}

.nav_link {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  line-height: 100%;
  font-weight: var(--fw-m);
  padding-left: var(--s0-5);
  padding-right: var(--s0-5);
  transition: all 200ms;
}

.nav_link:current {
  color: var(--fc3);
}

.is-discord {
  color: var(--discord) !important;
  gap: var(--s0-25);
}

.is-discord img {
  height: var(--s0-625);
  width: auto;
}

.nav_link.is-cta {
  padding: var(--s0-375) var(--s0-75);
  border-radius: var(--br3);
  outline: var(--px) solid var(--bc1);
  outline-offset: calc(var(--px) * -1);
  margin-left: var(--s0-25);
  background-color: var(--pink);
}

.nav_link.is-secondary {
  outline: none;
  margin-left: var(--s0-25);
  background-color: transparent;
}

.nav_link.is-profile {
  text-transform: none;
  display: flex;
  gap: var(--s0-25);
  align-items: center;
  padding-inline: var(--s0-5);
}

@media (pointer: fine) {
  .nav_link.is-secondary:hover,
  .nav_link.is-secondary:focus-visible {
    background-color: var(--bg2);
  }

  .nav_component:has(.nav_link:hover):not(:has(.signup_wrapper:hover))
    .nav_link:not(.nav_link:hover, .signup_wrapper .nav_link) {
    opacity: 0.4;
  }
}

.nav_link_small {
  transition: all 200ms;
}
.nav_link_small:hover {
  color: var(--fc1) !important;
}

.pink_gradient {
  /* background-color: var(--pink);
    filter: blur(calc(25vw)); */
  background-image: radial-gradient(
    closest-side,
    var(--pink) 0%,
    var(--pink) 50%,
    transparent 100%
  );
  /* width: calc(50rem + 50vw);
    height: calc(40rem + 33vw); */
  width: max(150vw, 50rem);
  height: max(69vw, 22rem);
  /* aspect-ratio: 1/1; */
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0%;
  transform: translateX(-50%) translateY(-80%);
  opacity: 0.5;
  /* max-width: 100vw; */
}

.gradient_wrapper {
  width: 100%;
  height: 0px;
  overflow: hidden;
  display: flex;
  position: absolute;
  top: 0;
  height: max(69vw, 22rem);
  max-height: 100%;
}

#noise,
#noise-overlay {
  position: fixed;
  height: 100vh;
  width: 100%;
  inset: 0;
  z-index: -2;
  opacity: 0.15;
  mix-blend-mode: overlay;
}

.signup_wrapper {
  margin-left: var(--s0-5);
  border-left: var(--px) solid var(--bc3);
}

/* -------------------------------------------------------------------------- */
/* ANCHOR                            Footer                                   */
/* -------------------------------------------------------------------------- */

.footer_component {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s3);
  background-color: #0009;
  border-top: var(--px) solid var(--bg2);
  position: relative;
  z-index: 9;
}

.footer_component .nav_brand {
  display: block;
}

.footer_layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--s1);
  max-width: 70rem;
  margin: auto;
}

.footer_layout:first-of-type {
  padding-bottom: var(--s3);
}

.footer_list {
  padding-left: var(--s1);
  border-left: var(--px) solid var(--bc3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer_bottom {
  padding-block: var(--s0-5);
  border-top: var(--px) solid var(--bg2);
  /* background-color: var(--black); */
}

.footer_list .footer_link,
.footer_column h3 {
  display: flex;
  padding: var(--s0-375) 0;
}

.footer_column h3 {
  padding-bottom: var(--s1-5);
}

.footer_link {
  transition: all 200ms;
  margin-right: auto;
}

.footer_link:hover {
  color: var(--white) !important;
}

/* -------------------------------------------------------------------------- */
/* ANCHOR                            Player                                   */
/* -------------------------------------------------------------------------- */

.player_layout {
  display: grid;
  grid-template-columns: 2fr minmax(22rem, 1fr);
  gap: var(--s2-5);
  row-gap: var(--s1);
  position: relative;
}

.player_wrapper {
  position: relative;
  grid-column-start: 1;
  grid-column-end: 1;
}

.video_wrapper {
  display: flex;
}

.player_wrapper > *:first-child {
  aspect-ratio: var(--ratio);
}

#player {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ratio);
}

.plyr {
  overflow: hidden;
  border-radius: var(--br1);
}

.plyr--video {
  min-width: 100%;
}

.plyr__poster {
  background-size: cover;
}

[data-plyr="fullscreen"] {
  display: flex !important;
  visibility: visible !important;
}

#overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  aspect-ratio: var(--ratio);
  pointer-events: none;
  margin-block: auto;
}

.double-tap-rewind,
.double-tap-forward {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: auto;
  flex-direction: column;
}

.double-tap-rewind {
  left: 0;
  background-image: radial-gradient(
    circle at -80% center,
    rgba(125, 125, 125, 0.4) 90%,
    transparent 90.25%
  );
  padding-right: 2%;
}

.double-tap-forward {
  right: 0;
  background-image: radial-gradient(
    circle at + 180% center,
    rgba(125, 125, 125, 0.4) 90%,
    transparent 90.25%
  );
  padding-left: 2%;
}

#performers::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, #0009, transparent);
  opacity: 0;
  transition: all 200ms;
}

#performers.paused:has(.timestamp_wrapper)::before {
  opacity: 1;
}

#performers.paused.hidden:has(.timestamp_wrapper)::before {
  opacity: 0;
}

#performers {
  display: flex;
  /* grid-template-columns: 1fr 1fr 1fr; */
  gap: var(--s0-25);
  justify-content: space-around;
  align-items: start;
  padding-inline: var(--s1);
  transition: all 200ms;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.plyr:has(.timestamp_wrapper) .plyr__control--overlaid[data-plyr="play"] {
  visibility: hidden;
}

#performers .timestamp_wrapper {
  display: grid;
  gap: var(--s0-375);
  padding-bottom: var(--s0-25);
  align-items: center;
  flex-direction: column;
  justify-items: center;
  pointer-events: auto;
  width: auto;
  background-color: #fff3;
  color: #000;
  border-radius: var(--br1);
  backdrop-filter: blur(var(--s0-5));
  transition: all 200ms;
  overflow: hidden;
  top: 0.125rem;
  position: relative;
  transform: translateY(0);
  text-wrap: nowrap;
  opacity: 1;
  scale: 0.8;
}

.timestamp_wrapper .fc2 {
  display: none;
}

#performers.paused .timestamp_wrapper {
  opacity: 1;
  scale: 1;
  top: 1rem;
  background-color: #000b;
  color: var(--fc1);
  width: 8.25rem;
  /* transform: translateY(50%); */
}

#performers.hidden .timestamp_wrapper {
  transform: translateY(-100%);
  opacity: 0;
}

#performers.paused .timestamp_wrapper .fc2 {
  display: unset;
}

.timestamp_wrapper {
  cursor: pointer;
}

#performers .timestamp_img {
  height: 0rem;
  transition: all 200ms;
  opacity: 0;
}

#performers.paused .timestamp_img {
  height: 8.25rem;
  opacity: 1;
  transition: all 200ms;
}
/* 
#overlay:has(.timestamp_img:hover) .timestamp_wrapper {
    opacity: 0.2;
}

.timestamp_wrapper:has(.timestamp_img:hover) {
    opacity: 0 !important;
    cursor: none
}

#overlay:has(.timestamp_img:hover) #performers::before {
    opacity: 0;

} */

.unknown_cta button {
  line-height: 1;
}

#performers:not(.paused) .btn,
#performers:not(.paused) .unknown_cta {
  display: none;
}

#performers .timestamp_wrapper[data-position="left"] {
  grid-column: 1 / 1;
}

#performers .timestamp_wrapper[data-position="middle"] {
  grid-column: 2 / 2;
}

#performers .timestamp_wrapper[data-position="right"] {
  grid-column: 3 / 3;
}

/* Spacer for a lone left/right card. VO excluded in astro-fixes.css. */
#performers:not(:has(.timestamp_wrapper:nth-child(2))):not(
    :has(.timestamp_wrapper[data-position="middle"])
  ):not(:has(.timestamp_wrapper[data-position="vo"]))::after {
  content: "";
  order: 2;
  width: 8.25rem;
}

#performers .timestamp_wrapper .btn {
  padding: var(--s0-25) var(--s0-5);
}

#performers .timestamp_wrapper .btn:not(:hover) {
  color: var(--fc2);
}

.timestamp_info {
  display: flex;
  gap: var(--s0-5);
  align-items: center;
  justify-content: center;
  padding-inline: var(--s0-375);
  max-width: min(8.25rem, 30vw);
}

#performers .timestamp_info > * {
  /* display: -webkit-box; */
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.performer_card .timestamp_info {
  max-width: none;
}

.creator_info {
  display: grid;
  gap: var(--s1-5);
  grid-template-columns: 1fr 1fr;
}

.creator_link {
  transition: all 200ms;
  align-items: center;
}

.unknown_cta {
  display: flex;
  gap: 0.75rem;
  font-weight: var(--fw-m);
}

@media (pointer: fine) {
  .creator_link:hover {
    /* opacity: 0.6; */
    transform: translateX(0.25rem);
  }

  .creator_link:hover:not(.fc2),
  .creator_link:hover *:not(.fc2) {
    color: var(--fc3);
  }
}

.creator_portrait {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--bg2);
}

.album_art {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--bg2);
}

#image-preview {
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  /* max-width: 2.5rem; */
  margin-right: var(--s0-5);
  border-radius: var(--br1);
}

#image {
  width: 100%;
}

#image-preview[src="none"] {
  display: none;
}

.image-input_wrapper {
  display: grid;
  gap: 0px;
  align-items: center;
  grid-template-columns: auto 1fr;
}

.image-input_wrapper:has(#image-preview[src="none"]) {
  grid-template-columns: 1fr;
}

.video_info_wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
}

.video_info_wrapper .scroll-wrapper {
  position: absolute;
  inset: 0;
  bottom: 2.375rem;
}

/* Prevent flash of content before GSAP animation on video page */
#current-video .heading_wrapper {
  overflow: hidden;
}

#current-video .heading_wrapper h1,
#current-video .heading_wrapper .subheading {
  opacity: 0;
}

#current-video .video_info_wrapper .scroll-wrapper {
  opacity: 0;
  transform: translateY(1rem);
}

#current-video .video_info_wrapper .btn_group {
  opacity: 0;
}

#current-video .player_wrapper {
  opacity: 0;
}
.show_more_wrapper {
  max-width: 40rem;
  display: flex;
  gap: var(--s0-5);
  align-items: center;
  justify-content: space-between;
}

.show_more_divider {
  flex: 1;
  height: var(--px);
  background-color: var(--bg2);
  margin-bottom: var(--s0-375);
}

.video_description {
  overflow: hidden;
  /* -webkit-line-clamp: 3; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* min-height: 4lh; */
  flex-shrink: 0;
  margin-bottom: 0;
}

.show_more {
  margin: auto;
  margin-top: -0.5rem;
  margin-bottom: 0rem;
  transition:
    all 0s,
    background-color 200ms,
    color 200ms;
  text-wrap: nowrap;
}

.song_link {
  align-items: center;
}

.song_link.playing {
  color: var(--pink) !important;
}

.song_link.playing img {
  animation: rotating 4s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.video_tags {
  display: flex;
  gap: var(--s0-5);
  flex-wrap: wrap;
}

.video_tag {
  cursor: pointer;
  outline: none;
  margin-right: 0;
  padding: var(--s0-25) var(--s0-5);
}

.video_info_wrapper .btn_group.align-end {
  justify-content: flex-end;
}

@media (pointer: fine) {
  .video_tag:hover,
  .video_tag:focus-visible {
    background-color: #0c0c0cc0;
  }
}

.tag_circle {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--pink);
}

#ambient-bg {
  position: absolute;
  width: 100%;
  height: auto;
  max-height: 100%;
  filter: blur(4rem);
  -webkit-filter: blur(4rem);
  z-index: 0;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  mix-blend-mode: screen;
  opacity: 0.3;
  transition: opacity 5s;
  aspect-ratio: var(--ratio);
}

.player_layout:not(:has(.plyr--paused)) #ambient-bg {
  opacity: 1;
}

.video_controls {
  display: flex;
  gap: var(--s0-5);
  align-items: center;
  padding-top: var(--s1);
  position: relative;
  z-index: 99;
  /* overflow-x: scroll; */
  scrollbar-width: none;
  /* transition: height 200ms, padding 200ms; */
}

#current-video:has(.countdown) .video_controls {
  opacity: 0;
  height: 0;
  padding: 0;
  pointer-events: none;
}

.ctrl-button {
  background-color: var(--bg2);
  outline: none;
  margin-right: 0;
}

.ctrl-button.active,
.ctrl-button.active + #loop-options {
  background-color: var(--white);
  color: var(--black);
}

@media (pointer: fine) {
  .ctrl-button:hover,
  .ctrl-button:focus-visible {
    background-color: #ffffff33;
  }

  .ctrl-button.active:hover,
  .ctrl-button.active:focus-visible {
    opacity: 0.85;
  }

  .ctrl-button:not(.btn-toggle).active:hover,
  .ctrl-button:not(.btn-toggle).active:focus-visible {
    background-color: var(--white);
  }

  .ctrl-button.active + #loop-options:hover,
  .ctrl-button.active + #loop-options:focus-visible {
    opacity: 0.85 !important;
  }
}

.loop_buttons {
  position: relative;
}

#loop-btn:is([data-loop="loop"], [data-loop="none"]) svg:not(.loop-single) {
  display: none;
}
#loop-btn[data-loop="a-b"] svg:not(.loop-a-b) {
  display: none;
}
#loop-btn[data-loop="list"] svg:not(.loop-list) {
  display: none;
}
#loop-btn.active {
  border-color: #0004;
}
#loop-btn[data-loop="list"],
#loop-btn[data-loop="list"] + #loop-options {
  background-color: var(--pink);
  color: var(--white);
  border-color: #fff6;
}

#loop-btn {
  border-end-end-radius: 0rem;
  border-top-right-radius: 0rem;
  border-right: var(--px) solid var(--bc3);
}

#loop-options {
  border-top-left-radius: 0rem;
  border-bottom-left-radius: 0rem;
  padding-left: var(--s0-375);
  padding-right: var(--s0-5);
}

#loop-options svg {
  transform: rotate(180deg);
}

#loop-option-list {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: var(--s0-25);
  z-index: 1;
  background-color: #101010c0;
  border-radius: var(--br1);
  padding: var(--s0-375);
  z-index: 99;
  backdrop-filter: blur(var(--s0-5));
  width: calc(100% - 1.25rem);
  height: 0;
  overflow: hidden;
  transform: translateY(0.25rem);
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s0-25);
}

.loop_option {
  display: flex;
  align-items: center;
  gap: var(--s0-5);
  padding: var(--s0-375) var(--s0-5);
  transition: all 200ms;
  font-size: var(--fs-s);
  cursor: pointer;
  border-radius: var(--br1);
}

.loop_option.selected {
  background-color: #ffffff33;
}

@media (pointer: fine) {
  .loop_option:hover,
  .loop_option:focus-visible {
    background-color: var(--bg2);
  }
}

/* .loop_option.selected:hover, .loop_option.selected:focus-visible {
    background-color: var(--white);
    opacity: 0.85;
} */

.plyr__progress__marker.is-loop {
  background-color: var(--white);
  transform: scale(2) translateY(-20%);
  display: flex;
  justify-content: center;
  font-size: 0.375rem;
  transition: all 200ms;
  filter: drop-shadow(0 0 0.25rem var(--black));
}

.plyr__progress__marker.is-loop > span {
  padding-top: 0.25rem;
}

.plyr__progress .plyr__tooltip {
  max-width: 10rem;
  max-height: 10rem;
}

.a-b-wrapper {
  border-right: 1px solid var(--bc3);
  margin-left: calc(var(--s0-5) * -1);
  width: 0;
  overflow: hidden;
  opacity: 0;
  flex-shrink: 0;
}

.a-b-wrapper .btn:first-child {
  margin-left: var(--s0-375);
}
.a-b-wrapper .btn:last-child {
  margin-right: var(--s0-375);
}

.player_wrapper:not(:has([data-loop="a-b"])) .plyr__progress__marker.is-loop {
  opacity: 0;
}

.player_wrapper:has(#marker-a) #a-btn {
  background-color: var(--white);
  color: var(--black);
}

.player_wrapper:has(#marker-b) #b-btn {
  background-color: var(--white);
  color: var(--black);
}

#progress-offlimit {
  position: absolute;
  height: 6px;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border-radius: 1rem;
  background-color: white;
  pointer-events: none;
  visibility: hidden;
}

.btn-toggle {
  height: 1.625rem;
  width: 3.25rem;
  border-radius: var(--br3);
  padding: 0;
}

.btn-toggle .toggle {
  height: 1.625rem;
  width: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  background-color: var(--bg2);
  border-radius: var(--br3);
  margin-right: 1.625rem;
  margin-left: 0rem;
  transition: all 200ms;
}

.btn-toggle.active {
  background-color: var(--bg2);
  color: var(--white);
}

.btn-toggle.active .toggle {
  background-color: var(--white);
  color: var(--black);
  margin-left: 1.625rem;
  margin-right: 0rem;
}

@media (pointer: fine) {
  .btn-toggle:is(:hover, :focus-visible) {
    opacity: 1;
    background-color: #ffffff33;
  }

  .btn-toggle:not(.active) .toggle:is(:hover, :focus-visible) {
    background-color: #ffffff33;
  }
}

#ambient-btn:not(.active) .ambient-on {
  display: none;
}
#ambient-btn.active .ambient-off {
  display: none;
}

.download_wrapper {
  margin-left: auto;
  padding-left: var(--s0-25);
  gap: var(--s0-375);
}

.download_wrapper h3 {
  gap: var(--s0-125);
}

.download_info {
  display: flex;
  gap: var(--s0-5);
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: var(--s1);
  /* padding-inline: var(--s0-375); */
  /* max-width: min(8.25rem, 30vw); */
}

.plyr__badge.fc3 {
  background-color: #de0f66;
  color: #ffffff;
}

.plyr__control[data-pro-resolution="true"] .pro-resolution-text {
  color: #999 !important;
  opacity: 0.7;
}

.ctrl-button.disabled {
  background-color: #ffffff0a;
  /* cursor: not-allowed; */
}

@media (pointer: fine) {
  .ctrl-button.disabled:hover,
  .ctrl-button.disabled:focus-visible {
    background-color: #ffffff0a;
  }
}

.playlist_item_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, #101010cb, #10101057);
  opacity: 1;
  z-index: 1;
  transition: all 200ms;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(var(--s0-25));
  border-radius: var(--br1);
}

.playlist_item_overlay_content {
  display: flex;
  flex-direction: column;
  gap: var(--s0-25);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.countdown {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s1);
  background-color: #0009;
  position: relative;
  border-radius: var(--br2);
  overflow: hidden;
}

.countdown:fullscreen,
.countdown:-webkit-full-screen {
  border-radius: 0;
}

.countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, #101010c0, #10101057);
  z-index: 1;
  border-radius: var(--br2);
  transition: all 200ms;
  backdrop-filter: blur(var(--s0-5));
}

.countdown:fullscreen::before,
.countdown:-webkit-full-screen::before {
  border-radius: 0;
}

.countdown-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 0;
}

#countdown-fullscreen {
  z-index: 2;
  position: absolute;
  inset: 1.5rem;
  left: auto;
  top: auto;
  width: 1.875rem;
  height: 1.875rem;
}

.countdown-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
  z-index: 2;
  text-align: center;
  position: relative;
}

.countdown-inner.is-message {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.countdown-inner.is-message .countdown-text {
  width: min(100%, 36rem);
  margin: 0 auto;
}

.countdown-timer {
  display: inline-flex;
  overflow: hidden;
  font-variant: tabular-nums;
}

.countdown-message {
  margin: 0 auto;
  max-width: 36rem;
  text-align: center;
}

.digit-container {
  position: relative;
  display: inline-block;
  width: 0.875ch; /* Keeps the width stable */
  height: 1em; /* Adjust based on your font-size */
  overflow: hidden;
}

.digit {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateY(0);
}

.digit.next {
  transform: translateY(100%);
}

.colon {
  display: inline-block;
  width: 0.5ch; /* Adjust width for colons */
  text-align: center; /* Center the colon within its span */
}

/* -------------------------------------------------------------------------- */
/* ANCHOR                           Playlist                                  */
/* -------------------------------------------------------------------------- */

.playlist_section {
  margin-top: var(--s1-5);
}

.playlist_wrapper {
  padding: var(--s1-5);
  padding-inline: var(--s0-75);
  padding-top: var(--s0-5);
  grid-column: 1 / -1;
  border-radius: var(--br1);
  overflow: hidden;
  background-color: #0009;
  border: var(--px) solid var(--bg2);
  position: relative;
  /* background-color: var(--bg2); */
}

#playlist {
  /* display: flex;
    gap: var(--s0-5);
    flex-direction: row; */
  margin-top: var(--s0-5);
}

.playlist_item {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
  /* padding: var(--s0-375) var(--s0-5); */
  border-radius: var(--br1);
  transition: all 200ms;
  position: relative;
  z-index: 1;
  /* aspect-ratio: 16/9; */
  aspect-ratio: 15/11;
  overflow: hidden;
  margin-right: var(--s0-75);
  outline: 2px solid transparent;
  /* border: var(--px) solid var(--bg2); */
  box-sizing: content-box;
  width: 100%;
  height: 100%;
}
#playlist .playlist_item {
  aspect-ratio: 15/11.9375;
  width: 15rem;
  height: 11.9375rem;
}

.playlist_item h3 {
  line-clamp: 1;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist_item.skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
}

.playlist_item_preview {
  /* aspect-ratio: 16/9; */
  /* padding-top: 56.25%; */
  position: relative;
  overflow: hidden;
  border-radius: var(--br1);
  flex: 1;
  background-color: var(--bg2);
}

#playlist .playlist_item .playlist_item_preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, #101010b0, #10101000);
  opacity: 0;
  z-index: -1;
  border-radius: var(--br1);
  transition: all 200ms;
}

.playlist_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  border-radius: var(--br1);
  inset: 0;
  transition: all 200ms;
  /* aspect-ratio: 16/9; */
  z-index: 0;
}

.playlist_item .preview_img {
  /* inset: -0.25rem;
    width: calc(100% + 0.5rem);
    height: calc(100% + 0.5rem); */
  opacity: 0;
}

.playlist_item:hover,
#playlist .playlist_item:hover,
#playlist .playlist_item.current {
  /* background-color: #fff; */
  /* outline: 1px solid var(--white);
    outline-offset: -1px; */
  background-color: var(--bg2);
  padding: var(--s0-375);
  height: calc(11.9375rem - 0.75rem);
  width: calc(15rem - 0.75rem);
}

.featured-videos .playlist_item:hover {
  height: calc(100% - 0.75rem);
  width: calc(100% - 0.75rem);
  margin-right: 0.5rem;
  /* margin-bottom: -0.25rem; */
}

.featured-videos:has(.playlist_item:nth-child(2)) .playlist_item:hover {
  margin-bottom: -0.625rem;
}

/* .playlist_item:hover img {
    transform: scale(1.1);
} */

/* #playlist .playlist_item:hover .playlist_item_preview {
    width: calc(100% - var(--s0-75));
} */

.playlist_item.current {
  outline: var(--px) solid var(--pink);
  /* outline-offset: -2px; */
  /* filter: drop-shadow(0px 0px 0.5rem #DE0F66B0); */
}

#playlist.show-options .playlist_item_controls {
  transform: translateY(0);
}

.playlist_item.has-preview:hover .thumbnail_img,
.playlist_item:hover::before {
  opacity: 0;
}
#playlist.show-options .playlist_item_preview::after {
  opacity: 1;
}

.playlist_item.has-preview:hover .preview_img {
  opacity: 1;
  /* scale: 1.1; */
}

.playlist_item_content {
  display: flex;
  flex-direction: column;
  gap: var(--s0-25);
  position: relative;
  z-index: 1;
  transform: translateY(0);
  transition: all 200ms;
}

.flickity-viewport {
  overflow: visible;
}

.playlist_item_controls {
  position: absolute;
  inset: 0;
  top: auto;
  display: flex;
  gap: var(--s0-5);
  padding: var(--s0-375) var(--s0-5);
  z-index: 3;
  transform: translateY(100%);
  transition: all 200ms;
}

.playlist_item_controls > button:nth-child(2) {
  margin-right: auto;
}

.playlist_action {
  display: flex;
  gap: var(--s0-5);
  align-items: center;
  height: 1.625rem;
  min-width: 1.625rem;
  border-radius: var(--br3);
  background-color: var(--black);
  transition: all 150ms;
}

.playlist_action.item_remove {
  background-color: var(--pink);
  color: var(--white);
}

.playlist_action:hover {
  background-color: var(--white);
  color: var(--black);
}

:is(.playlist_item.current + .playlist_item, .playlist_item.current)
  button:is(.playlist_action.item_next, .playlist_action.item_remove) {
  transform: translateX(-2.125rem);
}

:is(.playlist_item.current + .playlist_item, .playlist_item.current)
  button:is(.playlist_action.item_next) {
  opacity: 0;
  pointer-events: none;
}

/* .playlist_item:first-child .playlist_action.item_left {
    opacity: 0;
    pointer-events: none;
}

.playlist_action:last-child :is(.playlist_action.item_left, .playlist_action.item_right) {
    transform: translateX(2.125rem);
}

.playlist_item:last-child .playlist_action.item_right {
    opacity: 0;
    pointer-events: none;
} */

.playlist_controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.playlist_wrapper::after,
.playlist_wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  left: auto;
  width: 3rem;
  background-image: linear-gradient(270deg, #000b, #0000);
  z-index: 1;
  border-radius: var(--br1);
  pointer-events: none;
  transition: all 250ms;
  opacity: 0;
}

.playlist_wrapper::before {
  left: 0;
  right: auto;
  background-image: linear-gradient(90deg, #000c, #0000);
}

.playlist_wrapper.shadow-left::before {
  opacity: 1;
}

.playlist_wrapper.shadow-right::after {
  opacity: 1;
}

.video_duration {
  position: absolute;
  font-size: var(--fs-xs);
  background-color: var(--black-transparent);
  padding: var(--s0-25);
  border-radius: var(--br1);
  line-height: 1;
  z-index: 3;
  bottom: var(--s0-5);
  right: var(--s0-5);
  font-variant: tabular-nums;
  transition: all 200ms;
}

.playlist_item:hover .video_duration,
#playlist.show-options .video_duration {
  opacity: 0;
}

/* -------------------------------------------------------------------------- */
/* ANCHOR                             Auth                                    */
/* -------------------------------------------------------------------------- */

.login_wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s1-5);
  align-items: center;
  padding: var(--s3);
  border-radius: var(--br1);
  align-items: stretch;
  opacity: 0;
  min-width: min(30rem, 100%);
  /* transform: translateY(2rem); */
  /* backdrop-filter: brightness(0.5) blur(0.5rem); */
}

.error-wrapper {
  font-size: var(--fs-s);
  padding-top: var(--s0-5);
}

.error-wrapper:empty {
  display: none;
}

.hx-response {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.hx-response:empty {
  display: none;
}

.login_wrapper.blur-bg {
  backdrop-filter: blur(2rem);
}

.login_wrapper.is-signup {
  min-width: 100%;
}

.input_wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
  width: 100%;
  min-width: 15rem;
}

.login_wrapper form {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  width: 100%;
}

input,
textarea,
select {
  padding: var(--s0-375);
  border-radius: var(--br1);
  background-color: var(--bg2);
  color: var(--fc1);
  border: 0px solid transparent;
  outline: none;
  transition: all 200ms;
  min-height: 1.4375rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hide browser arrows and icons on disabled inputs */
input:disabled::-webkit-inner-spin-button,
input:disabled::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--fc2);
  opacity: 0.5;
}

.input_wrapper:has([required]:not([disabled])) label::after {
  content: "*";
  color: var(--pink);
}

input[type="checkbox"] {
  appearance: none;
  /* background-color: #fff; */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: auto;
  height: auto;
  border: 1px solid currentColor;
  border-radius: var(--br1);
  /* transform: translateY(-0.075em); */
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  max-height: 1rem;
  margin-block: var(--s0-375);
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  border-radius: 1px;
  box-shadow: inset 1em 1em var(--pink);
}

input[type="checkbox"]:disabled::before {
  box-shadow: inset 1em 1em var(--fc2);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

select {
  border-right: var(--s0-5);
}

select option {
  color: var(--black);
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: transparent;
  color: var(--fc1);
  padding: var(--s0-375);
  padding-inline: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[invalid],
.input_wrapper:has(.error) input {
  outline: 1px solid var(--pink);
}

#submit.disabled {
  pointer-events: none;
  opacity: 0.4;
}

input[type="number"] {
  appearance: textfield; /* Firefox */
  -moz-appearance: textfield; /* Firefox */
}

.input_wrapper label {
  font-size: var(--fs-s);
  font-weight: var(--fw-m);
  color: var(--fc2);
}

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

.checkbox_wrapper {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 1rem;
  line-height: 1;
  align-items: center;
}

.help-icon {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  color: var(--fc2);
  transition: all 200ms;
}

.help-icon:hover {
  transform: scale(1.1);
  color: white;
}

.login_background {
  display: flex;
  /* grid-template-columns: 1fr 1.25fr; */
  /* right to left order using text direction */
  width: 100%;
  max-width: 45rem;
  justify-content: center;
  gap: var(--s3);
  padding: var(--page-padding);
  /* background-image: url('../images/login-bg.webp'); */
  background-size: 110%;
  background-position: top center;
  border-radius: var(--br1);
  position: relative;
  overflow: hidden;
}

.login_background > * {
  direction: ltr;
  position: relative;
}

.login_video,
.login_poster {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: cover;
  inset: 0;
  z-index: -1;
  /* border-radius: var(--br1); */
  filter: blur(0.5rem);
  opacity: 0.15;
}

.fixed-video {
  position: absolute;
  width: 100%;
  height: auto;
  aspect-ratio: 2/1;
  top: 0;
  max-height: 100%;
  z-index: -1;
}

.login_video {
  opacity: 0;
}

.fixed-video .login_video {
  position: absolute;
  height: auto;
  aspect-ratio: 2/1;
  max-height: 100%;
}

.fixed-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, var(--bg1), #0000);
  z-index: 1;
  border-radius: var(--br1);
  aspect-ratio: 2/1;
  scale: 1.1;
  max-height: 100%;
  min-width: 100%;
}

.password-strength-text {
  color: var(--pink);
}

.password-strength-bar {
  height: 4px;
  border-radius: var(--br1);
  width: 25%;
  transition: all 200ms;
  color: var(--pink);
  background-color: var(--pink);
}

.weak .password-strength-bar {
  background-color: rgb(217, 134, 18);
  width: 50%;
}

.medium .password-strength-bar {
  background-color: rgb(217, 204, 18);
  width: 75%;
}

.strong .password-strength-bar {
  background-color: rgb(19, 199, 19);
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/* ANCHOR                           Performer                                 */
/* -------------------------------------------------------------------------- */

.performer-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--page-padding);
}

.performer-wrapper.is-popup {
  gap: var(--s1-5);
  padding-top: 0rem;
}

.performer-info {
  display: grid;
  grid-template-columns: min(12.5rem, 25vw) 1fr;
  gap: var(--page-padding);
}

#popover .performer-info {
  display: flex;
  flex-direction: column;
  gap: var(--s1-5);
  max-width: 40rem;
}

.performer-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.performer-image-wrapper {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

#popover .performer-image-wrapper {
  width: min(12.5rem, 50%);
  margin: auto;
}

#popover h1 {
  text-align: center;
}

#popover .performer-main-info {
  align-items: center;
}

#popover .performer-links {
  margin: auto;
  justify-content: center;
}

.social-icon {
  width: var(--s1);
  height: var(--s1);
  border-radius: var(--s0-125);
  object-fit: contain;
}

.performer-links {
  margin-right: auto;
  display: flex;
  gap: var(--s0-5);
  padding: var(--s0-375) 0;
  flex-wrap: wrap;
}

.performer-main-info {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
  /* justify-content: center; */
}

.max-width-medium {
  max-width: min(45rem, 100vw - var(--page-padding) * 2);
  margin: auto;
}

.featured-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s1);
  padding-top: var(--s1);
}

.performer-description {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.performer_card {
  position: relative;
  /* background-color: var(--bg2);
    border-radius: var(--br1);
    padding: var(--s0-375); */
  display: flex;
  flex-direction: column;
  gap: var(--s0-375);
  transition: all 500ms;
}

.performer_card:hover {
  scale: 1.05;
}

/* .performer_card:before{
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(0deg, #000B, #0000);
    opacity: 0.5;
    transition: all 200ms;
    border-radius: var(--br1);
} */

#peformer-list .performer_card .timestamp_info {
  flex-wrap: wrap;
  row-gap: var(--s0-25);
  text-align: center;
  position: absolute;
  bottom: var(--s0-5);
  left: var(--s0-5);
  right: var(--s0-5);
  background-color: var(--black-transparent);
  border-radius: var(--br1);
  padding: var(--s0-375);
  backdrop-filter: blur(var(--s0-5));
  display: flex;
}

.performer_card .timestamp_img {
  aspect-ratio: 1/1;
  border-radius: var(--br1);
}

.performer-list-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(40vw, 12rem), 1fr));
  gap: var(--s1);
  padding-top: var(--s1);
  margin-top: var(--s1);
  align-items: start;
  transition: all 200ms;
  position: relative;
  border-top: 1px solid var(--bc2);
  margin-bottom: var(--s4);
}

.performer-list-header {
  display: flex;
  gap: var(--s0-5);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.performer-list-header h1 {
  line-height: 1;
}

.performer-list-content .page-trigger {
  position: absolute;
  inset: 0;
  top: auto;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -7.5rem;
}

form.htmx-request ~ .performer-list-content {
  opacity: 0.5;
  pointer-events: none;
}

#popover .performer-list-header h1 {
  text-align: left;
}

.search-form {
  display: flex;
  gap: var(--s0-5);
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------- */
/* ANCHOR                            Videos                                   */
/* -------------------------------------------------------------------------- */

.video-list-total {
  margin-top: var(--s1);
  border-top: var(--px) solid var(--bc2);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.videos_header {
  display: flex;
  gap: var(--s0-5);
  /* flex-direction: column; */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.videos_header h1 {
  line-height: 1;
}

.line-ellipsis {
  display: inline;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/*                                   Profile                                  */
/* -------------------------------------------------------------------------- */

.profile-header {
  display: grid;
  grid-template-columns: min(12.5rem, 25vw) 1fr;
  gap: var(--page-padding);
  padding-top: var(--page-padding);
}

.profile-image_wrapper {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
  justify-content: center;
}

#profile-form form {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  width: 100%;
}

#profile-form .input_wrapper {
  display: flex;
  border-bottom: var(--px) solid var(--bg2);
  padding-bottom: var(--s1);
}

.admin {
  --theme: var(--pink);
  --theme-transparent: #de0f6633;
}

.mod {
  --theme: #69c9d0;
  --theme-transparent: #69c9d033;
}

.free,
.supporter {
  --theme: var(--white);
  --theme-transparent: #ffffff33;
}

.noodler {
  --theme: #f17989;
  --theme-transparent: #f1798933;
}

.connoisseur {
  --theme: #dcb012;
  --theme-transparent: #f1c11033;
}

.legend {
  --theme: #e67e22;
  --theme-transparent: #e67e2233;
}

.ambassador {
  --theme: #2ecc71;
  --theme-transparent: #2ecc7133;
}

:is(.noodler, .connoisseur, .legend, .ambassador) .btn:not(.btn-secondary) {
  background-color: var(--black-transparent);
  color: var(--white);
  outline-color: var(--theme);
}

:is(.noodler, .connoisseur, .legend, .ambassador) .btn:hover {
  background-color: var(--theme-transparent);
  outline-color: var(--theme);
}

:is(.noodler, .connoisseur, .legend, .ambassador) .btn-secondary:hover {
  background-color: var(--bg2);
  outline-color: var(--bc2);
}

.profile-name {
  display: flex;
  gap: var(--s0-5);
  align-items: start;
  flex-wrap: wrap;
}

.profile-name h1 {
  line-height: 1;
  margin-top: -0.125lh;
}

.user-badge {
  width: max-content;
  display: flex;
  gap: var(--s0-25);
  align-items: center;
  padding: var(--s0-25) var(--s0-5);
  border-radius: var(--br3);
  background: var(--theme-transparent);
  color: var(--theme);
  display: inline;
}

.nav_link.is-profile .user-badge {
  margin: -0.375rem;
  margin-left: 0.25rem;
}

.current-plan {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s1-5);
  /* justify-content: center; */
  padding: var(--s1) var(--s1);
  border-radius: var(--br2);
  background-color: var(--black-transparent);
  color: var(--theme);
  border: var(--s0-125) solid var(--theme);
  filter: drop-shadow(0px 0px 2.5rem var(--theme-transparent));
  max-width: 15rem;
  width: 100%;
}

.plan-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  gap: var(--s1-5);
}

.current-plan_info {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
  /* padding-bottom: var(--s1-5); */
}

.current-plan_cta {
  display: flex;
  gap: var(--s0-5);
  flex-direction: column;
}

.logout_wrapper {
  margin-left: auto;
}

/* .btn.is-discord.btn:not(.btn-secondary) {
    background-color: var(--discord);
    color: var(--white);
} */

.plan-wrapper .btn-text.is-discord {
  margin-inline: auto;
}

.discord-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1-5);
  align-items: center;
  justify-content: space-around;
}

.discord-buttons .hx-response {
  margin-top: -0.5rem;
  padding-top: 1rem;
  border-top: var(--px) solid var(--bg2);
}

.email-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s0-5);
}

.email-grid input {
  min-width: 1.5rem;
  text-align: center;
  text-transform: uppercase;
}

.tippy-box {
  background-color: var(--black) !important;
  color: var(--fc1) !important;
}
.tippy-arrow {
  color: var(--black) !important;
}

/* -------------------------------------------------------------------------- */
/*                                   donate                                   */
/* -------------------------------------------------------------------------- */

.donate_header {
  display: flex;
  flex-direction: column;
  gap: var(--s1-5);
  align-items: left;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  padding-top: var(--page-padding);
}

.donate_notice {
  max-width: 40rem;
  margin: 0;
  padding: var(--s0-75) var(--s1);
  border-radius: var(--br1);
  background-color: #de0f6614;
  border: var(--px) solid #de0f6655;
  border-left: 0.1875rem solid var(--pink);
  color: var(--fc2);
  display: flex;
  flex-direction: column;
  gap: var(--s0-375);
  box-shadow: 0 0 2rem #de0f6614;
}

.donate_notice p {
  margin: 0;
  max-width: none;
}

.donate_notice_label {
  color: var(--fc1);
  font-weight: var(--fw-b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.donate_notice a {
  white-space: nowrap;
}

.plans_wrapper {
  /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); */
  gap: var(--s1);
  padding-top: var(--s1);
}

.plan_card {
  display: flex;
  flex-direction: column;
  gap: var(--s1-5);
  padding: var(--s1-5);
  border-radius: var(--br2);
  transition: all 200ms;
  position: relative;
  z-index: 1;

  margin-right: var(--s0-75);
  outline: 2px solid var(--theme);

  width: min(max(18.5rem, 25% - 1.125rem), 100%);
  height: fit-content;

  background-color: var(--black);
  filter: drop-shadow(0px 0px 2.5rem var(--theme-transparent));
  /* min-height: 25rem; */

  /* bottom: 0;
    top: 0; */
  /* width: 100%;
    height: 100%; */
  margin-right: 1.5rem;
}

.plan_card.free {
  background-color: var(--bg2);
}

.plan_footer {
  margin-top: auto;
}

.plan_footer .user-badge {
  background-color: var(--bg2) !important;
}

.plan_card .price {
  color: var(--theme);
}

.plan_body {
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
}

.plan_perks {
  border-top: var(--px) solid var(--bg2);
  padding-top: var(--s1-5);
  display: flex;
  flex-direction: column;
  gap: var(--s0-5);
}

.plan_perks li {
  display: flex;
  gap: var(--s0-5);
  align-items: start;
}

.plan_perks li::before {
  content: "✓";
  color: var(--theme);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
  margin-top: 0.125lh;
}

.plan_description {
  min-height: 7rem;
}

.perk_description {
  margin-left: calc(0.5rem + 0.875em);
  margin-top: -0.25rem;
  margin-bottom: 0.25rem;
}

.section_plans {
  padding-top: var(--s3);
}

.plan_footer .btn {
  font-weight: var(--fw-b);
}

.plan_footer .btn:not(:hover) {
  background-color: var(--theme) !important;
  font-weight: var(--fw-b);
  text-shadow: #10101099 0px 0px 1rem;
  /* color: var(--black); */
}

li > span {
  line-height: 1.5;
}
/* breakpoints for tablet, mobile l and mobile p */

/* 1152px */
/* 768px */
/* 425px */

@media screen and (max-width:1152px) {

    :root {
        --fs-xs: var(--s0-625);
        --fs-s: var(--s0-75);
        --fs-m: var(--s1);
        --fs-l: var(--s1-5);
        --fs-xl: var(--s3);
    }

    .player_layout {
        grid-template-columns: 1fr;
    }

    .heading_wrapper {
        padding-bottom: var(--s1);
    }

    .video_info_wrapper .scroll-wrapper {
        position: relative;
        overflow: auto;
    }

}

@media screen and (max-width:800px) {

    .nav_brand {
        width: 6.1rem;
        min-width: 6.1rem;
        height: 2rem;
    }

    *:not(h1, h2, h3, h4, p) {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .nav_toggle {
        display: flex;
        position: fixed;
        z-index: 1001;
        outline: none;
        background-color: var(--white);
        color: var(--black);
        top: var(--s1);
        right: var(--page-padding);
        align-items: center;
        padding-block: 0.3125rem;
        cursor: pointer;
        font-size: var(--fs-s);
    }



    .nav_toggle_icon{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: var(--s0-75);
        /* height: var(--s0-375); */
        height: 0.35rem;
        transition: all 0.3s;
    }

    .nav_toggle.active .nav_toggle_icon {
        transform: translateX(0.1875rem)
    }

    .nav_menu_overlay {
        display: block;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        inset: 0;
        background-color: #101010f0;
        z-index: 999;
        backdrop-filter: blur(1px);
        transition: opacity 0.3s;
    }

    .nav_component:has(.nav_toggle.active) .nav_menu_overlay {
        opacity: 1;
        pointer-events: all;
    }

    .nav_toggle_text {
        height: 1em;
        overflow: hidden;
    }

    .nav_toggle_text > div {
        transition: transform 0.3s;
    }

    .nav_toggle.active .nav_toggle_text > div {
        transform: translateY(-1em);
    }

    .nav_toggle_icon span {
        transition: all 0.3s;
        width: var(--s0-75);
        height: 1.33px;
        background-color: var(--black);
    }

    /* .nav_toggle.active {
        background-color: var(--pink);
    } */

    .nav_toggle.active .nav_toggle_icon span:first-child {
        transform: rotate(45deg) translateY(0.1875rem);
    }

    .nav_toggle.active .nav_toggle_icon span:last-child {
        transform: rotate(-45deg) translateY(calc(-0.1875rem - 0.33px));
    }

    @media (pointer: fine) {
        .nav_toggle:hover, .nav_toggle:focus-visible {
            background-color: var(--pink);
        }
    }

    @media (pointer: coarse) {
        .nav_toggle:hover, .nav_toggle:focus-visible {
            background-color: var(--white);
        }
    }

    .plyr__volume input[data-plyr="volume"] {
        display: none;
        visibility: hidden;
    }

    .plyr__controls__item[data-plyr="pip"] {
        display: none;
        visibility: hidden;
    }

    .nav_component {
        position: relative
    }

    .nav_floating {
        position: fixed;
        top: var(--s0-5);
        right: calc(var(--page-padding) - var(--s0-5));
        z-index: 1000;
        background-color: var(--bg2);
        border-radius: var(--br1);
        backdrop-filter: blur(var(--s0-5));
        padding-right: var(--s1);
        padding-top: var(--s2);
        transition: all 0s;
        transform-origin: 100% 0;
        overflow: hidden;

        transform: scale(0) translate(-2rem, 1rem);
        height: 0;
    }

    .nav_top, .nav_bottom {
        flex-direction: column;
        padding-right: var(--s1)
    }

    .nav_top {
        padding-bottom: var(--s0-5);
        background-color: transparent;
    }

    .nav_bottom {
        padding-top: 1rem;
        padding-bottom: 1.125rem;
        background-color: transparent;
        gap: var(--s0-5);
        border-top: var(--px) solid var(--bc3);
        width: calc(100% - var(--s1));
    }

    .nav_link {
        padding-block: var(--s0-75);
        transition: transform 0s;
        font-size: var(--fs-m);
        padding-right: var(--s4);
        min-width: fit-content;
    }

    .nav_link_small {
        transition: transform 0s;
        font-size: var(--fs-s);
    }

    .nav_link.is-cta:not(.is-profile) {
        margin-top: 0;
        margin-right: 0;
        width: calc(100% - var(--s1));
        justify-content: center;
        margin-left: var(--s0-5);
        flex: 1
    }

    .signup_wrapper {
        margin-left: var(--s0-5);
        margin-top: var(--s0-5);
        border-top: var(--px) solid var(--bc3);
        border-left: none;
        margin-right: calc(var(--s1) * -1);
        padding-top: var(--s0-5);
        flex: 1;
        min-width: 12.5rem;
        align-items: center;
        justify-content: start;
        gap: var(--s0-5);
    }

    .nav_link.is-secondary {
        margin: 0;
        padding-inline: 0;
    }

    .player_wrapper {
        max-width: calc(100vw - 2* var(--page-padding));
    }

    .video_controls {
        gap: 0.375rem;
        max-width: 100vw;
        margin-inline: calc(var(--page-padding) * -1);
        padding-inline: var(--page-padding);
        overflow: scroll;
        padding-top: var(--s0-5);
    }

    .a-b-wrapper {
        gap: 0.375rem;
    }

    .video_controls.open {
        padding-top: 9.5rem;
        margin-top: -9rem;
        overflow: hidden;
    }
/* 
    .player_wrapper::before, .player_wrapper::after {
        content: "";
        position: absolute;
        left: calc(var(--page-padding)* -1);;
        bottom: 0;
        width: var(--page-padding);
        height: 2rem;
        background: linear-gradient(90deg, var(--bg1), transparent);
        z-index: 100;
    } */

    .player_wrapper::after {
        left: auto;
        right: calc(var(--page-padding)* -1);
        background: linear-gradient(270deg, var(--bg1), transparent);
    }

    .download_wrapper {
        padding-left: 0;
    }

    .download_wrapper h3 {
        display: none;
    }

    .video_controls > div {
        font-size: 0.75rem;
    }

    .video_controls svg {
        width: 0.75rem;
        height: 0.75rem;
    }

    .btn-toggle {
        height: 1.5rem;
        width: 2.25rem;
        min-width: 2.25rem;
    }

    .btn-toggle .toggle {
        height: 1.5rem;
        width: 1.5rem;
        margin-right: 0.75rem;
    }

    .btn-toggle.active .toggle {
        margin-left: 0.75rem;
    }

    .login_wrapper {
        padding: var(--s2) var(--s1-5);
    }

    .footer_layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--s2-5) var(--s1);
    }

    .footer_layout {
        padding: 0 var(--s1);
    }

    #playlist .playlist_item {
        width: 12rem;
        height: 10.25rem;
    }

    #playlist .playlist_item:hover, #playlist .playlist_item.current {
        width: calc(12rem - 0.75rem);
        height: calc(10.25rem - 0.75rem);
    }

    #performers {
        padding-inline: 0.25rem
    }

    .plyr #performers .timestamp_wrapper {
        top: 0.125rem;
    }

    .plyr #performers.paused .timestamp_wrapper {
        top: 0.25rem;
    }

    .timestamp_wrapper {
        max-width: 27.5vw;
    }

    #performers .timestamp_img {
        max-height: 20vw;
    }

    #performers.paused .timestamp_img {
        height: 100cqw;
    }

        .performer-info {
        display: flex;
        flex-direction: column;
    }

    

        .performer-image-wrapper {
        max-width: 50vw
    }

    .popover > .btn.is-round {
        top: var(--s0-75);
        right: var(--s0-75);
    }

    .profile-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--s2)
    }

    .profile-info, .profile-name {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .plan-wrapper, .profile-form {
        width: 100%;
    }

    .discord-buttons {
        width: 100%;
    }

    .plan_card {
        width: 100%;
    }

    .plans_wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--s1);
    }

    .plan_description{
        min-height: 0;
    }

}

@media screen and (max-width:425px) {
    :root{
        --page-padding: 0.75rem;   
        --fs-xl: var(--s2-5);
    }

    .nav_toggle {
        right: var(--s1);
    }

    .nav_floating {
        right: var(--s0-5);
    }

    #performers.paused .timestamp_img {
        height: 15vw;
    }

    #performers .timestamp_info span:nth-child(2) {
        display: none;
    }

    .timestamp_wrapper, .timestamp_info{
        max-width: 27.5vw;
    }

    #performers:not(:has(.timestamp_wrapper:nth-child(2))):not(:has(.timestamp_wrapper[data-position="middle"]))::after {
        max-width: 27.5vw;
    }


}/*! Flickity v3.0.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
  touch-action: pan-y;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}

.flickity-rtl .flickity-slider {
  left: unset;
  right: 0;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

/* ---- flickity-cell ---- */

.flickity-cell {
  position: absolute;
  left: 0;
}

.flickity-rtl .flickity-cell {
  left: unset;
  right: 0;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsl(0 0% 100% / 75%);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dot {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0 8px;
  background: hsl(0 0% 20% / 25%);
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  border: none;
  text-indent: -9999px;
  overflow: hidden;
}

.flickity-rtl .flickity-page-dot {
  text-indent: 9999px;
}

.flickity-page-dot:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-page-dot.is-selected {
  background: hsl(0 0% 20% / 100%);
}
/* Soften default view-transition chrome; main uses transition:animate={fade()}. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
}

/*
 * Opt headings out of named transition groups (morph can leave wrong size).
 * Also pin video title size with higher specificity than normalize's h1.
 */
h1,
h2,
h3,
.fs-xl,
.fs-l,
.fs-ml {
  view-transition-name: none;
}

#current-video .heading_wrapper h1 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-b);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 115%;
  margin: 0;
  view-transition-name: none;
}

/*
 * Timestamp overlay lives inside .plyr (ported from Flask). Keep it pinned to
 * the video box; VO-only should stay centered (spacer is for left/right singles).
 */
.plyr > #overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  margin: 0;
}

#performers:not(:has(.timestamp_wrapper:nth-child(2))):not(
    :has(.timestamp_wrapper[data-position='middle'])
  ):not(:has(.timestamp_wrapper[data-position='vo']))::after {
  content: '';
  order: 2;
  width: 8.25rem;
  flex: 0 0 8.25rem;
}

/*
 * Timestamp CTAs: shared .btn / .btn-text, centered in the card.
 * Do not use `font: inherit` here — it beats .fs-xs and blows up "More info".
 */
#performers .timestamp_wrapper .btn {
  margin-left: auto;
  margin-right: auto;
  width: auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-m);
  line-height: 100%;
}

#performers .timestamp_wrapper .btn.btn-secondary {
  padding: 0.25rem;
}

/* Flask CSS bug: var(var(--white)) is invalid — free plan outline/glow never applied. */
.free,
.supporter,
.plan_card.free,
.plan_card.supporter {
  --theme: var(--white);
  --theme-transparent: #ffffff33;
}

/* Plans Flickity: keep cards as cells with stable width */
.plans_wrapper.flickity-enabled {
  display: block;
}

.plans_wrapper .flickity-viewport {
  overflow: visible;
}

.plans_wrapper .plan_card {
  min-height: 100%;
}

/*
 * Flickity v3 uses .flickity-cell { position: absolute }.
 * .playlist_item / .plan_card { position: relative } otherwise wins (same
 * specificity) and cells stack vertically — the staircase glitch.
 */
#playlist .flickity-cell,
.plans_wrapper .flickity-cell {
  position: absolute;
  left: 0;
  top: 0;
}

/* Popover: size follows content. Do not flex-grow — that stretched the box
   and made the open tween measure a tall target, then snap on clearProps. */
#popover.popover {
  will-change: width, height;
}

#popover .popover-content {
  height: auto;
  flex: 0 0 auto;
  min-height: 0;
}

/* Flask success.html is only the pill. Drop the 20rem floor so it does not
   sit in a half-empty box under a leftover title. */
#popover.popover:has(.success-wrapper) {
  min-height: 0;
  min-width: 0;
}

#popover:has(.success-wrapper) .popover-content {
  min-height: 0;
  min-width: min(25rem, 100%);
  height: auto;
  justify-content: center;
}

#popover-content > .success-wrapper {
  flex: 1 1 auto;
  width: 100%;
}

#popover-content textarea {
  overflow: auto;
  resize: vertical;
}

button.footer_link {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.video_page_island,
.video_page_island .playlist_list {
  display: contents;
}

.video_description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video_description p {
  margin: 0 0 0.75em;
}

.video_description p:last-child {
  margin-bottom: 0;
}

#loop-option-list.active {
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: auto;
}

.loop_buttons {
  position: relative;
}

.a-b-wrapper.is-open {
  opacity: 1;
  width: auto;
  overflow: visible;
}

.player_annotations.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/*
 * Playlist current outline: Flask uses content-box + padding shrink.
 * Do not force border-box / fixed width on .current — that clips the outline.
 */
#playlist .playlist_item {
  box-sizing: content-box;
}

#playlist .playlist_item.current {
  outline: var(--px) solid var(--pink);
  outline-offset: 0;
}

/* Flickity playlist — keep Flask viewport overflow visible */
#playlist.flickity-enabled {
  display: block;
}

#playlist .flickity-viewport {
  overflow: visible;
  /* Lock row height so a padded .current cell can't make Flickity wrap. */
  height: 11.9375rem;
}

@media (max-width: 900px) {
  .player_layout {
    grid-template-columns: 1fr;
  }

  .video_info_wrapper .scroll-wrapper {
    position: relative;
    inset: auto;
    bottom: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Admin                                                                      */
/* -------------------------------------------------------------------------- */

.admin-crumb {
  margin-bottom: var(--s0-5);
}

.admin-crumb a:any-link {
  color: var(--fc2);
}

.admin-crumb a:hover {
  color: var(--fc1);
}

.admin-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--s1);
}

.admin-tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--s0-375);
  height: 100%;
  transition: outline-color 200ms;
}

.admin-tool-card:hover {
  outline-color: var(--pink);
}

.admin-avatars_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
  flex-wrap: wrap;
  margin-bottom: var(--s1);
}

.admin-avatars_toolbar .input {
  flex: 1 1 16rem;
}

.admin-avatars_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(40vw, 10rem), 1fr));
  gap: var(--s1);
}

.admin-avatar-card {
  display: flex;
  flex-direction: column;
  gap: var(--s0-375);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-avatar-card_media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--br1);
  background: var(--bg2);
  overflow: hidden;
}

.admin-avatar-card_media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-avatar-card_meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-avatar-card_meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-avatars_more {
  display: flex;
  justify-content: center;
  margin-top: var(--s2);
}

.admin-avatar-dialog {
  width: min(56rem, calc(100vw - var(--page-padding) * 2));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 0;
  border-radius: var(--br2);
  background: var(--bg1);
  color: inherit;
}

.admin-avatar-dialog::backdrop {
  background: #000c;
}

.admin-avatar-dialog_body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(14rem, 0.8fr);
  gap: var(--s1-5);
  padding: var(--s1-5);
}

.admin-avatar-dialog_body img {
  width: 100%;
  max-height: min(70vh, 36rem);
  object-fit: contain;
  background: var(--bg2);
  border-radius: var(--br1);
}

.admin-avatar-dialog_info {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.admin-avatar-dialog_dl {
  display: flex;
  flex-direction: column;
  gap: var(--s0-75);
  margin: 0;
}

.admin-avatar-dialog_dl div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-avatar-dialog_dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-avatar-dialog_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0-5);
  margin-top: auto;
}

@media (max-width: 800px) {
  .admin-avatar-dialog_body {
    grid-template-columns: 1fr;
  }
}
@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__caption div{display:inline}.plyr__control{background:#0000;border:0;border-radius:4px;border-radius:var(--plyr-control-radius,4px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .1s ease-in-out}.plyr__control svg{display:block;fill:currentColor;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}.plyr__control:focus{outline:0}.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}a.plyr__control{text-decoration:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:"";position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}.plyr--full-ui input[type=range]{appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}.plyr--full-ui input[type=range]::-ms-track{color:#0000}.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__time+.plyr__time:before{content:"⁄";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr__tooltip{background:#fff;background:var(--plyr-tooltip-background,#fff);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc(var(--plyr-range-track-height, 5px)/2*-1);padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:#0000}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}.plyr__volume{align-items:center;display:flex;position:relative}.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}.plyr--audio{display:block}.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));border-radius:inherit;height:100%;margin:auto;overflow:hidden;position:relative;width:100%}.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen video{height:100%}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;inset:0;margin:0;position:fixed;width:100%;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr__ads{border-radius:inherit;cursor:pointer;inset:0;overflow:hidden;position:absolute;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}.plyr__ads:empty:after{display:none}.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;transform:translateY(-50%);width:3px;z-index:3}.plyr__preview-thumb{background-color:#fff;background-color:var(--plyr-tooltip-background,#fff);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:7px;border-radius:calc(var(--plyr-menu-radius, 8px) - 1px);overflow:hidden;position:relative;z-index:0}.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:"";pointer-events:none}.plyr__preview-thumb__image-container img{max-height:none;max-width:none}.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:7px;border-bottom-left-radius:calc(var(--plyr-menu-radius, 8px) - 1px);border-bottom-right-radius:7px;border-bottom-right-radius:calc(var(--plyr-menu-radius, 8px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__preview-scrubbing{filter:blur(1px);height:100%;inset:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;transition:opacity .3s ease;width:100%;z-index:1}.plyr__preview-scrubbing--is-shown{opacity:1}.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important}