html {
  --nutral-1: #1A1609;
  --nutral-2: #D8D3C5;
  --nutral-3: #EFEDE7;
  --nutral-4: #f4f4f4;
  --primary-1: #DB0F67;
  --primary-2: #86b40d;
  --text: var(--nutral-1);
  --text-1: var(--nutral-1);
  --text-2: var(--nutral-2);
  --brand: var(--primary-1);
  --brand-1: var(--primary-1);
  --brand-2: var(--primary-2);
  --primary: var(--primary-1);
  --secondary: var(--primary-3);
  --bg-1: var(--nutral-2);
  --bg-2: #EFEDE7;
  --bg-3: #E2DFD4;
  --bg-4: #fdf6f9;
  --bg-5: #fae3ed;
  --bg: radial-gradient(97.94vw 294.61vh at 2.06vw 0vh, #db0f67 0%, #ff672c 50%, #86b40d 100%);
  --filter-bg: var(--nutral-2);
  --padding: 1rem;
  --max-width: 80rem;
  --border-radius: 1rem;
  --inputSize: 2.5em;
  --nav-height: calc(3.25rem + (2 * var(--padding) / 2));
}
html.smooth {
  --transition: all .3s;
}
@media screen and (min-width: 1000px) {
  html {
    --padding: 2rem;
  }
}

html, body {
  padding: 0;
  margin: 0;
}

figure, p, ul, ol, h1, h2, h3, h4 {
  margin: 0 0 1.5rem 0;
  margin: 0 0 1lh 0;
}

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

img {
  width: 100%;
  display: block;
  max-width: 100%;
}

[data-itescount]:before {
  content: attr(data-itemcount) " ";
}

.tabs-options {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 0;
}
.tabs-options:after {
  content: '';
  position: absolute;
  height: .5rem;
  left: 0;
  right: 0;
  top: 100%;
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 100% 0;
}
.tabs-options li {
  display: inline-block;
  margin-right: 1px;
}
.tabs-options a {
  display: block;
  position: relative;
  font-size: 1rem;
  padding: .5rem 1rem;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--bg-2);
  background-color: var(--primary-2);
}
.tabs-options a.active {
  background-color: var(--primary-1);
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 0 0;
  color: var(--bg-2);
}
.tabs-tab {
  display: none;
}
.tabs-tab.active {
  display: block;
}

.visually-hidden {
  position: absolute;
  pointer-events: none;
}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://gallery.athleticskillsmodel.com/assets/fonts/be-vietnam-pro/Regular.ttf") format("truetype");
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://gallery.athleticskillsmodel.com/assets/fonts/be-vietnam-pro/Italic.ttf") format("truetype");
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://gallery.athleticskillsmodel.com/assets/fonts/be-vietnam-pro/Bold.ttf") format("truetype");
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("https://gallery.athleticskillsmodel.com/assets/fonts/be-vietnam-pro/BoldItalic.ttf") format("truetype");
}
html, input, option, select, button, textarea {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1rem;
}

html {
  font-size: 13px;
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 15px;
  }
}

body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

.type-xl {
  font-size: 1.5rem;
}

.type-l {
  font-size: 1.25rem;
}

.type-s, .message, .required, .header, .video-title, .video-duration,
.video-order-title,
.video-order-duration, .input-video p, .playlists-selector-toggle:before, .playlists-selector-toggle:after, .filters-toggle:before, .filters-toggle:after {
  font-size: .875rem;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .25em 0;
}

h1, .heading-1 {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.25;
}

h2, .heading-2, .video-detail h1 {
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.25;
}

h3, .heading-3 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5;
}

h4, .heading-4 {
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: inherit;
}

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

hr {
  margin: 2lh 0;
  height: .125rem;
  background-color: var(--bg-1);
  border: none;
  clear: both;
}

.content {
  max-width: 45rem;
}

.icon, .icon-logo, .modal .modal-close, .required:before, h2 .edit:before, h1 .edit:before, .profile-bio .edit:before,
i[class*="icon-"],
[style*="--icon:"]:before {
  content: '';
  width: calc(1.5em * var(--size, 1));
  height: calc(1.5em * var(--size, 1));
  display: inline-block;
  vertical-align: middle;
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  transition: background-color .3s;
}

.icon-logo {
  width: 4rem;
  height: 4rem;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='123' height='162' fill='none'%3E%3Cpath fill='%23fff' d='M104.262 49.326c-47.191-1.252-37.135-21.889-27.185-28.159 14.878-9.375 1.17-29.603-15.335-17.317C53.67 9.858 38.804 23.13 44.662 40c5.826 16.774 26.796 22.94 26.796 22.94-14.866 4.329-39.555 6.43-58.168-.123C1.145 58.542-4.608 73.082 4.394 78.03 40.917 98.1 89.396 95.662 89.396 95.662c-25.753 9.244-50.363 8.114-59.962 7.061-7.609-.835-11.004 8.916-3.98 12.169 25.519 11.818 48.229 11.35 48.229 11.35-5.62 4.329-22.213 16.381-20.486 30.189 1.024 8.185 10.11 6.625 8.428 0-3.142-12.381 21.777-27.429 27.47-30.868l.04-.023c6.555-3.959 3.597-10.963-2.108-10.414-15.803 1.521-23.88-.234-23.88-.234 9.103-.544 41.987-7.334 57.008-22.349 6.215-6.212 1.639-16.732-7.843-14.51-20.485 4.804-38.017 2.3-38.017 2.3 6.321-1.638 18.633-5.462 31.462-10.958 11.745-5.031 10.575-19.729-1.495-20.049'/%3E%3C/svg%3E");
}

.icon-videos {
  --icon: url(../img/ico_videos.svg);
}

.icon-playlists {
  --icon: url(../img/ico_playlists.svg);
}

.icon-profile {
  --icon: url(../img/ico_profile.svg);
}

.icon-asm {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='123' height='162' fill='none'%3E%3Cpath fill='%23fff' d='M104.262 49.326c-47.191-1.252-37.135-21.889-27.185-28.159 14.878-9.375 1.17-29.603-15.335-17.317C53.67 9.858 38.804 23.13 44.662 40c5.826 16.774 26.796 22.94 26.796 22.94-14.866 4.329-39.555 6.43-58.168-.123C1.145 58.542-4.608 73.082 4.394 78.03 40.917 98.1 89.396 95.662 89.396 95.662c-25.753 9.244-50.363 8.114-59.962 7.061-7.609-.835-11.004 8.916-3.98 12.169 25.519 11.818 48.229 11.35 48.229 11.35-5.62 4.329-22.213 16.381-20.486 30.189 1.024 8.185 10.11 6.625 8.428 0-3.142-12.381 21.777-27.429 27.47-30.868l.04-.023c6.555-3.959 3.597-10.963-2.108-10.414-15.803 1.521-23.88-.234-23.88-.234 9.103-.544 41.987-7.334 57.008-22.349 6.215-6.212 1.639-16.732-7.843-14.51-20.485 4.804-38.017 2.3-38.017 2.3 6.321-1.638 18.633-5.462 31.462-10.958 11.745-5.031 10.575-19.729-1.495-20.049'/%3E%3C/svg%3E");
}

.icon-add {
  --icon: url(../img/ico_add.svg);
}

.icon-search {
  --icon: url(../img/ico_search.svg);
}

.icon-filter {
  --icon: url(../img/ico_filter.svg);
}

.filters.active .icon-filter {
  --icon: url(../img/ico_filter-close.svg);
}

.icon-close {
  --icon: url(../img/ico_close.svg);
}

.icon-empty {
  --icon: url(../img/ico_empty.svg);
}

.modal {
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  margin-top: 4rem;
  pointer-events: none;
  max-height: 100vh;
  overflow: auto;
  scroll-behavior: smooth;
  bottom: 0;
  transition: var(--transition);
  transition-delay: .3s;
}
.modal > div {
  position: relative;
  z-index: 2;
  transform: translate3d(0, 100%, 0);
  transition: var(--transition);
  filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));
  max-width: 60rem;
  margin: 0 auto;
}
.modal .modal-close {
  position: absolute;
  z-index: 5;
  font-size: 0;
  right: var(--padding);
  top: var(--padding);
  width: calc(2 * var(--padding));
  height: calc(2 * var(--padding));
  background-color: var(--primary-2);
  color: var(--bg-1);
  --icon: url(/icon/xmark);
  transition: var(--transition);
}
.no-touch .modal .modal-close {
  opacity: .1;
  pointer-events: none;
}
.no-touch .modal .modal-close:hover {
  background-color: var(--primary-1);
}
.no-touch .modal .modal-inner:hover .modal-close, .touch .no-touch .modal .modal-close {
  opacity: 1;
  pointer-events: auto;
}
.modal.active {
  pointer-events: auto;
}
.modal.active > div {
  margin-top: calc(2 * var(--padding));
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.modal .inner {
  margin-top: calc(4 * var(--padding));
  background-color: var(--bg-1);
  padding: var(--padding) var(--padding) calc(var(--nav-height) + var(--padding)) var(--padding);
  border-radius: var(--border-radius);
}
.modal .inner .buttons {
  position: sticky;
  z-index: 2;
  bottom: calc(var(--nav-height) + var(--padding));
  background-color: var(--bg-1);
  box-shadow: 0 var(--padding) 0 0 var(--bg-1);
}
.modal .inner .buttons:before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: calc(var(--padding) * 1);
  top: calc((var(--padding) * -1) - 1px);
  background: linear-gradient(to bottom, transparent, var(--bg-1));
}

