@import url("//fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
html {
  --nutral-1: #000000;
  --nutral-2: #ffffff;
  --nutral-3: #cdcdcd;
  --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: #f2f7e5;
  --bg-3: #ecf3d9;
  --bg-4: #fdf6f9;
  --bg-5: #fae3ed;
  --padding: 1rem;
  --max-width: 80rem;
  --border-radius: .5rem;
  --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 {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  border-bottom: 0.5rem solid var(--primary-1);
  font-size: 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-1);
  background-color: var(--primary-2);
}
.tabs-options a.active {
  background-color: var(--primary-1);
  color: var(--bg-1);
}
.tabs-tab {
  display: none;
}
.tabs-tab.active {
  display: block;
}

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

.maven {
  font-family: 'Roboto Condensed', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html, input, option, select, button, textarea {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem;
}

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

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

.icon, .icon-logo, .modal .modal-close, .required:before, h2 .edit:before, h1 .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(../img/logo_asm.png);
}

.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(../img/logo_asm.png);
}

.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 {
  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(--primary-2);
  color: var(--text-2);
  border-radius: .25rem;
  min-height: var(--inputSize);
  padding: .25em 1em;
  border: 1px solid transparent;
  cursor: pointer;
  outline: 0.25em 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 {
  background-color: var(--primary-1);
}
.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(--primary-2);
  border-color: var(--primary-2);
}
.button.ghost.secondary, button.ghost.secondary, [type="submit"].ghost.secondary, [type="reset"].ghost.secondary, [type="button"].ghost.secondary {
  color: var(--primary-1);
  border-color: var(--primary-1);
}
.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 var(--primary);
  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(--bg-2);
}

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

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

.header {
  --color: var(--primary-2);
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  padding: calc(var(--padding) / 2);
  background-color: var(--color);
  line-height: 1;
  filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));
}
.header i {
  font-size: 1.5rem;
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
}
.header a {
  display: block;
  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%;
}
.header a[href*="videos"] {
  margin-top: -1.75rem;
  margin-bottom: -1.5rem;
  background-color: var(--color);
}
.header a[href*="videos"] i {
  --size: 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;
}

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

dt:has(+ dd:empty), dd:empty {
  display: none;
}

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

.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;
  margin: 0 0 0 -1.5rem;
}
.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(--bg-4);
}
.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.25em solid transparent;
  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-title:after {
  content: " (" var(--playlists) ")";
  display: block;
  font-size: 1rem;
  font-weight: normal;
}
.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(--text-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(--primary-1);
  color: var(--bg-1);
  display: inline-block;
  padding: .25rem .5rem;
  text-transform: uppercase;
  margin: 0 0 1px 1px;
}

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

.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(--text-2);
  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(--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*='--tags: "0"'] .filters-toggle:after {
  display: none;
}
.filters-toggle i {
  position: absolute;
  background-color: var(--text-2);
  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(--primary);
  color: var(--text-2);
  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(--text);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}
.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(--primary-1);
  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(--text-2);
}
.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(--primary-1);
  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;
  padding-bottom: var(--padding);
}
.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);
}
.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-sliders {
  background-color: var(--nutral-2);
  padding: var(--padding);
  border-radius: var(--border-radius);
  border: 1px solid var(--primary-2);
  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;
}
#avatar-svg span {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--primary-2);
  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 {
  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 {
  background-color: var(--primary-2);
}
h2 .edit:hover:before, h1 .edit:hover:before {
  color: var(--bg-1);
}
[data-mine="true"] h2 .edit, [data-mine="true"] h1 .edit {
  display: inline-flex;
}
h2 .edit:before, h1 .edit:before {
  font-size: 1rem;
  --size: .5;
  --icon: url(/icon/pencil.svg);
  color: var(--primary-2);
}
h2 .edit[href*="remove"], h1 .edit[href*="remove"] {
  background-color: var(--bg-4);
  color: var(--primary-1);
}
h2 .edit[href*="remove"]:before, h1 .edit[href*="remove"]:before {
  color: var(--primary-1);
  --icon: url(/icon/trash.svg);
}
h2 .edit[href*="remove"]:hover, h1 .edit[href*="remove"]:hover {
  background-color: var(--primary-1);
}
h2 .edit[href*="remove"]:hover:before, h1 .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;
}

.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(--nutral-2);
  border-radius: var(--border-radius);
  box-shadow: 0 9rem 2rem 10rem rgba(0, 0, 0, 0.1);
  margin-left: .5rem;
  margin-right: .5rem;
  margin-top: calc(var(--size) + var(--padding));
  border: 2px solid var(--primary-2);
  text-align: center;
}
main .not-loggedin-inner {
  margin-left: -.5rem;
  margin-right: -.5rem;
}
.not-loggedin-inner figure {
  background-color: var(--primary-2);
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: 50%;
  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%;
  filter: invert(1);
}
.not-loggedin .buttons {
  border: none;
  margin: 0;
  padding: 0;
}
.not-loggedin .buttons .button {
  margin-top: 0;
}