/* node_modules/nyx-player/dist/nyx-player.css */
.controller div {
  color: var(--primary-text);
  width: 18%;
}
.controller div:hover {
  color: var(--hover-btn);
}
@keyframes fadeIn-bbcb6336 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-enter-active[data-v-bbcb6336] {
  animation: .75s fadeIn-bbcb6336;
}
.tabs .nav li[data-v-bbcb6336]:before {
  content: "";
  background: 0 0;
  border-bottom: .125rem solid #0000;
  border-radius: 0;
  width: auto;
  height: auto;
  transition: all .2s ease-in-out;
  position: absolute;
  top: 2em;
  bottom: 0;
  left: 50%;
  right: 50%;
}
.tabs .nav li.active[data-v-bbcb6336]:before {
  border-bottom-color: var(--primary-color);
  left: 0;
  right: 0;
}
ol[data-v-bbcb6336] {
  counter-reset: counter;
}
ol[data-v-bbcb6336]::-webkit-scrollbar {
  width: .1875rem;
  height: .1875rem;
}
ol > li[data-v-bbcb6336]:before {
  content: counter(counter);
  counter-increment: counter;
  text-align: right;
  width: 1.875rem;
  color: var(--secondary-text);
  line-height: inherit;
  flex-shrink: 0;
  margin-left: -1.25rem;
  padding-right: .3125rem;
  position: relative;
}
ol > li[data-v-bbcb6336]:hover:before,
ol > li.current[data-v-bbcb6336] {
  color: var(--primary-color);
}
ol > li.current[data-v-bbcb6336]:before {
  color: currentColor;
}
ol > li.current .progress[data-v-bbcb6336]:before {
  content: attr(data-ptime)" / " attr(data-dtime);
  color: var(--secondary-text);
  z-index: 1;
  pointer-events: none;
  padding: 0 .3rem;
  line-height: 2rem;
  position: absolute;
  right: 0;
}
ol > li.error[data-v-bbcb6336] {
  opacity: .5;
  text-decoration-line: line-through;
}
.playlist[data-v-fe477696] {
  border-top: .125rem solid var(--playlist-line);
}
@keyframes blur-877c7169 {
  0% {
    filter: blur(10px);
  }
  to {
    filter: blur();
  }
}
@keyframes rotate-877c7169 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotating-877c7169 {
  0% {
    transform: rotate(720deg);
  }
  to {
    transform: none;
  }
}
@keyframes rotate-needle-pause-877c7169 {
  0% {
    transform: rotate(-35deg);
  }
  to {
    transform: rotate(-60deg);
  }
}
@keyframes rotate-needle-resume-877c7169 {
  0% {
    transform: rotate(-60deg);
  }
  to {
    transform: rotate(-35deg);
  }
}
.blurx-enter-active[data-v-877c7169] {
  animation: .8s ease-in-out forwards blur-877c7169;
}
.cover[data-v-877c7169]:before {
  transform-origin: .625rem .625rem;
  background: url(data:image/avif;base64,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) 50%/contain no-repeat;
  width: 3.4375rem;
  height: 5.1875rem;
  animation: .5s linear forwards rotate-needle-pause-877c7169;
  top: -1.5625rem;
  left: -1.5625rem;
  transform: rotate(-60deg);
}
.cover .disc[data-v-877c7169] {
  animation: 20s linear infinite paused rotate-877c7169;
}
.cover .disc[data-v-877c7169]:after {
  content: "";
  z-index: 1;
  background: url(data:image/avif;base64,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) 50%/contain no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.cover img[data-v-877c7169] {
  object-fit: contain;
  border-radius: 50%;
  width: 6rem;
  height: 6rem;
}
.cover.playing .disc[data-v-877c7169] {
  animation-play-state: running;
}
.cover.playing[data-v-877c7169]:before {
  animation: .5s linear forwards rotate-needle-resume-877c7169;
}
.list-enter-active[data-v-893ea419],
.list-leave-active[data-v-893ea419] {
  transition: all .6s;
}
.list-move[data-v-893ea419] {
  transition: all .3s;
}
.list-enter-from[data-v-893ea419],
.list-leave-to[data-v-893ea419] {
  opacity: 0;
  transform: translate(30px);
}
.list-leave-active[data-v-893ea419] {
  justify-content: center;
  align-items: first;
  width: 100%;
  display: flex;
  position: absolute;
}
.lrc p[data-v-893ea419] {
  color: var(--primary-text);
  opacity: .3;
  font-size: .75rem;
  transition: all .5s ease-out;
  overflow: hidden;
  height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1rem !important;
}
.lrc p.current[data-v-893ea419] {
  opacity: 1;
  min-height: 1rem;
  overflow: visible;
  height: auto !important;
}
@keyframes fadeIn-a2be5427 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-enter-active[data-v-a2be5427] {
  animation: 1s fadeIn-a2be5427;
}
@keyframes slideRightIn-7a52579d {
  0% {
    opacity: 0;
    transform: translate(50%);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes slideRightOut-7a52579d {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  to {
    opacity: 0;
    transform: translate(50%);
  }
}
.slideRight-enter-active[data-v-7a52579d] {
  animation: .5s slideRightIn-7a52579d;
}
.slideRight-leave-active[data-v-7a52579d] {
  animation: .5s slideRightOut-7a52579d;
}
.close[data-v-7a52579d] {
  color: var(--close-btn);
}
.player-info[data-v-7a52579d] {
  box-shadow: 0 .625rem 1.875rem -.9375rem var(--box-bg-shadow);
  background: var(--player-background);
  -webkit-backdrop-filter: blur(.625rem);
  backdrop-filter: blur(.625rem);
  width: 50vw;
  max-width: 25rem;
  padding-bottom: 1rem;
  bottom: 1rem;
  right: 3.5rem;
}
*,
:before,
:after {
  --un-rotate:0;
  --un-rotate-x:0;
  --un-rotate-y:0;
  --un-rotate-z:0;
  --un-scale-x:1;
  --un-scale-y:1;
  --un-scale-z:1;
  --un-skew-x:0;
  --un-skew-y:0;
  --un-translate-x:0;
  --un-translate-y:0;
  --un-translate-z:0;
  --un-pan-x: ;
  --un-pan-y: ;
  --un-pinch-zoom: ;
  --un-scroll-snap-strictness:proximity;
  --un-ordinal: ;
  --un-slashed-zero: ;
  --un-numeric-figure: ;
  --un-numeric-spacing: ;
  --un-numeric-fraction: ;
  --un-border-spacing-x:0;
  --un-border-spacing-y:0;
  --un-ring-offset-shadow:0 0 #0000;
  --un-ring-shadow:0 0 #0000;
  --un-shadow-inset: ;
  --un-shadow:0 0 #0000;
  --un-ring-inset: ;
  --un-ring-offset-width:0px;
  --un-ring-offset-color:#fff;
  --un-ring-width:0px;
  --un-ring-color:#93c5fd80;
  --un-blur: ;
  --un-brightness: ;
  --un-contrast: ;
  --un-drop-shadow: ;
  --un-grayscale: ;
  --un-hue-rotate: ;
  --un-invert: ;
  --un-saturate: ;
  --un-sepia: ;
  --un-backdrop-blur: ;
  --un-backdrop-brightness: ;
  --un-backdrop-contrast: ;
  --un-backdrop-grayscale: ;
  --un-backdrop-hue-rotate: ;
  --un-backdrop-invert: ;
  --un-backdrop-opacity: ;
  --un-backdrop-saturate: ;
  --un-backdrop-sepia: ;
}
::backdrop {
  --un-rotate:0;
  --un-rotate-x:0;
  --un-rotate-y:0;
  --un-rotate-z:0;
  --un-scale-x:1;
  --un-scale-y:1;
  --un-scale-z:1;
  --un-skew-x:0;
  --un-skew-y:0;
  --un-translate-x:0;
  --un-translate-y:0;
  --un-translate-z:0;
  --un-pan-x: ;
  --un-pan-y: ;
  --un-pinch-zoom: ;
  --un-scroll-snap-strictness:proximity;
  --un-ordinal: ;
  --un-slashed-zero: ;
  --un-numeric-figure: ;
  --un-numeric-spacing: ;
  --un-numeric-fraction: ;
  --un-border-spacing-x:0;
  --un-border-spacing-y:0;
  --un-ring-offset-shadow:0 0 #0000;
  --un-ring-shadow:0 0 #0000;
  --un-shadow-inset: ;
  --un-shadow:0 0 #0000;
  --un-ring-inset: ;
  --un-ring-offset-width:0px;
  --un-ring-offset-color:#fff;
  --un-ring-width:0px;
  --un-ring-color:#93c5fd80;
  --un-blur: ;
  --un-brightness: ;
  --un-contrast: ;
  --un-drop-shadow: ;
  --un-grayscale: ;
  --un-hue-rotate: ;
  --un-invert: ;
  --un-saturate: ;
  --un-sepia: ;
  --un-backdrop-blur: ;
  --un-backdrop-brightness: ;
  --un-backdrop-contrast: ;
  --un-backdrop-grayscale: ;
  --un-backdrop-hue-rotate: ;
  --un-backdrop-invert: ;
  --un-backdrop-opacity: ;
  --un-backdrop-saturate: ;
  --un-backdrop-sepia: ;
}
.i-ri-close-line {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:loop-right-line {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 4a7.99 7.99 0 0 1 6.616 3.5H16v2h6v-6h-2V6a9.98 9.98 0 0 0-8-4C6.477 2 2 6.477 2 12h2a8 8 0 0 1 8-8m8 8a8 8 0 0 1-14.616 4.5H8v-2H2v6h2V18a9.98 9.98 0 0 0 8 4c5.523 0 10-4.477 10-10z'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:order-play-line {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M17 4V2.068a.5.5 0 0 1 .82-.385l4.12 3.433a.5.5 0 0 1-.321.884H2V4zM2 18h20v2H2zm0-7h20v2H2z'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:pause-circle-fill {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10M9 9v6h2V9zm4 0v6h2V9z'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:play-circle-fill {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10M10.622 8.415a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666z'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:shuffle-line {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M18 17.883V16l5 3l-5 3v-2.09a9 9 0 0 1-6.997-5.365L11 14.54l-.003.006A9 9 0 0 1 2.725 20H2v-2h.725a7 7 0 0 0 6.434-4.243L9.912 12l-.753-1.757A7 7 0 0 0 2.725 6H2V4h.725a9 9 0 0 1 8.272 5.455L11 9.46l.003-.006A9 9 0 0 1 18 4.09V2l5 3l-5 3V6.117a7 7 0 0 0-5.159 4.126L12.088 12l.753 1.757A7 7 0 0 0 18 17.883'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:skip-back-line {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M7 4a1 1 0 0 1 1 1v6.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1m10 3.737L10.606 12L17 16.263z'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:skip-forward-line {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 12.667L5.777 19.482A.5.5 0 0 1 5 19.066V4.934a.5.5 0 0 1 .777-.416L16 11.333V5a1 1 0 1 1 2 0v14a1 1 0 1 1-2 0zm-9-4.93v8.526L13.394 12z'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:volume-mute-line {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M10 7.22L6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm14.525-4l3.536 3.536l-1.415 1.414L19 13.414l-3.536 3.536l-1.414-1.414L17.586 12L14.05 8.465l1.414-1.415L19 10.586l3.535-3.536l1.415 1.415z'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-ri\:volume-up-line {
  --un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6.603 10L10 7.22v9.56L6.603 14H3v-4zM2 16h3.889l5.294 4.332a.5.5 0 0 0 .817-.387V4.055a.5.5 0 0 0-.817-.387L5.89 8H2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1m21-4c0 3.292-1.446 6.246-3.738 8.262l-1.418-1.418A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.155-6.844l1.417-1.418A10.97 10.97 0 0 1 23 12m-5 0a5.99 5.99 0 0 0-2.287-4.713l-1.429 1.429A4 4 0 0 1 16 12c0 1.36-.679 2.561-1.716 3.284l1.43 1.43A5.99 5.99 0 0 0 18 12'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon)no-repeat;
  -webkit-mask: var(--un-icon)no-repeat;
  mask: var(--un-icon)no-repeat;
  color: inherit;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.visible {
  visibility: visible;
}
.absolute,
[absolute=""] {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative,
[relative=""] {
  position: relative;
}
.before\:absolute:before {
  position: absolute;
}
.left-0,
[left-0=""] {
  left: 0;
}
.right-4 {
  right: 1rem;
}
.top-0,
[top-0=""] {
  top: 0;
}
.top-3 {
  top: .75rem;
}
.z-9 {
  z-index: 9;
}
.before\:z-1:before {
  z-index: 1;
}
.float-left {
  float: left;
}
.float-right,
[float-right=""] {
  float: right;
}
.m-\[0\.625rem_0_0\] {
  margin: .625rem 0 0;
}
.m-0,
[m-0=""] {
  margin: 0;
}
.ml-\[0\.625rem\] {
  margin-left: .625rem;
}
.mt-1\.25 {
  margin-top: .3125rem;
}
.block {
  display: block;
}
.inline-block,
[inline-block=""] {
  display: inline-block;
}
.hidden {
  display: none;
}
.h-\[12\.5rem\] {
  height: 12.5rem;
}
.h-\[2\.6875rem\] {
  height: 2.6875rem;
}
.h-\[2rem\] {
  height: 2rem;
}
.h-6rem {
  height: 6rem;
}
.h-full,
[h-full=""] {
  height: 100%;
}
.h4 {
  height: 1rem;
}
.max-h-12 {
  max-height: 3rem;
}
.max-h-16 {
  max-height: 4rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-full {
  max-height: 100%;
}
.max-w-48 {
  max-width: 12rem;
}
.max-w-full {
  max-width: 100%;
}
.w-18\% {
  width: 18%;
}
.w-6rem {
  width: 6rem;
}
.w-full {
  width: 100%;
}
.flex,
[flex=""] {
  display: flex;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-col {
  flex-direction: column;
}
.transform {
  transform: translateX(var(--un-translate-x))translateY(var(--un-translate-y))translateZ(var(--un-translate-z))rotate(var(--un-rotate))rotateX(var(--un-rotate-x))rotateY(var(--un-rotate-y))rotateZ(var(--un-rotate-z))skewX(var(--un-skew-x))skewY(var(--un-skew-y))scaleX(var(--un-scale-x))scaleY(var(--un-scale-y))scaleZ(var(--un-scale-z));
}
.cursor-pointer,
[cursor-pointer=""] {
  cursor: pointer;
}
.select-none,
[select-none=""] {
  -webkit-user-select: none;
  user-select: none;
}
.list-none {
  list-style-type: none;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-around {
  justify-content: space-around;
}
.overflow-hidden,
[overflow-hidden=""] {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.border-\[0\.0625rem\] {
  border-width: .0625rem;
}
.border-b {
  border-bottom-width: 1px;
}
.border-\[var\(--player-background\)\] {
  border-color: var(--player-background);
}
.rounded-\[0\.8125em\] {
  border-radius: .8125em;
}
.rounded-50\% {
  border-radius: 50%;
}
.rounded-xl {
  border-radius: .75rem;
}
.border-none,
[border-none=""] {
  border-style: none;
}
.bg-\[var\(--primary-color-a\)\] {
  background-color: var(--primary-color-a);
}
.hover\:bg-\[var\(--player-background\)\]:hover {
  background-color: var(--player-background);
}
.p-\[0\.3125rem_0\.9375rem_0\.3125rem_1\.5625rem\] {
  padding: .3125rem .9375rem .3125rem 1.5625rem;
}
.p-\[0\.3125rem_0\] {
  padding: .3125rem 0;
}
.p-\[0\.3125rem_1\.25rem\] {
  padding: .3125rem 1.25rem;
}
.p-0 {
  padding: 0;
}
.p-6 {
  padding: 1.5rem;
}
[p-0~="default:"]:default {
  padding: 0;
}
.pb-0 {
  padding-bottom: 0;
}
.pl-2\.5 {
  padding-left: .625rem;
}
.pr-\[5rem\] {
  padding-right: 5rem;
}
.pr-2\.5 {
  padding-right: .625rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.text-align-center,
.text-center {
  text-align: center;
}
.text-\[0\.8125em\] {
  font-size: .8125em;
}
.text-3 {
  font-size: .75rem;
}
.text-3\.25 {
  font-size: .8125rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5 {
  font-size: 1.25rem;
}
.text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-\[var\(--secondary-text\)\] {
  color: var(--secondary-text);
}
.hover\:color-\[var\(--hover-btn\)\]:hover {
  color: var(--hover-btn);
}
.line-through {
  text-decoration-line: line-through;
}
.blur {
  --un-blur:blur(8px);
  filter: var(--un-blur)var(--un-brightness)var(--un-contrast)var(--un-drop-shadow)var(--un-grayscale)var(--un-hue-rotate)var(--un-invert)var(--un-saturate)var(--un-sepia);
}
.filter {
  filter: var(--un-blur)var(--un-brightness)var(--un-contrast)var(--un-drop-shadow)var(--un-grayscale)var(--un-hue-rotate)var(--un-invert)var(--un-saturate)var(--un-sepia);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--un-backdrop-blur)var(--un-backdrop-brightness)var(--un-backdrop-contrast)var(--un-backdrop-grayscale)var(--un-backdrop-hue-rotate)var(--un-backdrop-invert)var(--un-backdrop-opacity)var(--un-backdrop-saturate)var(--un-backdrop-sepia);
  backdrop-filter: var(--un-backdrop-blur)var(--un-backdrop-brightness)var(--un-backdrop-contrast)var(--un-backdrop-grayscale)var(--un-backdrop-hue-rotate)var(--un-backdrop-invert)var(--un-backdrop-opacity)var(--un-backdrop-saturate)var(--un-backdrop-sepia);
}
.transition {
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    -webkit-backdrop-filter,
    backdrop-filter;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.transition-all {
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.transition-width,
[transition-width=""] {
  transition-property: width;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.duration-250,
[duration-250=""] {
  transition-duration: .25s;
}
.duration-500 {
  transition-duration: .5s;
}
.ease,
.ease-in-out {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out,
.transition-ease-out {
  transition-timing-function: cubic-bezier(0, 0, .2, 1);
}
.before\:content-empty:before {
  content: "";
}
@media (min-width:768px) {
  .md\:flex {
    display: flex;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:pl-5 {
    padding-left: 1.25rem;
  }
  .md\:pr-5 {
    padding-right: 1.25rem;
  }
}

/* node_modules/@waline/client/dist/waline.css */
:root {
  --waline-font-size: 1rem;
  --waline-white: #fff;
  --waline-light-grey: #999;
  --waline-dark-grey: #666;
  --waline-theme-color: #27ae60;
  --waline-active-color: #2ecc71;
  --waline-color: #444;
  --waline-bg-color: #fff;
  --waline-bg-color-light: #f8f8f8;
  --waline-bg-color-hover: #f0f0f0;
  --waline-border-color: #ddd;
  --waline-disable-bg-color: #f8f8f8;
  --waline-disable-color: #000;
  --waline-code-bg-color: #282c34;
  --waline-bq-color: #f0f0f0;
  --waline-avatar-size: 3.25rem;
  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
  --waline-badge-color: #3498db;
  --waline-badge-font-size: 0.75em;
  --waline-info-bg-color: #f8f8f8;
  --waline-info-color: #999;
  --waline-info-font-size: 0.625em;
  --waline-border: 1px solid var(--waline-border-color);
  --waline-avatar-radius: 50%;
  --waline-box-shadow: none;
}
[data-waline] {
  font-size: var(--waline-font-size);
  text-align: start;
}
[dir=rtl] [data-waline] {
  direction: rtl;
}
[data-waline] * {
  box-sizing: content-box;
  line-height: 1.75;
}
[data-waline] p {
  color: var(--waline-color);
}
[data-waline] a {
  position: relative;
  display: inline-block;
  color: var(--waline-theme-color);
  text-decoration: none;
  overflow-wrap: break-word;
  cursor: pointer;
}
[data-waline] a:hover {
  color: var(--waline-active-color);
}
[data-waline] img {
  max-width: 100%;
  max-height: 400px;
  border: none;
}
[data-waline] hr {
  margin: .825em 0;
  border-style: dashed;
  border-color: var(--waline-bg-color-light);
}
[data-waline] code,
[data-waline] pre {
  margin: 0;
  padding: .2em .4em;
  border-radius: 3px;
  background: var(--waline-bg-color-light);
  font-size: 85%;
}
[data-waline] pre {
  overflow: auto;
  padding: 10px;
  line-height: 1.45;
}
[data-waline] pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[data-waline] pre::-webkit-scrollbar-track-piece:horizontal {
  border-radius: 6px;
  background: rgba(0, 0, 0, .1);
}
[data-waline] pre::-webkit-scrollbar-thumb:horizontal {
  width: 6px;
  border-radius: 6px;
  background: var(--waline-theme-color);
}
[data-waline] pre code {
  padding: 0;
  background: rgba(0, 0, 0, 0);
  color: var(--waline-color);
  white-space: pre-wrap;
  word-break: keep-all;
}
[data-waline] blockquote {
  margin: .5em 0;
  padding: .5em 0 .5em 1em;
  border-inline-start: 8px solid var(--waline-bq-color);
  color: var(--waline-dark-grey);
}
[data-waline] blockquote > p {
  margin: 0;
}
[data-waline] ol,
[data-waline] ul {
  margin-inline-start: 1.25em;
  padding: 0;
}
[data-waline] input[type=checkbox],
[data-waline] input[type=radio] {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}
.wl-btn {
  display: inline-block;
  vertical-align: middle;
  min-width: 2.5em;
  margin-bottom: 0;
  padding: .5em 1em;
  border: 1px solid var(--waline-border-color);
  border-radius: .5em;
  background: rgba(0, 0, 0, 0);
  color: var(--waline-color);
  font-weight: 400;
  font-size: .75em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition-duration: .4s;
}
.wl-btn:hover,
.wl-btn:active {
  border-color: var(--waline-theme-color);
  color: var(--waline-theme-color);
}
.wl-btn:disabled {
  border-color: var(--waline-border-color);
  background: var(--waline-disable-bg-color);
  color: var(--waline-disable-color);
  cursor: not-allowed;
}
.wl-btn.primary {
  border-color: var(--waline-theme-color);
  background: var(--waline-theme-color);
  color: var(--waline-white);
}
.wl-btn.primary:hover,
.wl-btn.primary:active {
  border-color: var(--waline-active-color);
  background: var(--waline-active-color);
  color: var(--waline-white);
}
.wl-btn.primary:disabled {
  border-color: var(--waline-border-color);
  background: var(--waline-disable-bg-color);
  color: var(--waline-disable-color);
  cursor: not-allowed;
}
.wl-loading {
  text-align: center;
}
.wl-loading svg {
  margin: 0 auto;
}
.wl-comment {
  position: relative;
  display: flex;
  margin-bottom: .75em;
}
.wl-close {
  position: absolute;
  inset-inline-end: -4px;
  top: -4px;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0);
  line-height: 1;
  cursor: pointer;
}
.wl-login-info {
  max-width: 80px;
  margin-top: .75em;
  text-align: center;
}
.wl-logout-btn {
  position: absolute;
  inset-inline-end: -10px;
  top: -10px;
  padding: 3px;
  border: none;
  background: rgba(0, 0, 0, 0);
  line-height: 0;
  cursor: pointer;
}
.wl-avatar {
  position: relative;
  width: var(--waline-avatar-size);
  height: var(--waline-avatar-size);
  margin: 0 auto;
  border: var(--waline-border);
  border-radius: var(--waline-avatar-radius);
}
@media (max-width: 720px) {
  .wl-avatar {
    width: var(--waline-m-avatar-size);
    height: var(--waline-m-avatar-size);
  }
}
.wl-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--waline-avatar-radius);
}
.wl-login-nick {
  display: block;
  color: var(--waline-theme-color);
  font-size: .75em;
  word-break: break-all;
}
.wl-panel {
  position: relative;
  flex-shrink: 1;
  width: 100%;
  margin: .5em;
  border: var(--waline-border);
  border-radius: .75em;
  background: var(--waline-bg-color);
  box-shadow: var(--waline-box-shadow);
}
.wl-header {
  display: flex;
  overflow: hidden;
  padding: 0 4px;
  border-bottom: 2px dashed var(--waline-border-color);
  border-top-left-radius: .75em;
  border-top-right-radius: .75em;
}
@media (max-width: 580px) {
  .wl-header {
    display: block;
  }
}
.wl-header label {
  min-width: 40px;
  padding: .75em .5em;
  color: var(--waline-color);
  font-size: .75em;
  text-align: center;
}
.wl-header input {
  flex: 1;
  resize: none;
  width: 0;
  padding: .5em;
  background: rgba(0, 0, 0, 0);
  font-size: .625em;
}
.wl-header-item {
  display: flex;
  flex: 1;
}
@media (max-width: 580px) {
  .wl-header-item:not(:last-child) {
    border-bottom: 2px dashed var(--waline-border-color);
  }
}
.wl-header-1 .wl-header-item {
  width: 100%;
}
.wl-header-2 .wl-header-item {
  width: 50%;
}
@media (max-width: 580px) {
  .wl-header-2 .wl-header-item {
    flex: 0;
    width: 100%;
  }
}
.wl-header-3 .wl-header-item {
  width: 33.33%;
}
@media (max-width: 580px) {
  .wl-header-3 .wl-header-item {
    width: 100%;
  }
}
.wl-editor {
  position: relative;
  resize: vertical;
  box-sizing: border-box;
  width: calc(100% - 1em);
  min-height: 8.75em;
  margin: .75em .5em;
  border-radius: .5em;
  background: rgba(0, 0, 0, 0);
  font-size: .875em;
}
.wl-editor,
.wl-input {
  max-width: 100%;
  border: none;
  color: var(--waline-color);
  outline: none;
  transition: all .25s ease;
}
.wl-editor:focus,
.wl-input:focus {
  background: var(--waline-bg-color-light);
}
.wl-preview {
  padding: 0 .5em .5em;
}
.wl-preview h4 {
  margin: .25em;
  font-weight: bold;
  font-size: .9375em;
}
.wl-preview .wl-content {
  min-height: 1.25em;
  padding: .25em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.wl-preview .wl-content > *:first-child {
  margin-top: 0;
}
.wl-preview .wl-content > *:last-child {
  margin-bottom: 0;
}
.wl-footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: .5em .75em;
}
.wl-actions {
  display: flex;
  flex: 2;
  align-items: center;
}
.wl-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin: 2px;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0);
  color: var(--waline-color);
  font-size: 16px;
  cursor: pointer;
}
.wl-action:hover {
  color: var(--waline-theme-color);
}
.wl-action.active {
  color: var(--waline-active-color);
}
#wl-image-upload {
  display: none;
}
#wl-image-upload:focus + label {
  color: var(--waline-color);
}
#wl-image-upload:focus-visible + label {
  outline: -webkit-focus-ring-color auto 1px;
}
.wl-info {
  display: flex;
  flex: 3;
  align-items: center;
  justify-content: flex-end;
}
.wl-info .wl-text-number {
  color: var(--waline-info-color);
  font-size: .75em;
}
.wl-info .wl-text-number .illegal {
  color: red;
}
.wl-info button {
  margin-inline-start: .75em;
}
.wl-info button svg {
  display: block;
  margin: 0 auto;
  line-height: 18px;
}
.wl-emoji-popup {
  position: absolute;
  inset-inline-start: 1.25em;
  top: 100%;
  z-index: 10;
  display: none;
  width: 100%;
  max-width: 526px;
  border: var(--waline-border);
  border-radius: 6px;
  background: var(--waline-bg-color);
  box-shadow: var(--waline-box-shadow);
}
.wl-emoji-popup.display {
  display: block;
}
.wl-emoji-popup button {
  display: inline-block;
  vertical-align: middle;
  width: 2em;
  margin: .125em;
  padding: 0;
  border-width: 0;
  background: rgba(0, 0, 0, 0);
  font-size: inherit;
  line-height: 2;
  text-align: center;
  cursor: pointer;
}
.wl-emoji-popup button:hover {
  background: var(--waline-bg-color-hover);
}
.wl-emoji-popup .wl-emoji {
  display: inline-block;
  vertical-align: middle;
  max-width: 1.5em;
  max-height: 1.5em;
}
.wl-emoji-popup .wl-tab-wrapper {
  overflow-y: auto;
  max-height: 145px;
  padding: .5em;
}
.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece:vertical {
  border-radius: 6px;
  background: rgba(0, 0, 0, .1);
}
.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:vertical {
  width: 6px;
  border-radius: 6px;
  background: var(--waline-theme-color);
}
.wl-emoji-popup .wl-tabs {
  position: relative;
  overflow-x: auto;
  padding: 0 6px;
  white-space: nowrap;
}
.wl-emoji-popup .wl-tabs::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 1px;
  background: var(--waline-border-color);
}
.wl-emoji-popup .wl-tabs::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.wl-emoji-popup .wl-tabs::-webkit-scrollbar-track-piece:horizontal {
  border-radius: 6px;
  background: rgba(0, 0, 0, .1);
}
.wl-emoji-popup .wl-tabs::-webkit-scrollbar-thumb:horizontal {
  height: 6px;
  border-radius: 6px;
  background: var(--waline-theme-color);
}
.wl-emoji-popup .wl-tab {
  position: relative;
  margin: 0;
  padding: 0 .5em;
}
.wl-emoji-popup .wl-tab.active {
  z-index: 3;
  border: 1px solid var(--waline-border-color);
  border-top-width: 0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  background: var(--waline-bg-color);
}
.wl-gif-popup {
  position: absolute;
  inset-inline-start: 1.25em;
  top: 100%;
  z-index: 10;
  width: calc(100% - 3em);
  padding: .75em .75em .25em;
  border: var(--waline-border);
  border-radius: 6px;
  background: var(--waline-bg-color);
  box-shadow: var(--waline-box-shadow);
  opacity: 0;
  visibility: hidden;
  transition: transform .2s ease-out, opacity .2s ease-out;
  transform: scale(0.9, 0.9);
  transform-origin: 0 0;
}
.wl-gif-popup.display {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.wl-gif-popup input {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 3px 5px;
  border: var(--waline-border);
}
.wl-gif-popup img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  cursor: pointer;
}
.wl-gif-popup img:hover {
  border-color: var(--waline-theme-color);
  border-radius: 2px;
}
.wl-gallery {
  display: flex;
  overflow-y: auto;
  max-height: 80vh;
}
.wl-gallery-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}
.wl-cards .wl-user {
  --avatar-size: var(--waline-avatar-size);
  position: relative;
  margin-inline-end: .75em;
}
@media (max-width: 720px) {
  .wl-cards .wl-user {
    --avatar-size: var(--waline-m-avatar-size);
  }
}
.wl-cards .wl-user .wl-user-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--waline-avatar-radius);
  box-shadow: var(--waline-box-shadow);
}
.wl-cards .wl-user .verified-icon {
  position: absolute;
  inset-inline-start: calc(var(--avatar-size)*3/4);
  top: calc(var(--avatar-size)*3/4);
  border-radius: 50%;
  background: var(--waline-bg-color);
  box-shadow: var(--waline-box-shadow);
}
.wl-card-item {
  position: relative;
  display: flex;
  padding: .5em;
}
.wl-card-item .wl-card-item {
  padding-inline-end: 0;
}
.wl-card {
  flex: 1;
  width: 0;
  padding-bottom: .5em;
  border-bottom: 1px dashed var(--waline-border-color);
}
.wl-card:first-child {
  margin-inline-start: 1em;
}
.wl-card-item:last-child > .wl-card {
  border-bottom: none;
}
.wl-card .wl-nick svg {
  position: relative;
  bottom: -0.125em;
  line-height: 1;
}
.wl-card .wl-head {
  overflow: hidden;
  line-height: 1.5;
}
.wl-card .wl-head .wl-nick {
  position: relative;
  display: inline-block;
  margin-inline-end: .5em;
  font-weight: bold;
  font-size: .875em;
  line-height: 1;
  text-decoration: none;
}
.wl-card span.wl-nick {
  color: var(--waline-dark-grey);
}
.wl-card .wl-badge {
  display: inline-block;
  margin-inline-end: 1em;
  padding: 0 .3em;
  border: 1px solid var(--waline-badge-color);
  border-radius: 4px;
  color: var(--waline-badge-color);
  font-size: var(--waline-badge-font-size);
}
.wl-card .wl-time {
  margin-inline-end: .875em;
  color: var(--waline-info-color);
  font-size: .75em;
}
.wl-card .wl-meta {
  position: relative;
  line-height: 1;
}
.wl-card .wl-meta > span {
  display: inline-block;
  margin-inline-end: .25em;
  padding: 2px 4px;
  border-radius: .2em;
  background: var(--waline-info-bg-color);
  color: var(--waline-info-color);
  font-size: var(--waline-info-font-size);
  line-height: 1.5;
}
.wl-card .wl-meta > span:empty {
  display: none;
}
.wl-card .wl-comment-actions {
  float: right;
  line-height: 1;
}
[dir=rtl] .wl-card .wl-comment-actions {
  float: left;
}
.wl-card .wl-delete,
.wl-card .wl-like,
.wl-card .wl-reply,
.wl-card .wl-edit {
  display: inline-flex;
  align-items: center;
  border: none;
  background: rgba(0, 0, 0, 0);
  color: var(--waline-color);
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}
.wl-card .wl-delete:hover,
.wl-card .wl-like:hover,
.wl-card .wl-reply:hover,
.wl-card .wl-edit:hover {
  color: var(--waline-theme-color);
}
.wl-card .wl-delete.active,
.wl-card .wl-like.active,
.wl-card .wl-reply.active,
.wl-card .wl-edit.active {
  color: var(--waline-active-color);
}
.wl-card .wl-content {
  position: relative;
  margin-bottom: .75em;
  padding-top: .625em;
  font-size: .875em;
  line-height: 2;
  word-wrap: break-word;
}
.wl-card .wl-content.expand {
  overflow: hidden;
  max-height: 8em;
  cursor: pointer;
}
.wl-card .wl-content.expand::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 3.15em;
  z-index: 999;
  display: block;
  width: 100%;
  background:
    linear-gradient(
      180deg,
      #000,
      rgba(255, 255, 255, 0.9));
}
.wl-card .wl-content.expand::after {
  content: attr(data-expand);
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  z-index: 999;
  display: block;
  width: 100%;
  height: 3.15em;
  background: hsla(0, 0%, 100%, .9);
  color: #828586;
  line-height: 3.15em;
  text-align: center;
}
.wl-card .wl-content > *:first-child {
  margin-top: 0;
}
.wl-card .wl-content > *:last-child {
  margin-bottom: 0;
}
.wl-card .wl-admin-actions {
  margin: 8px 0;
  font-size: 12px;
  text-align: right;
}
.wl-card .wl-comment-status {
  margin: 0 8px;
}
.wl-card .wl-comment-status .wl-btn {
  border-radius: 0;
}
.wl-card .wl-comment-status .wl-btn:first-child {
  border-inline-end: 0;
  border-radius: .5em 0 0 .5em;
}
.wl-card .wl-comment-status .wl-btn:last-child {
  border-inline-start: 0;
  border-radius: 0 .5em .5em 0;
}
.wl-card .wl-quote {
  border-inline-start: 1px dashed rgba(237, 237, 237, .5);
}
.wl-card .wl-quote .wl-user {
  --avatar-size: var(--waline-m-avatar-size);
}
.wl-close-icon {
  color: var(--waline-border-color);
}
.wl-content .vemoji,
.wl-content .wl-emoji {
  display: inline-block;
  vertical-align: baseline;
  height: 1.25em;
  margin: -0.125em .25em;
}
.wl-content .wl-tex {
  background: var(--waline-info-bg-color);
  color: var(--waline-info-color);
}
.wl-content span.wl-tex {
  display: inline-block;
  margin-inline-end: .25em;
  padding: 2px 4px;
  border-radius: .2em;
  font-size: var(--waline-info-font-size);
  line-height: 1.5;
}
.wl-content p.wl-tex {
  text-align: center;
}
.wl-content .katex-display {
  overflow: auto hidden;
  padding-top: .2em;
  padding-bottom: .2em;
  -webkit-overflow-scrolling: touch;
}
.wl-content .katex-display::-webkit-scrollbar {
  height: 3px;
}
.wl-content .katex-error {
  color: red;
}
.wl-count {
  flex: 1;
  font-weight: bold;
  font-size: 1.25em;
}
.wl-empty {
  overflow: auto;
  padding: 1.25em;
  color: var(--waline-color);
  text-align: center;
}
.wl-operation {
  text-align: center;
}
.wl-operation button {
  margin: 1em 0;
}
.wl-power {
  padding: .5em 0;
  color: var(--waline-light-grey);
  font-size: var(--waline-info-font-size);
  text-align: end;
}
.wl-meta-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .375em;
}
.wl-sort {
  margin: 0;
  list-style-type: none;
}
.wl-sort li {
  display: inline-block;
  color: var(--waline-info-color);
  font-size: .75em;
  cursor: pointer;
}
.wl-sort li.active {
  color: var(--waline-theme-color);
}
.wl-sort li + li {
  margin-inline-start: 1em;
}
.wl-reaction {
  overflow: auto hidden;
  margin-bottom: 1.75em;
  text-align: center;
}
.wl-reaction img {
  width: 100%;
  height: 100%;
  transition: all 250ms ease-in-out;
}
.wl-reaction-title {
  margin: 16px auto;
  font-weight: bold;
  font-size: 18px;
}
.wl-reaction-list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  margin: 0;
  padding: 8px;
  list-style-type: none;
}
@media (max-width: 580px) {
  .wl-reaction-list {
    gap: 12px;
  }
}
[data-waline] .wl-reaction-list {
  margin-inline-start: 0;
}
.wl-reaction-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.wl-reaction-item:hover img,
.wl-reaction-item.active img {
  transform: scale(1.15);
}
.wl-reaction-img {
  position: relative;
  width: 42px;
  height: 42px;
}
@media (max-width: 580px) {
  .wl-reaction-img {
    width: 32px;
    height: 32px;
  }
}
.wl-reaction-loading {
  position: absolute;
  inset-inline-end: -5px;
  top: -4px;
  width: 18px;
  height: 18px;
  color: var(--waline-theme-color);
}
.wl-reaction-votes {
  position: absolute;
  inset-inline-end: -9px;
  top: -9px;
  min-width: 1em;
  padding: 2px;
  border: 1px solid var(--waline-theme-color);
  border-radius: 1em;
  background: var(--waline-bg-color);
  color: var(--waline-theme-color);
  font-weight: 700;
  font-size: .75em;
  line-height: 1;
}
.wl-reaction-item.active .wl-reaction-votes {
  background: var(--waline-theme-color);
  color: var(--waline-bg-color);
}
.wl-reaction-text {
  font-size: .875em;
}
.wl-reaction-item.active .wl-reaction-text {
  color: var(--waline-theme-color);
}
.wl-content pre,
.wl-content pre[class*=language-] {
  overflow: auto;
  margin: .75rem 0;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  background: var(--waline-code-bg-color);
  line-height: 1.4;
}
.wl-content pre code,
.wl-content pre[class*=language-] code {
  padding: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0) !important;
  color: #bbb;
  direction: ltr;
}
.wl-content code[class*=language-],
.wl-content pre[class*=language-] {
  background: none;
  color: #ccc;
  font-size: 1em;
  font-family:
    Consolas,
    Monaco,
    "Andale Mono",
    "Ubuntu Mono",
    monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-wrap: normal;
  word-break: normal;
  tab-size: 4;
  hyphens: none;
}
.wl-content pre[class*=language-] {
  overflow: auto;
}
.wl-content :not(pre) > code[class*=language-],
.wl-content pre[class*=language-] {
  background: #2d2d2d;
}
.wl-content :not(pre) > code[class*=language-] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}
.wl-content .token.comment,
.wl-content .token.block-comment,
.wl-content .token.prolog,
.wl-content .token.doctype,
.wl-content .token.cdata {
  color: #999;
}
.wl-content .token.punctuation {
  color: #ccc;
}
.wl-content .token.tag,
.wl-content .token.attr-name,
.wl-content .token.namespace,
.wl-content .token.deleted {
  color: #e2777a;
}
.wl-content .token.function-name {
  color: #6196cc;
}
.wl-content .token.boolean,
.wl-content .token.number,
.wl-content .token.function {
  color: #f08d49;
}
.wl-content .token.property,
.wl-content .token.class-name,
.wl-content .token.constant,
.wl-content .token.symbol {
  color: #f8c555;
}
.wl-content .token.selector,
.wl-content .token.important,
.wl-content .token.atrule,
.wl-content .token.keyword,
.wl-content .token.builtin {
  color: #cc99cd;
}
.wl-content .token.string,
.wl-content .token.char,
.wl-content .token.attr-value,
.wl-content .token.regex,
.wl-content .token.variable {
  color: #7ec699;
}
.wl-content .token.operator,
.wl-content .token.entity,
.wl-content .token.url {
  color: #67cdcc;
}
.wl-content .token.important,
.wl-content .token.bold {
  font-weight: bold;
}
.wl-content .token.italic {
  font-style: italic;
}
.wl-content .token.entity {
  cursor: help;
}
.wl-content .token.inserted {
  color: green;
}
.wl-recent-item p {
  display: inline;
}
.wl-user-list {
  padding: 0;
  list-style: none;
}
.wl-user-list a,
.wl-user-list a:hover,
.wl-user-list a:visited {
  color: var(--waline-color);
  text-decoration: none;
}
.wl-user-list .wl-user-avatar {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-inline-end: 10px;
  border-radius: 4px;
  line-height: 0;
}
.wl-user-list .wl-user-avatar > img {
  width: var(--waline-user-avatar-size, 48px);
  height: var(--waline-user-avatar-size, 48px);
}
.wl-user-list .wl-user-badge {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  min-width: .7em;
  height: 1.5em;
  padding: 0 .4em;
  border-radius: 4px;
  background: var(--waline-info-bg-color);
  color: var(--waline-info-color);
  font-weight: bold;
  font-size: 10px;
  line-height: 1.5em;
  text-align: center;
}
.wl-user-list .wl-user-item {
  margin: 10px 0;
}
.wl-user-list .wl-user-item:nth-child(1) .wl-user-badge {
  background: var(--waline-rank-gold-bg-color, #fa3939);
  color: var(--waline-white);
  font-weight: bold;
}
.wl-user-list .wl-user-item:nth-child(2) .wl-user-badge {
  background: var(--waline-rank-silver-bg-color, #fb811c);
  color: var(--waline-white);
  font-weight: bold;
}
.wl-user-list .wl-user-item:nth-child(3) .wl-user-badge {
  background: var(--waline-rank-copper-bg-color, #feb207);
  color: var(--waline-white);
}
.wl-user-list .wl-user-meta {
  display: inline-block;
  vertical-align: top;
}
.wl-user-list .wl-badge {
  display: inline-block;
  vertical-align: text-top;
  margin-inline-start: .5em;
  padding: 0 .3em;
  border: 1px solid var(--waline-badge-color);
  border-radius: 4px;
  color: var(--waline-badge-color);
  font-size: var(--waline-badge-font-size);
}
.wl-user-wall {
  padding: 0;
  list-style: none;
}
.wl-user-wall .wl-user-badge,
.wl-user-wall .wl-user-meta {
  display: none;
}
.wl-user-wall .wl-user-item {
  position: relative;
  display: inline-block;
  transition: transform ease-in-out .2s;
}
.wl-user-wall .wl-user-item::before,
.wl-user-wall .wl-user-item::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: all .18s ease-out .18s;
  transform: translate(-50%, 4px);
  transform-origin: top;
}
.wl-user-wall .wl-user-item::before {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid rgba(0, 0, 0, 0);
  border-top-color: rgba(16, 16, 16, .95);
}
.wl-user-wall .wl-user-item::after {
  content: attr(aria-label);
  margin-bottom: 10px;
  padding: .5em 1em;
  border-radius: 2px;
  background: rgba(16, 16, 16, .95);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}
.wl-user-wall .wl-user-item:hover {
  transform: scale(1.1);
}
.wl-user-wall .wl-user-item:hover::before,
.wl-user-wall .wl-user-item:hover::after {
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, 0);
}
.wl-user-wall .wl-user-item img {
  width: var(--waline-user-avatar-size, 48px);
  height: var(--waline-user-avatar-size, 48px);
}