body > .modal-close {
  position: fixed;
  z-index: 98;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  font-size: 0;
  background-color: transparent;
  backdrop-filter: blur(0);
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}
.modal-active body > .modal-close {
  opacity: 1;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(0.5rem);
}

body:has(.modal.active) {
  overflow: hidden;
  touch-action: none;
  max-height: calc(100vh - var(--nav-height) + var(--padding));
}

.messages {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--padding);
  pointer-events: none;
  z-index: 100;
  margin-left: 10rem;
}

.messages .messagge {
  margin: calc(var(--padding) / 2);
  display: none;
  max-width: 30rem;
}
.messages .messagge:last-child {
  display: block;
}
.messages .messagge p:last-child {
  margin: 0;
}

.message {
  position: relative;
  background-color: var(--bg-1);
  padding: calc(var(--padding) / 2) var(--padding);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: .5rem;
  pointer-events: auto;
  --span: 12 !important;
}
.message p:last-child {
  margin: 0;
}
.message.processing:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 95%;
  bottom: 0;
  height: .125rem;
  background-color: var(--primary);
  transition: opacity .3s;
  pointer-events: none;
  animation-name: processing;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes processing {
  0% {
    left: 0;
    right: 95%;
  }
  25% {
    left: 0;
    right: 0;
  }
  50% {
    left: 90%;
    right: 0;
  }
  75% {
    left: 0;
    right: 0;
  }
  100% {
    left: 0;
    right: 95%;
  }
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background-color: var(--bg-1);
  color: var(--text-1);
  padding: .25em .75em;
  border-radius: .25rem;
  border: 1px solid var(--text);
  min-height: var(--inputSize);
  box-sizing: border-box;
  width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  background-color: var(--nutral-3);
  border-color: var(--primary-2);
}

textarea {
  padding: .75em;
}

.button, button, [type="submit"], [type="reset"], [type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: var(--nutral-1);
  color: var(--text-2);
  border-radius: 2rem;
  min-height: var(--inputSize);
  padding: .5em 1em;
  border: 1px solid transparent;
  cursor: pointer;
  outline: 0.125em solid transparent;
  transition: var(--transition);
  font-weight: 700;
  opacity: .9;
  text-decoration: none;
}
.button:focus, button:focus, [type="submit"]:focus, [type="reset"]:focus, [type="button"]:focus {
  border-color: rgba(0, 0, 0, 0.5);
}
.button:hover, .button:active, button:hover, button:active, [type="submit"]:hover, [type="submit"]:active, [type="reset"]:hover, [type="reset"]:active, [type="button"]:hover, [type="button"]:active {
  outline-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
  z-index: 2;
}
.button.secondary, button.secondary, [type="submit"].secondary, [type="reset"].secondary, [type="button"].secondary {
  color: var(--text);
  background-color: var(--nutral-2);
}
.button.tertiary, button.tertiary, [type="submit"].tertiary, [type="reset"].tertiary, [type="button"].tertiary {
  background-color: var(--bg-1);
}
.button.ghost, button.ghost, [type="submit"].ghost, [type="reset"].ghost, [type="button"].ghost {
  background-color: transparent;
  color: var(--text);
  border-color: var(--text);
}
.button.ghost.secondary, button.ghost.secondary, [type="submit"].ghost.secondary, [type="reset"].ghost.secondary, [type="button"].ghost.secondary {
  color: var(--text);
  border-color: var(--nutral-2);
}
.button.ghost.tertiary, button.ghost.tertiary, [type="submit"].ghost.tertiary, [type="reset"].ghost.tertiary, [type="button"].ghost.tertiary {
  color: var(--bg-1);
  border-color: var(--bg-1);
}
.button.link, button.link, [type="submit"].link, [type="reset"].link, [type="button"].link {
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  outline: none;
}
.button.link:hover, button.link:hover, [type="submit"].link:hover, [type="reset"].link:hover, [type="button"].link:hover {
  text-decoration: underline;
}

.disabled {
  filter: grayscale(1);
  opacity: .5;
}

.row {
  display: flex;
  margin-bottom: 1rem;
}
.row:last-child {
  margin-bottom: 0;
}

.input {
  display: flex;
  flex-basis: 100%;
  flex-flow: column;
}
.input strong {
  font-weight: 400;
  order: -1;
}

.row {
  margin-left: -1rem;
}
.row .input {
  margin-left: 1rem;
}

label {
  cursor: pointer;
}
label:hover {
  text-decoration: underline;
}

fieldset {
  margin-bottom: var(--padding);
}

legend {
  font-size: .875rem;
  padding: .25rem 1rem;
  background-color: var(--text);
  color: var(--bg-1);
}

.input {
  position: relative;
}
.input input[type="checkbox"],
.input input[type="radio"] {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
}
.input input[type="checkbox"] + strong,
.input input[type="radio"] + strong {
  position: relative;
  padding-left: 1.5em;
}
.input input[type="checkbox"] + strong:before,
.input input[type="radio"] + strong:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  background-color: var(--bg-1);
  border: 1px solid var(--text);
  border-radius: .25em;
}
.input input[type="checkbox"] + strong:after,
.input input[type="radio"] + strong:after {
  content: '';
  position: absolute;
  left: .125em;
  top: .125em;
  margin: 1px;
  width: .75em;
  height: .75em;
  border-radius: .25em;
  background-color: var(--primary-2);
  opacity: 0;
  transition: var(--transition);
}
.input input[type="checkbox"]:checked + strong:after,
.input input[type="radio"]:checked + strong:after {
  opacity: 1;
}
.input [type="radio"] + strong:before, .input [type="radio"] + strong:after {
  border-radius: 50%;
}

.buttons {
  display: flex;
  border-top: 1px solid;
  padding-top: calc(var(--padding) - .5rem);
  margin-top: var(--padding);
}
.buttons.center {
  justify-content: center;
}
.buttons.right {
  flex-flow: row-reverse;
}
.buttons .button {
  margin: .5rem .25rem 0 .25rem;
}

.required {
  z-index: 2;
  top: 1rem;
  margin: 0 0 var(--padding) 0;
  background-color: var(--brand-2);
  color: var(--bg-1);
  padding: calc(var(--padding) / 2);
  transition: var(--transition);
}
.required:before {
  --icon: url(/icon/check.svg);
  margin-right: .5rem;
}

html, body {
  background-color: var(--nutral-3);
}

html {
  visibility: visible;
}

body {
  padding-bottom: calc(var(--nav-height) + var(--padding));
}

html {
  scroll-behavior: smooth;
}

body:has(.filters.active),
body:has(.modal.active) {
  overflow: hidden;
}

.container {
  padding: 0 var(--padding);
  max-width: var(--max-width);
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  font-size: 0;
  opacity: 0;
  pointer-events: none;
}

.grid, .videos {
  position: relative;
  z-index: 2;
  justify-items: stretch;
  align-items: stretch;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--padding);
}
@media screen and (min-width: 1000px) {
  .grid, .videos {
    display: grid;
  }
}

.grid-center {
  justify-items: center;
}

main {
  transform: translate3d(0, 0, 0);
  transition: var(--transition);
  padding: 7rem 0;
}
main.compact {
  padding: 1rem 0;
}

.grid > *, .videos > * {
  grid-column-end: span var(--span, 12);
  grid-column-start: var(--offset, auto);
}
.grid .size-4, .videos .size-4 {
  --span: 4;
}
.grid .size-3, .videos .size-3 {
  --span: 3;
}
.grid .size-6, .videos .size-6 {
  --span: 6;
}
.grid .size-8, .videos .size-8 {
  --span: 8;
}
.grid .size-9, .videos .size-9 {
  --span: 9;
}

.offset-3 {
  --offset: 4;
}

.header {
  --color: var(--primary-2);
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  padding: calc(var(--padding) / 2);
  background: var(--bg);
  line-height: 1;
  filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));
}
.header li {
  position: relative;
}
.header i {
  font-size: 1.5rem;
  display: block;
  background-color: var(--nutral-1);
  opacity: .5;
}
.header a.nav-main {
  display: block;
  position: relative;
  z-index: 1;
  color: var(--color);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0;
  padding: .5rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  position: relative;
}
.header a.nav-main em {
  display: none;
  position: absolute;
  left: -.125rem;
  right: -.125rem;
  bottom: -.25rem;
  text-align: center;
  font-size: .625rem;
  color: var(--nutral-2);
  text-transform: uppercase;
  font-style: normal;
  padding: .35em .25em;
  background-color: var(--primary-1);
  border-radius: .25em;
  text-transform: uppercase;
  box-shadow: 0 0 5px 0 transparent;
  transition: all .3s;
}
.header a.nav-main:hover {
  z-index: 2;
}
.header a.nav-main:hover em {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 1000px) {
  .header a.nav-main em {
    box-shadow: 0 0 5px 0 transparent !important;
  }
}
.header a.nav-main[href*="videos"] {
  margin-top: -1.75rem;
  margin-bottom: -1.5rem;
  background-color: #FF672C;
}
.header a.nav-main[href*="videos"] em {
  bottom: .25rem;
  left: calc(-.125rem + .5rem);
  right: calc(-.125rem + .5rem);
}
@media screen and (min-width: 1000px) {
  .header a.nav-main[href*="videos"] em {
    bottom: -.25rem;
  }
}
.header a.nav-main[href*="videos"] i {
  --size: 2;
}
.header a[href="#MENU"] {
  transition: all .3s;
  top: 0;
}
.header a.nav-toggle {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  z-index: 10 !important;
  left: 0;
  bottom: calc(var(--padding) / -2);
  border-radius: 0 50% 50% 50%;
  transition: all .3s;
}
.header a.nav-toggle:after {
  content: '';
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
}
.header #MENU:target a[href="#MENU"] {
  opacity: 0;
  top: calc(var(--padding) / -2);
}
.header #MENU:target .nav-toggle {
  pointer-events: auto;
  opacity: 1;
  bottom: 0;
}
.header #MENU:target .nav-toggle:after {
  background-color: rgba(0, 0, 0, 0.2);
}
.header #MENU:target ul ul {
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  bottom: calc(var(--nav-height) - (var(--padding) / 2));
}
.header a:hover i, .header .active i {
  background-color: black;
}
.header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: 0;
}
.header ul ul {
  position: fixed;
  display: block;
  text-align: center;
  z-index: 12;
  left: calc(var(--padding) / 2);
  bottom: var(--nav-height);
  max-height: calc(100vh - var(--nav-height) - (1 * var(--padding)));
  overflow: auto;
  width: 15rem;
  background-color: #2a3904;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 0 0;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  border-radius: 1.625rem 1.625rem 1.625rem 0;
}
.header ul ul i {
  margin: 1rem auto;
  background-color: var(--bg-1);
  --size: 2;
  opacity: 1;
}
.header ul ul a {
  font-size: 1rem;
  line-height: 1;
  display: block;
  text-decoration: none;
  color: var(--bg-1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: calc(var(--padding) / 3);
}
.header .nav-footer {
  color: var(--bg-1);
  margin-top: 1rem;
  padding: calc(var(--padding) / 2);
  font-size: .75rem;
}

[style*="--avatar-me"] .avatar-me {
  background-image: var(--avatar-me);
  background-size: contain;
  background-repeat: no-repeat;
}

[style*="--avatar-me"] .header a[href*="profile"] {
  position: relative;
  background-image: var(--avatar-me);
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 0.125rem var(--primary-1) inset;
}
[style*="--avatar-me"] .header a[href*="profile"] i {
  opacity: 0;
}

dl {
  font-size: 0;
  margin-bottom: calc(1.5rem - .5rem);
}

dt, dd {
  font-size: 1rem;
  margin: 0;
}

dt {
  display: none;
}

@media screen and (min-width: 1000px) {
  dt, dd {
    display: inline-block;
    vertical-align: top;
    margin-bottom: .5rem;
  }

  dt {
    width: 10rem;
    text-align: right;
    font-weight: 700;
    padding-right: 1rem;
  }

  dd {
    width: calc(100% - 11rem);
  }
}
ul.clean {
  list-style: none;
  padding: 0;
  margin: 0 0 1lh 0;
}

[class*="-container"] {
  position: relative;
}

.conditions-article {
  padding-top: 10rem;
}

.conditions-nav {
  padding: 0;
  display: inline-block;
  position: sticky;
  list-style: none;
  top: var(--padding);
  color: var(--text-2);
  background-color: var(--brand-2);
  border-radius: var(--border-radius);
  border-top: 1px solid;
  padding: .25rem 0;
}
.conditions-nav a {
  display: block;
  color: var(--text-2);
  text-decoration: none;
  padding: 0.25rem var(--padding);
}
.conditions-nav li + li a {
  border-top: 1px solid;
}

[data-conditions="open"] .container,
[data-conditions="processing"] .container {
  padding: 0;
}
[data-conditions="open"] main,
[data-conditions="processing"] main {
  padding: 1rem 0;
}
[data-conditions="open"] main .inner,
[data-conditions="processing"] main .inner {
  padding: 0 1rem;
  filter: blur(0);
  transition: filter .3s;
}
[data-conditions="open"] .search-float,
[data-conditions="open"] .playlists-selector,
[data-conditions="open"] .filters,
[data-conditions="open"] .filters-selected,
[data-conditions="processing"] .search-float,
[data-conditions="processing"] .playlists-selector,
[data-conditions="processing"] .filters,
[data-conditions="processing"] .filters-selected {
  display: none;
}

[data-conditions="processing"] main .inner {
  pointer-events: none;
  filter: blur(5px);
}

.teaser-pass {
  position: relative;
  overflow: hidden;
  background-color: var(--nutral-2);
  padding: 1rem;
  min-height: calc(100% - 2rem - var(--padding));
  margin-bottom: var(--padding);
  border-radius: .625rem;
  display: flex;
  flex-flow: column;
  box-shadow: 0 0 5px 0 transparent;
  transition: box-shadow .3s;
}
.teaser-pass:has(a:hover) {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.teaser-pass.pass-mine {
  outline: 2px solid var(--primary-2);
}
.teaser-pass.pass-mine:before {
  content: 'Owned';
  position: absolute;
  right: 0;
  top: 0;
  width: 10rem;
  padding: .5rem 0;
  text-align: center;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--nutral-2);
  background-color: var(--primary-2);
  rotate: 45deg;
  transform-origin: right top;
  transform: translate3d(50%, 1rem, 0);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.teaser-pass img {
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  margin-bottom: 1rem;
  border-radius: .25rem;
}
.teaser-pass h3 {
  font-size: 1.25rem;
  margin: .5rem 0 1rem 0;
}
.teaser-pass h3 + h4 {
  margin: -1rem 0 1rem 0;
  font-weight: normal;
}
.teaser-pass p {
  margin: 0 0 1rem 0;
}
.teaser-pass p:last-child {
  margin-bottom: 0;
}
.teaser-pass .buttons {
  margin-top: auto;
  padding-top: 1rem;
}
.teaser-pass .button {
  display: flex;
  flex-basis: 100%;
  margin: 0;
}

body:has(#MENU:target) {
  pointer-events: none;
  overflow: hidden;
  touch-action: none;
  max-height: calc(100vh - var(--nav-height) + var(--padding));
}
body:has(#MENU:target) #MENU a[href="#_"] {
  pointer-events: auto;
}
body:has(#MENU:target) #MENU ul ul {
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.videos {
  display: grid;
  gap: 1px;
  margin: 0 0 1lh 0;
}
.videos:empty {
  margin: 0;
}
.videos > div {
  --span: 6;
}
@media screen and (min-width: 600px) {
  .videos > div {
    --span: 4;
  }
}
@media screen and (min-width: 1000px) {
  .videos > div {
    --span: 3;
  }
}
@media screen and (min-width: 80rem) {
  .videos > div {
    --span: 2;
  }
}
.videos-title {
  padding: 0 var(--padding);
  min-height: 4rem;
}
@media screen and (min-width: 1000px) {
  .videos-title {
    padding: 1rem var(--padding);
  }
}
.videos-title:after {
  content: " (" var(--videos) ")";
  display: block;
  font-size: 1rem;
  font-weight: normal;
}
.videos.no-more ~ .buttons {
  opacity: 0;
  pointer-events: none;
}

.video,
.video-order {
  position: relative;
  overflow: hidden;
  background-color: var(--text-1);
}
.video figure,
.video-order figure {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin: 0;
  scale: 1;
}
.video-content,
.video-order-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: calc(var(--padding) / 4);
}
.video-title,
.video-order-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-title, .video-duration,
.video-order-title,
.video-order-duration {
  color: var(--bg-1);
  margin: 0;
  line-height: 1.2;
  word-break: break-all;
  text-shadow: 0 0 5px black;
}
.video-title,
.video-order-title {
  font-weight: 600;
}
.video-duration,
.video-order-duration {
  font-variant-numeric: tabular-nums;
  background-color: rgba(0, 0, 0, 0.8);
  padding: .35em 0;
  position: absolute;
  width: 3.75em;
  white-space: nowrap;
  text-align: center;
  right: calc(var(--padding) / 4);
  top: calc(var(--padding) / 4);
}
.video-profiles,
.video-order-profiles {
  position: absolute;
  right: 4rem;
  top: calc(var(--padding) / 4);
  font-size: 0;
}
.video-profile,
.video-order-profile {
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--primary-2);
  border-radius: 50%;
  display: inline-block;
}
.video-profile span,
.video-order-profile span {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.video-link,
.video-order-link {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
}
.video img,
.video-order img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: var(--transition);
}
.no-touch .video:has(a:active) img, .no-touch .video:hover img, .no-touch
.video-order:has(a:active) img, .no-touch
.video-order:hover img {
  opacity: 1;
}
.video-actions-toggle,
.video-order-actions-toggle {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  padding: calc(var(--padding) / 4);
  color: var(--nutral-2);
  text-align: right;
  display: flex;
  align-items: center;
}
.video-actions-toggle i,
.video-order-actions-toggle i {
  font-size: .75rem;
  margin: .25rem 0;
}
[data-videos-selectable="true"] .video-actions-toggle, [data-videos-selectable="true"]
.video-order-actions-toggle {
  display: none;
}
.video-actions,
.video-order-actions {
  position: absolute;
  left: -.25rem;
  right: -.25rem;
  top: 0;
  background-color: transparent;
  padding: calc(var(--padding) / 4);
  padding-left: 2rem;
  display: flex;
  align-items: center;
  transition: all .3s;
}
[data-videos-selectable="true"] .video-actions, [data-videos-selectable="true"]
.video-order-actions {
  padding-left: calc(var(--padding) / 4);
}
.video-actions button,
.video-order-actions button {
  padding: 0;
  margin: 0 .125rem;
  font-size: 1rem;
  border-radius: 50%;
  min-height: auto;
  opacity: 0;
  transition: var(--transition);
  pointer-events: auto;
}
.video-actions button i,
.video-order-actions button i {
  font-size: .75rem;
  margin: .25rem;
}
.no-touch .video-actions button:hover i, .no-touch
.video-order-actions button:hover i {
  color: var(--primary);
}
.no-touch .video-actions button:hover, .no-touch
.video-order-actions button:hover {
  opacity: 1;
}
.no-touch .video-actions:hover, .no-touch
.video-order-actions:hover {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: .9;
}
.no-touch .video-actions:hover button, .no-touch
.video-order-actions:hover button {
  opacity: 1 !important;
}
.video-actions.active,
.video-order-actions.active {
  background-color: var(--primary-1);
  opacity: .9;
}
.video-actions.active button,
.video-order-actions.active button {
  opacity: 1 !important;
}
.no-touch .video:hover .no-touch .video-actions button, .no-touch
.video-order:hover .no-touch .video-actions button, .no-touch .video:hover .no-touch
.video-order-actions button, .no-touch
.video-order:hover .no-touch
.video-order-actions button {
  opacity: .75;
}
.no-touch .video:hover .no-touch .video-actions button:hover, .no-touch
.video-order:hover .no-touch .video-actions button:hover, .no-touch .video:hover .no-touch
.video-order-actions button:hover, .no-touch
.video-order:hover .no-touch
.video-order-actions button:hover {
  opacity: 1;
}
.no-touch .video .no-touch .video-actions:hover button, .no-touch
.video-order .no-touch .video-actions:hover button, .no-touch .video .no-touch
.video-order-actions:hover button, .no-touch
.video-order .no-touch
.video-order-actions:hover button {
  opacity: 1;
}
.no-touch .video .no-touch .video-actions:hover button:hover, .no-touch
.video-order .no-touch .video-actions:hover button:hover, .no-touch .video .no-touch
.video-order-actions:hover button:hover, .no-touch
.video-order .no-touch
.video-order-actions:hover button:hover {
  opacity: 1;
}
.video-category h2,
.video-order-category h2 {
  display: none;
}
.video-category ul,
.video-order-category ul {
  font-size: 0;
  padding: 0;
  list-style: none;
  margin: 0;
}
.video-category li,
.video-order-category li {
  position: relative;
}
.video-category h3,
.video-order-category h3 {
  padding-top: var(--padding);
  color: var(--brand-2);
  padding-bottom: var(--padding);
  border-bottom: 2px solid;
  margin-bottom: var(--padding);
}
.video-category h3:empty,
.video-order-category h3:empty {
  display: none;
}
.video-category h4,
.video-order-category h4 {
  margin-top: var(--padding);
}
.video-category > ul > li > ul > li,
.video-order-category > ul > li > ul > li {
  padding: 0 var(--padding) var(--padding) var(--padding);
  background-color: var(--bg-2);
  margin: 0 0 var(--padding) 0;
}
.video-category p,
.video-order-category p {
  margin: 0 0 var(--padding) 0;
  font-size: 1rem;
}
.video-category li:has(> label),
.video-order-category li:has(> label) {
  display: inline;
}

.video-order textarea {
  padding: 0;
  height: calc(3lh + (var(--padding) / 4));
  background-color: transparent;
  position: absolute;
  right: calc(var(--padding) / 4);
  left: calc(var(--padding) / 4);
  bottom: calc(var(--padding) / 4);
  padding: calc(var(--padding) / 4);
  border: none;
  resize: none;
  border-radius: 0;
  width: auto;
}

[data-like="true"] .video-action-like {
  opacity: 1 !important;
  order: -1;
}
[data-like="true"] .video-action-like i {
  color: var(--primary);
}

[data-fav="true"] .video-action-fav {
  opacity: 1 !important;
}
[data-fav="true"] .video-action-fav i {
  color: gold;
}

.video-detail {
  padding: var(--padding) var(--padding) calc(var(--nav-height) + var(--padding)) var(--padding);
  background-color: var(--nutral-3);
}
.video-detail h1 {
  margin-bottom: var(--padding);
}
.video-detail .video-player {
  position: relative;
  height: 0;
  padding-top: 60.50%;
  margin-bottom: 1lh;
  background-color: var(--text);
  margin-top: calc(var(--padding) * -1);
  margin-left: calc(var(--padding) * -1);
  margin-right: calc(var(--padding) * -1);
}
.video-detail .video-player iframe, .video-detail .video-player .video-processing {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.video-detail .categories {
  height: 3rem;
  overflow: auto;
  white-space: nowrap;
  margin-left: calc( -1 * var(--padding));
  margin-right: calc( -1 * var(--padding));
  padding-left: var(--padding);
  padding-right: var(--padding);
}
.video-detail .categories li {
  display: inline;
}
.video-detail .video-meta {
  display: flex;
  align-items: flex-start;
}
.video-detail .video-duration,
.video-detail .video-profiles, .video-detail .video-actions {
  margin: 0;
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin: 0 .5rem .5rem 0;
}
.video-detail .video-duration > span,
.video-detail .video-profiles > span, .video-detail .video-actions > span {
  margin: -.25rem .5rem 0 0;
}
.video-detail .video-actions {
  margin: -.25rem 0 0 auto;
  transform: none;
}
.video-detail .video-actions button {
  opacity: 1;
  margin: 0;
}

.video-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: var(--padding) calc(8rem + (1 * var(--padding))) var(--padding) var(--padding);
  background-color: var(--bg-1);
  min-height: calc(4.5rem - var(--padding));
  margin-bottom: calc(var(--padding) / 2);
  outline: 0.25em solid transparent;
  transition: var(--transition);
}
.video-card figure {
  position: absolute;
  right: calc(var(--padding) / 2);
  top: calc(var(--padding) / 2);
  width: 8rem;
  height: 4.5rem;
}
.video-card .video-duration {
  left: auto;
  right: calc(8rem + var(--padding) / 2);
  top: calc(var(--padding) / 2);
  transform: translate3d(100%, 0, 0);
}
.video-card .video-profiles {
  right: var(--padding);
  top: var(--padding);
}
.video-card .video-content {
  position: static;
  line-height: 1.2;
  font-size: 1rem;
  padding: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-card .video-title {
  line-height: 1.2;
  font-size: 1rem;
  text-shadow: none;
  color: var(--text);
}
.no-touch .video-card:hover {
  outline-color: rgba(0, 0, 0, 0.2);
}
.no-touch .video-card:hover .video-title {
  text-decoration: underline;
}

[data-videos-selectable="true"] .videos .video-actions {
  opacity: 1;
}
[data-videos-selectable="true"] .videos .video-actions .video-action-playlist {
  opacity: 1;
}
[data-videos-selectable="true"] .videos .video-actions .video-action-fav,
[data-videos-selectable="true"] .videos .video-actions .video-action-like {
  opacity: 0 !important;
  width: 0;
  margin: 0;
  pointer-events: none;
}
[data-videos-selectable="true"] .videos .video:not([data-selected="true"]) .icon-playlists {
  --icon: none;
  border-radius: 50%;
  background-color: var(--bg-1);
}
[data-videos-selectable="true"] .videos .video[data-selected="true"] button {
  background-color: var(--primary);
}
[data-videos-selectable="true"] .videos .video[data-selected="true"] a {
  box-shadow: 0 0 0rem 0.25rem var(--brand-1) inset;
}

.input-video {
  position: relative;
  display: block;
  padding: var(--padding);
  background-color: var(--bg-2);
  color: var(--bg-1);
  text-align: center;
}
.input-video i {
  display: block;
  color: var(--bg-1);
}
.input-video input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  opacity: 0;
}
.input-video strong, .input-video p {
  display: block;
  overflow: hidden;
  transition: var(--transition);
  max-height: 0;
}
.input-video p {
  margin: 0;
  text-decoration: none !important;
  max-height: 2lh;
}
.input-video p:empty {
  max-height: 0;
}
.input-video:has(p:empty) strong {
  max-height: 1lh;
}

.video-counter {
  position: absolute;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  pointer-events: none;
}

.video-category li li:has(:invalid) .required {
  position: sticky;
}
.video-category li li:has(:invalid) .required:before {
  --icon: url(/icon/circle-exclamation.svg);
}

.video-order {
  scale: 1;
  outline: .5rem solid transparent;
  transition: var(--transition);
}
.video-order img {
  opacity: 1;
}
.video-order .video-title {
  background-color: rgba(0, 0, 0, 0.5);
}

.draggable-over {
  transform: translate3d(0.25rem, 0, 0);
}

.draggable-over-right {
  transform: translate3d(-0.25rem, 0, 0);
}

.draggable-removable {
  outline-color: red;
  scale: .9;
}

.modal-scroller {
  white-space: nowrap;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  font-size: 0;
  padding: 0;
}
.modal-scroller > div {
  scroll-snap-align: start;
  display: inline-block;
  vertical-align: bottom;
  font-size: 1rem;
  white-space: normal;
  width: 100%;
  box-sizing: border-box;
}

[data-uploading="uploading"] .video-add [type="submit"] {
  pointer-events: none;
  font-size: 0;
  filter: grayscale(1);
  padding: .25rem 1rem;
}
[data-uploading="uploading"] .video-add [type="submit"]:after {
  font-size: 1rem;
  content: "Uploading... [" var(--progress) "]";
}

.video-add-thumb {
  position: relative;
  aspect-ratio: 1;
  width: 10rem;
  margin: 0 auto;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #fff;
  background-image: var(--thumb);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
.video-add-thumb:before {
  content: '';
  opacity: .75;
  background-color: var(--primary-2);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.video-add-thumb > * {
  position: relative;
  z-index: 2;
}

.video-processing:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4rem;
  height: 4rem;
  background-image: url(../img/bg_processing.gif);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  opacity: .5;
  transform: translate3d(-50%, -50%, 0);
}
.video-processing:after {
  content: 'Processing';
  font-size: .875rem;
  background-color: var(--primary-2);
  color: var(--bg-1);
  padding: .25rem .5rem;
  position: absolute;
  left: 50%;
  top: 50%;
  text-transform: uppercase;
  transform: translate3d(-50%, calc(-50% + 4rem), 0);
}

.video-player:has(.video-error):before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/bg_processing.gif);
  filter: blur(0.4px) contrast(1.1);
  background-repeat: no-repeat;
  background-size: 200px auto;
  background-position: 50% 50%;
  opacity: 1;
  background-color: var(--nutral-1);
}
.video-player:has(.video-error):after {
  content: 'Processing';
  font-size: .875rem;
  color: var(--bg-1);
  padding: .125rem .25rem;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  text-transform: uppercase;
  transform: translate3d(-50%, -50%, 0);
}

.playlist-videos {
  font-size: 0;
  width: 4.5rem;
  height: 4.5rem;
  position: relative;
  margin: .25rem;
}
.playlist-videos img {
  position: absolute;
  width: 4rem;
  height: 4rem;
  border: 0.25rem solid var(--bg-1);
  object-fit: cover;
}
.playlist-videos img:nth-child(2) {
  transform: translate3d(-0.5rem, 0.5rem, 0) rotate(2deg);
}

.playlist-link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 0;
}

.playlist-card {
  overflow: hidden;
  position: relative;
  display: block;
  padding: var(--padding) var(--padding) var(--padding) calc(4.5rem + calc(2 * var(--padding)));
  background-color: var(--bg-1);
  min-height: 4rem;
  margin: 0 0 .5rem 0;
  outline: 0.125em solid transparent;
  border-radius: var(--border-radius);
  transition: var(--transition);
}
.playlist-card:hover {
  outline-color: rgba(0, 0, 0, 0.2);
}
.playlist-card .playlist-videos {
  position: absolute;
  left: calc(var(--padding) / 2);
  top: calc(var(--padding) / 2);
}
.playlist-card .playlist-title {
  font-size: 1rem;
  line-height: 1.2;
}
.playlist-card .playlist-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlists-title {
  padding: 0 var(--padding);
  min-height: 4rem;
}
@media screen and (min-width: 1000px) {
  .playlists-title {
    padding: 1rem var(--padding);
  }
}
.playlists.no-more ~ .buttons {
  opacity: 0;
  pointer-events: none;
}

.playlists-selector {
  position: fixed;
  z-index: 97;
  left: 0;
  bottom: 0;
  right: 0;
  padding-bottom: calc(var(--nav-height));
  transition: var(--transition);
  display: none;
}
.playlists-selector-toggle {
  pointer-events: auto;
  position: fixed;
  z-index: 101;
  left: var(--padding);
  bottom: calc(var(--nav-height) + var(--padding) + var(--filter-height));
  font-size: 0;
  padding: .75rem;
  background-color: var(--primary-2);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: absolute;
  transition: var(--transition);
  width: 2rem;
  height: 2rem;
}
.playlists-selector-toggle:before {
  content: var(--selected);
  background-color: var(--primary-1);
  color: var(--text-2);
  position: absolute;
  right: -.5em;
  top: -.5em;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[style*='--selected: "0"'] .playlists-selector-toggle:before {
  display: none;
}
.playlists-selector-toggle i {
  position: absolute;
  background-color: var(--bg-2);
  font-size: 1rem;
  margin: .25rem;
  transition: var(--transition);
  opacity: 1;
}
.playlists-selector-toggle:after {
  content: var(--playlists);
  background-color: var(--primary-2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: var(--text-2);
  position: absolute;
  left: 50%;
  bottom: -1em;
  transform: translate3d(-50%, 0, 0);
  height: 1.5em;
  border-radius: 1.5rem;
  padding: 0 .5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
[style*='--playlists: "0"'] .playlists-selector-toggle:after {
  display: none;
}
.playlists-selector-toggle .icon-close {
  opacity: 0;
}
.playlists-selector-items {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  transition: var(--transition);
  background-color: var(--primary-2);
  padding: calc(var(--padding) / 2);
  display: flex;
}
[data-videos-selectable="true"] .playlists-selector-items {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.playlists-selector-items select, .playlists-selector-items input {
  appearance: none;
  border: none;
  background: none;
  min-height: auto;
  height: 2rem;
  padding: 0 calc(var(--padding) / 2);
  background-color: var(--bg-1);
  flex-basis: 100%;
}
.playlists-selector-items input {
  display: none;
}
.playlists-selector-items .button {
  min-height: auto;
  height: 2rem;
  margin-left: .25rem;
}
.playlists-selector-items .playlists-selector-add {
  order: 2;
}
.playlists-selector-items .tertiary {
  color: var(--primary);
}
.playlists-selector-items-new select {
  display: none;
}
.playlists-selector-items-new input {
  display: block;
}
.playlists-selector.active .playlists-toggle .icon-close {
  opacity: 1;
}
.playlists-selector.active .playlists-toggle .icon-playlists {
  opacity: 0;
}

body:has(.playlists-selector.active) main {
  pointer-events: none;
}

body:has(.video) .playlists-selector {
  display: block;
}

.playlist-detail {
  padding: var(--padding) var(--padding) calc(var(--nav-height) + var(--padding)) var(--padding);
  background-color: var(--bg-1);
}

[data-videos-selectable="true"] .playlists-selector-toggle {
  bottom: calc(var(--nav-height) + var(--padding) + calc(2rem + (2 * var(--padding) / 2)));
}
[data-videos-selectable="true"] .filters-toggle, [data-videos-selectable="true"] .filters-selected {
  opacity: 0;
  pointer-events: none;
}

.draggable-container {
  user-select: none;
}

.draggable {
  cursor: grab;
}

.draggable-active {
  cursor: grabbing;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.playlists[data-count]:before {
  content: attr(data-count) " items";
  display: block;
  margin: 0 0 .5lh 0;
}

.playlist-card[data-mine="true"] {
  box-shadow: 0 0 0 0.125rem var(--primary-1) inset;
}

.playlist-platform {
  background-color: var(--bg-2);
  padding: 0 var(--padding) 1px var(--padding);
}

.playlist-badges {
  float: right;
  font-size: 0;
  margin-bottom: .25rem;
}
.playlist-badges span {
  font-size: .75rem;
  line-height: 1;
  background-color: var(--nutral-1);
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 100% 0;
  color: var(--nutral-3);
  display: inline-block;
  padding: .25rem .5rem;
  text-transform: uppercase;
  margin: 0 0 1px 1px;
  border-radius: 2rem;
}

.removed {
  pointer-events: none;
}
.removed:after {
  content: '';
  position: absolute;
  z-index: 5;
  opacity: .5;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary-1);
}

.teaser-platform {
  position: relative;
  padding: 1rem;
  border: 1px solid var(--primary-2);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 0 0 1rem 0;
  background-color: var(--bg-3);
  display: flex;
  flex-flow: column;
}
.teaser-platform .teaser-content {
  flex-grow: 1;
}
.teaser-platform:before {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--nutral-2);
  opacity: .1;
  transition: var(--transition);
}
.teaser-platform > * {
  z-index: 2;
  position: relative;
}
.teaser-platform .buttons {
  margin-bottom: 0;
  margin-top: 1rem;
  padding-top: 1rem;
}
.teaser-platform .buttons .button:first-child {
  margin: 0;
}

.teaser-visual {
  aspect-ratio: 16/9;
  max-height: 5rem;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bg-2);
  padding: 1rem;
  margin: 0 0 1lh 0;
  border-radius: var(--border-radius);
}
.teaser-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.grid .teaser-platform, .videos .teaser-platform {
  min-height: calc(100% - 2rem - 2px - 1rem);
}

.platform-visual {
  border-radius: var(--border-radius);
  padding: 1rem;
  background-color: var(--bg-3);
  max-width: 20rem;
  margin: 0 auto;
}

.platform-shop-container {
  position: sticky;
  z-index: 2;
  bottom: calc(var(--nav-height) + var(--padding));
}

.platform-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-1);
  border-radius: var(--border-radius);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  padding: 1rem;
  text-align: center;
  color: var(--bg-1);
}
.platform-shop select {
  border: none;
  background-color: transparent;
  text-align: center;
  color: #fff;
  font-size: 1.25rem;
  border: 1px solid;
  margin: 0 0 1rem 0;
  padding: .25rem 1rem;
  min-height: auto;
}

.type-shop {
  --shop-unit: 2.5rem;
}
@media (min-width: 30rem) {
  .type-shop {
    --shop-unit: 3rem;
  }
}
.type-shop body {
  padding: .5rem 0 10rem 0;
  background-image: radial-gradient(97.94vw 294.61vh at 2.06vw 0vh, #db0f67 0%, #ff672c 50%, #86b40d 100%);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 50% 0;
}
@media (min-width: 30rem) {
  .type-shop .grid, .type-shop .videos {
    display: grid;
  }
}
.type-shop .items {
  padding: var(--padding) var(--padding) 0 var(--padding);
  margin-left: calc(var(--padding) * -1);
  margin-right: calc(var(--padding) * -1);
  justify-content: center;
  align-items: stretch;
  column-gap: var(--padding);
  row-gap: 0;
}
@media (min-width: 30rem) {
  .type-shop .items {
    display: flex;
    flex-wrap: wrap;
  }
}
.type-shop .items > .size-4 {
  flex: 0 0 calc(33.333% - (2 * var(--padding) / 3));
}
.type-shop header {
  background-color: #E2DFD4;
  padding: calc(var(--shop-unit) / 4) 0 calc(var(--shop-unit) / 2) 0;
}
.type-shop header .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.type-shop header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.type-shop header .shopnav-brands {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: calc(var(--shop-unit) / -4);
}
.type-shop header .shopnav-brands li {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  margin: calc(var(--shop-unit) / 4) calc(var(--shop-unit) / 2);
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 100% 0;
}
.type-shop header .shopnav-brands li:first-child {
  margin-right: calc((var(--shop-unit) / 2) + 1px);
}
.type-shop header .shopnav-brands li:first-child a em {
  background-color: var(--primary-1);
}
.type-shop header .shopnav-brands li:first-child:after {
  content: '';
  background-color: #86b40d;
  width: 1px;
  position: absolute;
  left: 100%;
  margin: calc(var(--shop-unit) / 4) calc(var(--shop-unit) / 2);
  top: 0;
  bottom: 0;
}
.type-shop header .shopnav-brands li:has(.shopnav-brand-campus) em {
  background-color: var(--nutral-1);
}
.type-shop header .shopnav-brands a {
  display: block;
  width: var(--shop-unit);
  height: var(--shop-unit);
  margin: calc(var(--shop-unit) / 4);
  font-size: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.type-shop header .shopnav-brands a em {
  font-size: .7rem;
  letter-spacing: -.5px;
  color: var(--bg-2);
  position: absolute;
  left: -.75rem;
  right: -.75rem;
  bottom: calc(var(--shop-unit) / -4);
  font-style: normal;
  text-align: center;
  background-color: #86b40d;
  border-radius: .25em;
  text-transform: uppercase;
  padding: .125em .25em;
  box-shadow: 0 0 5px 0 transparent;
  transition: all .3s;
  white-space: nowrap;
}
.type-shop header .shopnav-brands a em:before {
  content: 'ASM ';
  font-weight: 700;
}
.type-shop header .shopnav-brands a:hover em {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.type-shop header .shopnav-brand-asm,
.type-shop header .shopnav-brand-gallery,
.type-shop header .shopnav-brand-campus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='123' height='162' fill='none'%3E%3Cpath fill='%23fff' d='M104.262 49.326c-47.191-1.252-37.135-21.889-27.185-28.159 14.878-9.375 1.17-29.603-15.335-17.317C53.67 9.858 38.804 23.13 44.662 40c5.826 16.774 26.796 22.94 26.796 22.94-14.866 4.329-39.555 6.43-58.168-.123C1.145 58.542-4.608 73.082 4.394 78.03 40.917 98.1 89.396 95.662 89.396 95.662c-25.753 9.244-50.363 8.114-59.962 7.061-7.609-.835-11.004 8.916-3.98 12.169 25.519 11.818 48.229 11.35 48.229 11.35-5.62 4.329-22.213 16.381-20.486 30.189 1.024 8.185 10.11 6.625 8.428 0-3.142-12.381 21.777-27.429 27.47-30.868l.04-.023c6.555-3.959 3.597-10.963-2.108-10.414-15.803 1.521-23.88-.234-23.88-.234 9.103-.544 41.987-7.334 57.008-22.349 6.215-6.212 1.639-16.732-7.843-14.51-20.485 4.804-38.017 2.3-38.017 2.3 6.321-1.638 18.633-5.462 31.462-10.958 11.745-5.031 10.575-19.729-1.495-20.049'/%3E%3C/svg%3E");
}
.type-shop main {
  padding: 0;
  background-color: var(--nutral-3);
  margin-left: calc(-1 * var(--padding));
  margin-right: calc(-1 * var(--padding));
  padding: var(--padding);
}
.type-shop footer {
  background-color: #1A1609;
  padding: var(--shop-unit);
  color: var(--nutral-2);
}
.type-shop footer p:last-child, .type-shop footer ul:last-child {
  margin: 0;
}
.type-shop .shopnav-actions {
  position: relative;
  z-index: 10;
  margin-right: calc(var(--shop-unit) / -4);
}
.type-shop .shopnav-actions .icon-profile {
  font-size: calc(var(--shop-unit) * .75);
  color: var(--nutral-3);
}
.type-shop .shopnav-actions > li {
  background-color: var(--primary-2);
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 100% 0;
  border-radius: 50%;
  margin: calc(var(--shop-unit) / 4);
}
.type-shop .shopnav-actions > li > a {
  position: relative;
  display: flex;
  color: var(--nutral-3);
  align-items: center;
  justify-content: center;
  font-size: 0;
  width: calc(var(--shop-unit) * 1.5);
  height: calc(var(--shop-unit) * 1.5);
}
.type-shop .shopnav-actions > li > a em {
  font-size: .7rem;
  color: var(--bg-1);
  position: absolute;
  left: -.75rem;
  right: -.75rem;
  bottom: calc(var(--shop-unit) / -4);
  font-style: normal;
  text-align: center;
  background-color: #86b40d;
  border-radius: .25em;
  text-transform: uppercase;
  padding: .125em .25em;
  box-shadow: 0 0 5px 0 transparent;
  transition: all .3s;
}
.type-shop .shopnav-actions > li > a:hover em {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.type-shop .shopnav-actions > li a[href*="#_"] {
  display: none;
}
.type-shop .shopnav-actions ul {
  display: block;
  position: absolute;
  right: calc(var(--shop-unit) / 4);
  top: calc(100% - (var(--shop-unit) / 4));
  text-align: right;
  scroll-margin-top: 9.5rem;
  max-height: 0;
  transition: all .3s;
  opacity: 0;
  pointer-events: none;
  font-size: 0;
}
.type-shop .shopnav-actions ul li {
  display: block;
  margin-top: 1px;
}
.type-shop .shopnav-actions ul:target {
  max-height: 500px;
  opacity: 1;
  pointer-events: auto;
}
.type-shop .shopnav-actions ul a {
  display: inline-block;
  white-space: nowrap;
  background-color: #86b40d;
  font-size: calc(var(--shop-unit) / 4);
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 100% 0;
  padding: .125em .5em;
  border-radius: .25em 0 0 .25em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--nutral-3);
  box-shadow: 0 0 5px 0 transparent;
  transition: all .3s;
}
.type-shop .shopnav-actions ul a:hover {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.type-shop .shopnav-actions li:has(ul:target) {
  border-radius: 50% 50% 0 50%;
}
.type-shop .shopnav-actions li:has(ul:target) a[href*="#"] {
  display: none;
}
.type-shop .shopnav-actions li:has(ul:target) a[href*="#_"] {
  display: flex;
}
.type-shop .shopnav-actions li:has(ul:target) li:first-child a {
  border-radius: .25em 0 .25em .25em;
}
.type-shop .panel {
  background-color: rgba(0, 0, 0, 0.02);
  padding: 1rem;
  border-radius: .625rem;
  margin: 0 0 1lh 0;
}
.type-shop .plan-buy .row {
  align-items: flex-end;
}
.type-shop .plan-buy .input {
  white-space: nowrap;
}
.type-shop .plan-buy .input select {
  border-radius: .25rem 0 0 .25rem;
}
.type-shop .plan-buy button {
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 0 .25rem .25rem 0;
  outline: 0;
}
.type-shop .panel {
  box-shadow: 0 0 5px 0 transparent;
  transition: all .3s;
}
.type-shop .panel:has(button:hover) {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.type-shop .plan-access {
  list-style: none;
  padding: 0;
  margin: 0 0 1lh 0;
}
.type-shop .plan-access li {
  position: relative;
  display: inline-block;
  font-size: .875rem;
  margin: 0 .5rem .5rem 0;
  border-radius: 2em .25rem .25rem 2em;
  background-color: var(--primary-1);
  padding: .5rem 1rem .5rem 2.5rem;
  color: var(--nutral-3);
  transition: all .3s;
}
.type-shop .plan-access li a {
  display: inline-block;
  text-decoration: none;
  color: var(--nutral-3);
}
.type-shop .plan-access li:has(a:hover) {
  background-color: var(--primary-2);
}
.type-shop .plan-access li:before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .25rem;
  bottom: .25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='123' height='162' fill='none'%3E%3Cpath fill='%23fff' d='M104.262 49.326c-47.191-1.252-37.135-21.889-27.185-28.159 14.878-9.375 1.17-29.603-15.335-17.317C53.67 9.858 38.804 23.13 44.662 40c5.826 16.774 26.796 22.94 26.796 22.94-14.866 4.329-39.555 6.43-58.168-.123C1.145 58.542-4.608 73.082 4.394 78.03 40.917 98.1 89.396 95.662 89.396 95.662c-25.753 9.244-50.363 8.114-59.962 7.061-7.609-.835-11.004 8.916-3.98 12.169 25.519 11.818 48.229 11.35 48.229 11.35-5.62 4.329-22.213 16.381-20.486 30.189 1.024 8.185 10.11 6.625 8.428 0-3.142-12.381 21.777-27.429 27.47-30.868l.04-.023c6.555-3.959 3.597-10.963-2.108-10.414-15.803 1.521-23.88-.234-23.88-.234 9.103-.544 41.987-7.334 57.008-22.349 6.215-6.212 1.639-16.732-7.843-14.51-20.485 4.804-38.017 2.3-38.017 2.3 6.321-1.638 18.633-5.462 31.462-10.958 11.745-5.031 10.575-19.729-1.495-20.049'/%3E%3C/svg%3E");
  background-color: var(--nutral-1);
  background-size: calc(100% - 1rem) auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.type-shop .plan-access li.plan-access-gallery:before {
  background-color: var(--brand-2);
}
.type-shop h3:has(+ .plan-access),
.type-shop .plan-access {
  display: none;
}
.type-shop h3:has(+ .plan-access li),
.type-shop .plan-access:has(li) {
  display: block;
}

.search-float {
  position: fixed;
  z-index: 97;
  left: var(--padding);
  top: var(--padding);
  border-radius: 2rem;
  outline: 100vh solid rgba(0, 0, 0, 0.5);
}
.search-float:has(#search-input:placeholder-shown) {
  outline: 0vh solid transparent;
}
.search-float .search-input {
  position: relative;
  z-index: 2;
  height: 3.5rem;
  min-height: auto;
  width: 0;
  font-size: 1.5rem;
  padding: .25rem 1rem .25rem 2.5rem;
  box-sizing: border-box;
  background-color: var(--bg-1);
  border: none;
  outline: 2px solid var(--primary);
  border-radius: 2rem;
  transition: var(--transition);
  transition-delay: 300ms;
}
.search-float .search-input:focus {
  width: calc(100vw - (2 * var(--padding)));
  padding-left: 4rem;
}
.search-float .search-button {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: none;
  margin: .125rem;
  transition: var(--transition);
  transition-delay: 300ms;
}
.search-float .search-input:focus ~ .search-button {
  opacity: .9;
  pointer-events: auto;
}
.search-float .search-input:focus ~ .search-button:hover {
  opacity: 1;
}
.search-float label {
  position: relative;
  z-index: 2;
  font-size: 0;
  padding: .75rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  margin: .25rem;
  opacity: 0;
  transition: var(--transition);
}
.search-float label i {
  font-size: 1rem;
}
.search-float label[for="TOP"] {
  opacity: 0;
  pointer-events: none;
}
.search-float label[for="search-input"] {
  opacity: 1;
}
.search-float :focus ~ [for="search-input"] {
  opacity: 0;
  pointer-events: none;
}
.search-float :focus ~ [for="TOP"] {
  opacity: 1;
  pointer-events: auto;
}

body:has(.search.container) .search-input ~ .search-button {
  opacity: .9;
  pointer-events: auto;
}
body:has(.search.container) .search-input ~ .search-button:hover {
  opacity: 1;
}
body:has(.search.container) .search-input {
  width: calc(100vw - (2 * var(--padding)));
  padding-left: 4rem;
  outline: none;
}
body:has(.search.container) .search-input ~ [for="TOP"] {
  display: none;
}
body:has(.search.container) .search-input:focus ~ [for="search-input"] {
  opacity: 1;
  pointer-events: auto;
}

.search-items {
  display: flex;
  flex-flow: column;
}

.search-item-focus {
  order: -1;
}

.search-item {
  margin-bottom: 3rem;
}
.search-item .buttons {
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}
.search-item[data-next="true"] .buttons {
  opacity: 1;
  pointer-events: auto;
}
.search-item-title {
  text-align: center;
  position: sticky;
  z-index: 5;
  background-color: var(--bg-2);
  width: fit-content;
  margin: 0 auto calc(var(--padding) / 2) auto;
  top: calc(4rem + var(--padding));
  padding: calc(var(--padding) / 2) var(--padding);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: var(--transition);
}
.search-item-title:after {
  content: " (" var(--results) ")";
  display: block;
  font-size: 1rem;
  font-weight: normal;
}
.search-item a {
  text-decoration: none;
}
.search-item a:hover .search-item-title {
  background-color: var(--primary-2);
  color: var(--bg-1);
  text-decoration: none;
}

.search-item:has(.search-item-results:empty) {
  display: none;
}

.icon-profile span {
  width: 100%;
  height: 100%;
  display: block;
}

.search-results {
  position: absolute;
  z-index: 1;
  left: calc(var(--padding) / -2);
  width: calc(100vw - (1 * var(--padding)));
  box-sizing: border-box;
  top: calc(var(--padding) / -2);
  background-color: var(--bg-2);
  padding: 5rem var(--padding) calc(var(--padding) * 2) var(--padding);
  border-radius: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  transition-delay: 1000ms;
  overflow: auto;
  max-height: calc(100vh - 7rem);
}

.search-float .search-results {
  opacity: 1;
  pointer-events: auto;
  padding: 5rem var(--padding) calc(var(--padding) * 2) var(--padding);
}

#search-input:placeholder-shown ~ .search-results,
.search-results:empty {
  opacity: 0;
  pointer-events: none;
}

.search-float .search-item-title {
  top: 0rem;
}

.type-search .search-results {
  display: none;
}
.type-search .search-input {
  width: calc(100vw - (2 * var(--padding)));
  padding-left: 4rem;
}
.type-search .search-float {
  outline: none;
}

.search-item-category {
  display: inline;
}

.category-card {
  display: inline;
}
.category-card p {
  display: none;
}
.category-card article, .category-card div {
  display: inline;
}

html {
  --filter-height: 0rem;
}
html[style*='--tags: '] {
  --filter-height: calc(2rem + (2 * var(--padding) / 2));
}
html[style*='--tags: "0"'] {
  --filter-height: 0rem;
}

.filters {
  position: fixed;
  z-index: 98;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.filters-toggle {
  pointer-events: auto;
  position: fixed;
  z-index: 101;
  right: var(--padding);
  bottom: calc(var(--nav-height) + var(--padding) + var(--filter-height));
  font-size: 0;
  padding: .75rem;
  background-color: var(--primary);
  border-radius: 50%;
  position: absolute;
  transition: var(--transition);
  width: 2rem;
  height: 2rem;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
}
.filters-toggle:before {
  content: var(--tags);
  background-color: var(--primary-2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: var(--nutral-3);
  position: absolute;
  right: -.5em;
  top: -.5em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[style*='--tags: "0"'] .filters-toggle:before {
  display: none;
}
.filters-toggle:after {
  content: var(--videos);
  background-color: var(--primary-1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: var(--nutral-2);
  position: absolute;
  left: 50%;
  bottom: -1em;
  transform: translate3d(-50%, 0, 0);
  height: 1.5em;
  border-radius: 1.5rem;
  padding: 0 .5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
[style*='--tags: "0"'] .filters-toggle:after {
  display: none;
}
.filters-toggle i {
  position: absolute;
  background-color: var(--nutral-3);
  font-size: 1rem;
  margin: .25rem;
  transition: var(--transition);
  opacity: 1;
}
.filters-categories {
  position: relative;
  z-index: 2;
  padding: var(--padding);
  padding-bottom: calc(var(--nav-height) + var(--padding) + 50vh);
  max-height: 100vh;
  background-color: var(--filter-bg);
  color: var(--text-1);
  min-height: 100%;
  box-sizing: border-box;
  overflow: auto;
  transition: var(--transition);
  width: calc(100vw - (2 * var(--padding)));
  max-width: 30rem;
  transform: translate3d(100%, 0, 0);
}
.filters-backdrop {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--nutral-2);
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  font-size: 0;
}
.filters.active .filters-backdrop {
  opacity: .85;
  pointer-events: auto;
}
.filters fieldset {
  position: relative;
}
.filters.active .filters-categories {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}
.filters.active .filters-toggle {
  background-color: var(--brand-2);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
  filter: brightness(90%);
}
.filters h3 {
  line-height: 1.2;
  background-color: var(--filter-bg);
  padding: calc(var(--padding));
  padding-top: calc(var(--padding) * 1);
  margin: 0 calc(var(--padding) / -1) 1rem calc(var(--padding) / -1);
  position: sticky;
  z-index: 10;
  top: calc(var(--padding) / -1);
}
.filters h3:before {
  content: '';
  position: absolute;
  left: var(--padding);
  right: var(--padding);
  bottom: 0;
  height: 1px;
  background-color: var(--nutral-3);
}
.filters [type="reset"] {
  position: absolute;
  z-index: 2;
  right: 0;
  background-color: transparent;
  color: var(--text);
  padding: .25rem .5rem;
  display: none;
}
.filters.filtered [type="reset"] {
  display: block;
}
.filters fieldset, .filters ul {
  clear: both;
}
.filters h4 {
  margin-top: 1lh;
}
.filters ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}
.filters li {
  display: inline;
  font-size: 0;
}
.filters.filtered ul {
  display: none;
}
.filters.filtered ul li {
  display: none;
}
.filters.filtered ul li.found, .filters.filtered ul li:has(.found) {
  display: inline;
}
.filters.filtered ul:has(.found) {
  display: block;
}
.filters .tags > li > fieldset > ul > li:has(ul) {
  display: block;
}
.filters .tags > li > fieldset > ul > li:has(ul) > label > strong {
  border-bottom: 1px solid #fff;
}
.filters .tags > li > fieldset > ul > li > ul {
  margin: 0;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}
.filters .tags > li > fieldset > ul > li {
  transition: var(--transition);
  margin-top: 0;
}
.filters .tags > li > fieldset > ul > li:has(:checked) {
  margin-top: .5rem;
}
.filters .tags > li > fieldset > ul > li:has(> label :checked) > ul,
.filters .tags > li > fieldset > ul > li > ul:has(:checked) {
  opacity: 1;
  max-height: 1000vh;
  pointer-events: auto;
  margin-bottom: 1rem;
}

.tag {
  margin: 0;
  display: inline-block;
  margin: 0 .25rem .25rem 0;
}
.tag strong {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
  padding: .5rem;
  transition: var(--transition);
  outline: 1px solid transparent;
  overflow: hidden;
}
.tag strong:before, .tag strong:after {
  display: none;
}
.tag input[type="checkbox"] + strong {
  padding-left: .5rem;
}
.tag:hover input + strong {
  outline: 1px solid var(--brand);
}
.tag :checked + strong, .tag.checked strong {
  background-color: white;
  color: var(--primary);
}
.categories .tag:hover input + strong, .filters-selected .tag:hover input + strong {
  outline: 1px solid var(--text-2);
}

.sports {
  font-size: 0;
}

.sports li {
  display: inline-block;
}

.filters-selected-clear {
  float: right;
  text-decoration: none;
  font-weight: 500;
  display: none;
}
.filters-selected-clear i {
  --size: .75;
  float: right;
  position: relative;
  top: .25rem;
  margin-left: .25rem;
}
[style*="--tags"] .filters-selected-clear {
  display: block;
}
[style*='--tags: "0"'] .filters-selected-clear {
  display: none;
}

.filters-selected {
  color: var(--text-2);
  font-size: 0;
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: var(--nav-height);
  overflow: auto;
  padding: calc(var(--padding) / 2);
  background-color: var(--filter-bg);
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  transition: var(--transition);
  filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));
}
.filters-selected:empty {
  transform: translate3d(0, 6rem, 0);
}
.filters-selected .tag {
  margin-bottom: 0;
}
.filters .filters-selected {
  position: relative;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  margin-left: calc(var(--padding) * -1);
  margin-right: calc(var(--padding) * -1);
  margin-bottom: 1.5rem;
  min-height: 2.25rem;
  padding: .25rem 0 0 0;
  filter: none;
}
.filters .filters-selected:empty {
  transform: translate3d(0, 0, 0);
}
.filters .filters-selected:empty:before {
  font-size: 1rem;
  display: block;
  content: attr(data-empty);
  text-align: center;
  opacity: .5;
}
.filters .filters-selected .tag:first-child {
  margin-left: var(--padding);
}
.filters .filters-selected .tag:last-child {
  margin-right: var(--padding);
}

body:has(.filters.active) main {
  pointer-events: none;
  transform: translate3d(-10%, 0, 0);
}

.filters li:has(.filter-search-tags):has(ul:empty) {
  display: none;
}

.profile-buttons {
  position: absolute;
  right: var(--padding);
  top: var(--padding);
  z-index: 2;
}
.profile-name {
  text-align: center;
  position: relative;
}
.profile-name span {
  display: block;
  margin: 0 auto;
  border-radius: 0;
}
.profile-name span:before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 3.75em;
  height: .25em;
  background-color: var(--primary);
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 50% 0;
}
.profile-link {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
}

.profile-avatar {
  display: inline-block;
  width: 4em;
  height: 4em;
  border-radius: 50%;
}
.profile-avatar span {
  display: block;
  height: 100%;
}

.profile-avatar-sliders {
  background-color: var(--nutral-3);
  padding: var(--padding);
  border-radius: var(--border-radius);
  margin-top: 2rem;
}
.profile-avatar-sliders label {
  position: relative;
  display: block;
  margin-bottom: 1rem;
}
.profile-avatar-sliders label strong {
  display: block;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 1rem;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  color: #435a06;
  line-height: 1;
  text-transform: capitalize;
}
.profile-avatar-sliders label input {
  width: 100%;
  display: block;
}
.profile-avatar-sliders input[type="range"] {
  box-sizing: border-box;
  -webkit-appearance: none;
  background-color: var(--bg-2);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 2.5rem;
  transition: all .3s;
  border-radius: 5rem;
  overflow: hidden;
  outline: 2px solid transparent;
}
.profile-avatar-sliders input[type="range"]:active {
  outline: 2px solid var(--primary-2);
}
.profile-avatar-sliders input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5rem;
  height: 2.5rem;
  border-radius: none;
  background-color: #c2d985;
  opacity: 1;
  box-shadow: -20rem 0 0 20rem var(--primary-2), -40rem 0 0 20rem var(--primary-2), -60rem 0 0 20rem var(--primary-2);
}
.profile-avatar-sliders input[type="range"]::-moz-range-thumb {
  border: none;
  width: 1.5rem;
  height: 2.5rem;
  border-radius: 0;
  background-color: #c2d985;
  opacity: 1;
  box-shadow: -20rem 0 0 20rem var(--primary-2), -40rem 0 0 20rem var(--primary-2), -60rem 0 0 20rem var(--primary-2);
}

#avatar-svg {
  display: block;
  position: sticky;
  z-index: 3;
  top: var(--padding);
  width: 10rem;
  height: 10rem;
  margin: -3rem auto 2rem auto;
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: 50% 0;
  border-radius: 50%;
}
#avatar-svg span {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.profile-card {
  overflow: hidden;
  position: relative;
  display: block;
  padding: var(--padding) var(--padding) var(--padding) calc(7rem + var(--padding));
  background-color: var(--bg-1);
  min-height: 4rem;
  margin: 0 0 .5rem 0;
  outline: 0.25em solid transparent;
  transition: var(--transition);
}
.profile-card .icon-profile {
  --size: 1;
  font-size: 4rem;
  position: absolute;
  left: var(--padding);
  top: var(--padding);
  mask: none;
  -webkit-mask: none;
  background: none;
  border-radius: 50%;
  background-color: var(--primary-2);
}
.profile-card a {
  text-decoration: none;
}
.profile-card h1 {
  font-size: 1.25rem;
}
.profile-card .profile-link {
  position: absolute;
  left: 9;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
}
.profile-card .profile-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-card .profile-bio > div {
  white-space: pre-line;
  font-size: 1rem;
}
.profile-card:hover {
  outline-color: rgba(0, 0, 0, 0.2);
}
.profile-card:hover .profile-title {
  text-decoration: underline;
}

.items-container {
  margin-bottom: 1lh;
}
.items-container .message-empty {
  display: none;
}
.items-container div:empty + .message-empty {
  display: block;
}

h2 .edit, h1 .edit, .profile-bio .edit {
  margin-left: auto;
  font-size: .875rem;
  text-transform: uppercase;
  line-height: inherit;
  font-weight: normal;
  white-space: nowrap;
  display: none;
  font-size: 0;
  background-color: var(--bg-2);
  width: 1.75rem;
  height: 1.75rem;
  vertical-align: middle;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin: -.25rem .125rem 0 .125rem;
  border: 1px solid;
  color: var(--primary-2);
}
h2 .edit:hover, h1 .edit:hover, .profile-bio .edit:hover {
  background-color: var(--primary-2);
}
h2 .edit:hover:before, h1 .edit:hover:before, .profile-bio .edit:hover:before {
  color: var(--bg-1);
}
[data-mine="true"] h2 .edit, [data-mine="true"] h1 .edit, [data-mine="true"] .profile-bio .edit {
  display: inline-flex;
}
h2 .edit:before, h1 .edit:before, .profile-bio .edit:before {
  font-size: 1rem;
  --size: .5;
  --icon: url(/icon/pencil.svg);
  color: var(--primary-2);
}
h2 .edit[href*="remove"], h1 .edit[href*="remove"], .profile-bio .edit[href*="remove"] {
  background-color: var(--bg-4);
  color: var(--primary-1);
}
h2 .edit[href*="remove"]:before, h1 .edit[href*="remove"]:before, .profile-bio .edit[href*="remove"]:before {
  color: var(--primary-1);
  --icon: url(/icon/trash.svg);
}
h2 .edit[href*="remove"]:hover, h1 .edit[href*="remove"]:hover, .profile-bio .edit[href*="remove"]:hover {
  background-color: var(--primary-1);
}
h2 .edit[href*="remove"]:hover:before, h1 .edit[href*="remove"]:hover:before, .profile-bio .edit[href*="remove"]:hover:before {
  color: var(--bg-1);
}

[data-say] {
  position: relative;
}

[data-say]:after {
  position: absolute;
  z-index: 3;
  text-align: left;
  left: 50%;
  top: 50%;
  margin: .5rem;
  white-space: pre-wrap;
  content: attr(data-say);
  background-color: var(--bg-1);
  border-radius: 0 .5rem .5rem .5rem;
  font-size: .875rem;
  line-height: 1.25;
  padding: .75rem 1rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.messages:has(.me-verify) {
  margin: 0;
  background-color: rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
}
.messages:has(.me-verify) .me-verify {
  max-width: 20rem;
  margin: auto;
}

.user-avatar {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: -.5rem 0;
}
.user-avatar span {
  display: block;
  height: 100%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}

.profile-account {
  list-style: none;
  padding: 0;
  margin: 0 0 1lh 0;
  --size: .625;
}
.profile-account a {
  text-decoration: none;
}
.profile-account a:before {
  position: relative;
  top: -.125rem;
  margin-right: .25rem;
}
.profile-account a:hover {
  text-decoration: underline;
}

.profile-bio {
  position: relative;
  text-align: center;
}

.profile-name .edit {
  position: absolute;
  top: -1rem;
  transform: translate3d(-50%, 0, 0);
}

.profile-bio {
  position: relative;
  padding-bottom: 2.75rem;
}
.profile-bio .edit {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.not-loggedin {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  position: sticky;
  z-index: 5;
  bottom: calc(var(--nav-height) + (var(--padding) / 2));
}
.not-loggedin-inner {
  --size: 5rem;
  position: relative;
  padding: 1rem;
  padding-top: calc(var(--size) - 1rem);
  background-color: var(--bg-3);
  border-radius: var(--border-radius);
  margin-left: .5rem;
  margin-right: .5rem;
  margin-top: calc(var(--size) + var(--padding));
  text-align: center;
}
main .not-loggedin-inner {
  margin-left: -.5rem;
  margin-right: -.5rem;
}
.not-loggedin-inner figure {
  background: radial-gradient(98.01% 164.61% at 13.47% -15.76%, #db0f67 0%, #ff672c 50%, #86b40d 100%);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -50%, 0);
  width: var(--size);
  height: var(--size);
  padding: 1rem;
}
.not-loggedin-inner figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
.not-loggedin .buttons {
  border: none;
  margin: 0;
  padding: 0;
}
.not-loggedin .buttons .button {
  margin-top: 0;
}