.waves {
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.wave-canvas {
  position: absolute;
  margin-left: -30px;
}
@media screen and (max-width: 800px) {
  .wave-canvas {
    margin-left: 0px;
  }
}
.dashboard-tab {
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 42px;
}
.dashboard-tab .dashboard-section-title {
  position: relative;
  font-size: 20px;
  margin: 0;
  margin-bottom: 16px;
  font-weight: bold;
  letter-spacing: -1px;
}
@media screen and (max-width: 600px) {
  .dashboard-tab .dashboard-section-title {
    font-size: 18px;
  }
}
@media screen and (max-width: 1000px) {
  .dashboard-tab {
    width: 95%;
  }
}
.dashboard-tab .data-copyright {
  font-size: 12px;
}
.dashboard-tab .data-copyright a {
  color: inherit;
  text-decoration: none;
  border: 0;
  border-bottom: 1px;
}
.dashboard-tab .data-copyright a:hover, .dashboard-tab .data-copyright a:focus {
  opacity: 0.8;
}
.dashboard-tab .data-copyright a:active {
  opacity: 0.7;
}

.card-lists {
  display: grid;
  gap: 16px;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
}
.card-lists .empty-wrapper {
  height: 180px;
  display: flex;
}
.card-lists .empty-wrapper > div {
  margin: auto;
}
@media screen and (max-width: 600px) {
  .card-lists {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 800px) {
  .card-lists {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 800px) {
  .card-lists {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 1000px) {
  .card-lists {
    margin: auto;
  }
}
@media screen and (min-width: 1240px) {
  .card-lists {
    grid-template-columns: repeat(4, 1fr);
  }
}
.llct-dark .music-card {
  background: var(--primary-dark, #082437);
}
.llct-dark .music-card:hover, .llct-dark .music-card[data-active=true] {
  background: var(--primary, #0e3b5a);
}
.llct-dark .music-card .content {
  color: var(--alternative, #16abf4);
}
.llct-dark .music-card .content img, .llct-dark .music-card .content::before {
  background: #0c324d;
}

.music-card {
  position: relative;
  min-width: 170px;
  min-height: 170px;
  background: var(--alternative, #bfe0f2);
  border-radius: 16px;
  display: flex;
  cursor: pointer;
  transition: 0.2s background cubic-bezier(0.19, 1, 0.22, 1), 0.4s transform cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-perspective: 2000px;
  perspective: 2000px;
  transform-style: flat;
  outline: none;
}
.music-card:hover, .music-card[data-active=true] {
  background: var(--primary, #bfe0f2);
  color: var(--alternative, #81bbdb);
}
.music-card:hover .content, .music-card[data-active=true] .content {
  color: var(--alternative, #81bbdb);
}
.music-card::before {
  content: "";
  position: absolute;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 8px var(--primary, #bfe0f2);
  opacity: 0.2;
}
.music-card.no-transition {
  transition: unset;
}
@media screen and (max-width: 1000px) {
  .music-card {
    min-width: 170px;
    min-height: 170px;
  }
}
.music-card .content {
  position: relative;
  display: grid;
  width: calc(100% - 30px);
  letter-spacing: -2px;
  margin: 15px;
  color: var(--primary, #128bf4);
  font-size: 20px;
  font-weight: normal;
}
@media screen and (min-width: 1000px) {
  .music-card .content img {
    margin-left: 10px;
    margin-top: 5px;
  }
  .music-card .content::before {
    left: 10px;
    top: 5px;
  }
}
@media screen and (max-width: 1000px) {
  .music-card .content img {
    margin-left: auto;
    margin-top: auto;
  }
  .music-card .content .lazyload-wrapper {
    position: absolute;
    display: flex;
    right: 0;
    bottom: 0;
  }
  .music-card .content::before {
    right: 0;
    bottom: 0;
  }
}
.music-card .content img, .music-card .content::before {
  width: 100px;
  height: 100px;
  background: #aad6ee;
}
.music-card .content img {
  border: 0;
  border-radius: 16px;
}
.music-card .content::before {
  position: absolute;
  content: " ";
  border-radius: 16px;
  transition: 0.3s opacity cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 600px) {
  .music-card .content img, .music-card .content::before {
    width: 100px;
    height: 100px;
  }
}
.music-card .content[data-state="0"]::before {
  opacity: 1;
}
.music-card .content[data-state="1"]::before, .music-card .content[data-state="2"]::before {
  opacity: 0;
}
.music-card .content .metadata {
  width: 100%;
  position: relative;
  margin-top: auto;
}
@media screen and (max-width: 1000px) {
  .music-card .content .metadata {
    margin-top: unset;
  }
}
.music-card .content .metadata .title,
.music-card .content .metadata .artist {
  letter-spacing: -1px;
}
@media screen and (max-width: 1000px) {
  .music-card .content .metadata .title,
.music-card .content .metadata .artist {
    order: -1;
  }
}
@media screen and (min-width: 1000px) {
  .music-card .content .metadata .title,
.music-card .content .metadata .artist {
    text-align: end;
  }
}
.music-card .content .metadata .title {
  margin: 10px auto auto 5px;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 1000px) {
  .music-card .content .metadata .title {
    font-size: 16px;
  }
}
@media screen and (min-width: 1000px) {
  .music-card .content .metadata .title {
    margin: 10px 5px auto auto;
    text-align: end;
  }
}
.music-card .content .metadata .artist {
  font-size: 16px;
  max-height: 40px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0;
  margin-top: -3px;
  opacity: 0.8;
  text-overflow: ellipsis;
}
@media screen and (min-width: 1000px) {
  .music-card .content .metadata .artist {
    margin: 0px 5px auto auto;
    text-align: end;
  }
}
@media screen and (max-width: 1000px) {
  .music-card .content .metadata .artist {
    margin: 0px auto auto 5px;
    max-width: calc( 100% - 112.5px );
    max-height: 120px;
    line-clamp: 6;
    -webkit-line-clamp: 6;
  }
}
@media screen and (max-width: 600px) {
  .music-card .content .metadata .artist {
    max-width: 100%;
    font-size: 14px;
    max-height: 60px;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    margin-bottom: 115px;
  }
}
@media screen and (max-width: 1000px) {
  .music-card .content {
    font-size: 18px;
    margin: 12px;
  }
}
@media screen and (max-width: 600px) {
  .music-card .content {
    font-size: 16px;
  }
}
@keyframes head-anime {
  0%, 100% {
    transform: rotateZ(-10deg);
  }
  50% {
    transform: rotateZ(10deg);
  }
}
.llct-empty-placeholder {
  display: flex;
  width: 100%;
  min-width: 100px;
}
.llct-empty-placeholder .empty-wrapper {
  margin: auto;
  display: grid;
}
@media screen and (max-width: 600px) {
  .llct-empty-placeholder .empty-wrapper {
    max-width: 80%;
    word-break: keep-all;
  }
}
.llct-empty-placeholder p {
  margin: auto;
  font-size: 42px;
  letter-spacing: -2px;
  font-weight: normal;
  opacity: 0.6;
  font-family: "SB AggroOTF", "SB AggroTTF", "SBAggroM", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: center;
  white-space: break-spaces;
  word-break: keep-all;
}
@media screen and (max-width: 600px) {
  .llct-empty-placeholder p {
    font-size: 24px;
    letter-spacing: -2px;
  }
}
.dashboard-component.live {
  display: grid;
  gap: 16px;
}
@media screen and (max-width: 1000px) {
  .dashboard-component.live {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 1240px) {
  .dashboard-component.live {
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard-component.live .live-playlist-component {
    grid-area: 1/2/2/4;
  }
}

.llct-dark .live-component {
  background: #0f4163;
}
.llct-dark .live-component:hover {
  background: #125079;
}
.llct-dark .live-component:active {
  background: #165e8f;
}

.live-component {
  display: flex;
  position: relative;
  min-width: 170px;
  min-height: 210px;
  transition: 0.23s background cubic-bezier(0.19, 1, 0.22, 1);
  background: #bfe0f2;
  border-radius: 16px;
}
.live-component.clickable {
  cursor: pointer;
}
.live-component:hover {
  background: #aad6ee;
}
.live-component:active {
  background: #95cbe9;
}
.live-component .background {
  position: absolute;
  border-radius: 16px;
  width: 100%;
  height: 100%;
}
.live-component .contents {
  margin: auto;
}
.live-component .contents .day {
  font-weight: bold;
  font-size: 42px;
  letter-spacing: -2px;
}

.live-playlist-component {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.llct-roundy-button {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #128bf4;
  color: white;
  fill: white;
  font-size: 16px;
  letter-spacing: -2px;
  display: flex;
  cursor: pointer;
  user-select: none;
  transition: 0.23s background, 0.23s box-shadow cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16);
  text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16);
}
.llct-roundy-button .contents {
  margin: auto;
}
.llct-roundy-button:hover, .llct-roundy-button:focus {
  background-color: #0b83ec;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
}
.llct-roundy-button:active {
  background-color: #0a7ee2;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
}

.llct-dark .llct-roundy-button {
  background-color: #16abf4;
  fill: white;
}
.llct-dark .llct-roundy-button:hover, .llct-dark .llct-roundy-button:focus {
  background-color: #0ba4ef;
}
.llct-dark .llct-roundy-button:active {
  background-color: #0b9ee6;
}
@keyframes jiggle {
  0%, 100% {
    transform: rotateZ(-1deg);
  }
  50% {
    transform: rotateZ(1deg);
  }
}
.llct-dark .llct-playlist-card {
  background: #032740;
}
.llct-dark .llct-playlist-card .summary:hover {
  background: #043353;
}
.llct-dark .llct-playlist-card .summary:active {
  background: #04395d;
}
.llct-dark .llct-playlist-card .brief-summary .title {
  color: #16abf4;
}
.llct-dark .llct-playlist-card .brief-summary input[type=text] {
  border-bottom: 1px solid #16abf4;
  color: #16abf4;
}
.llct-dark .llct-playlist-card .brief-summary .description {
  color: #dadada;
}
.llct-dark .llct-playlist-card .rich-summary .button {
  fill: #16abf4;
}

.llct-playlist-card {
  position: relative;
  background: #bfe0f2;
  padding: 26px 36px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card {
    padding: 16px;
  }
}
.llct-playlist-card.skelecton {
  height: 120px;
}
.llct-playlist-card[data-folded=false] {
  gap: 16px;
  transition: 0.23s all cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-playlist-card[data-folded=false] .summary {
  flex-direction: row;
  height: 64px;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card[data-folded=false] .summary {
    flex-direction: column;
    height: 100px;
  }
}
.llct-playlist-card[data-folded=false] .contents {
  max-height: unset;
}
.llct-playlist-card[data-edit=true] .card-lists:not(.sort-ongoing) .music-card {
  animation: jiggle 0.23s infinite;
}
.llct-playlist-card .summary {
  display: flex;
  gap: 16px;
  height: 64px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 16px;
  transition: 0.23s background cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-playlist-card .summary:hover {
  background: #d0e8f5;
}
.llct-playlist-card .summary:active {
  background: #d8ecf7;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .summary {
    flex-direction: column;
    padding: 26px 6px;
  }
}
@media screen and (max-width: 1000px) {
  .llct-playlist-card .summary {
    height: 100px;
  }
}
.llct-playlist-card .brief-summary {
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-left: 0;
  position: relative;
}
.llct-playlist-card .brief-summary input[type=text] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #128bf4;
  color: #128bf4;
  letter-spacing: -1px;
  max-width: 250px;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .brief-summary input[type=text] {
    width: 100%;
  }
}
.llct-playlist-card .brief-summary .title,
.llct-playlist-card .brief-summary .description {
  margin: 0;
  letter-spacing: -1px;
  box-sizing: border-box;
}
.llct-playlist-card .brief-summary .title {
  color: #128bf4;
  font-size: 20px;
  font-weight: bold;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .brief-summary .title {
    font-size: 18px;
  }
}
.llct-playlist-card .brief-summary .description {
  font-weight: bold;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .brief-summary .description {
    font-size: 14px;
  }
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .brief-summary,
.llct-playlist-card .rich-summary {
    margin: auto;
  }
}
.llct-playlist-card .rich-summary {
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  gap: 32px;
}
@media screen and (max-width: 800px) {
  .llct-playlist-card .rich-summary {
    gap: 26px;
  }
}
.llct-playlist-card .rich-summary .length,
.llct-playlist-card .rich-summary .button {
  font-weight: bold;
  font-size: 14px;
  letter-spacing: -1px;
  margin: auto;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .rich-summary .length,
.llct-playlist-card .rich-summary .button {
    font-size: 12px;
  }
}
.llct-playlist-card .rich-summary .button {
  position: relative;
  z-index: 100;
}
.llct-playlist-card .rich-summary .button .llct-roundy-button {
  width: 64px;
  height: 64px;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .rich-summary .button .llct-roundy-button {
    width: 48px;
    height: 48px;
  }
}
.llct-playlist-card .rich-summary .button:hover::before {
  opacity: 1;
  transform: scale(1);
}
.llct-playlist-card .rich-summary .button:focus::before, .llct-playlist-card .rich-summary .button:active::before {
  background: rgba(0, 0, 0, 0.12);
}
.llct-playlist-card .rich-summary .button::before {
  position: absolute;
  width: 200%;
  height: 200%;
  margin-top: -50%;
  margin-left: -50%;
  border-radius: 50%;
  content: " ";
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  transition: 0.23s opacity cubic-bezier(0.19, 1, 0.22, 1), 0.23s transform cubic-bezier(0.19, 1, 0.22, 1);
  background: rgba(0, 0, 0, 0.08);
  z-index: -1;
}
.llct-playlist-card .rich-summary .musics img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25);
  position: relative;
  margin-left: -32px;
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .rich-summary .musics img {
    width: 48px;
    height: 48px;
    margin-left: -24px;
  }
}
.llct-playlist-card .rich-summary .musics img:first-child {
  margin-left: unset;
}
.llct-playlist-card .rich-summary .button {
  cursor: pointer;
  fill: #128bf4;
}
.llct-playlist-card .rich-summary .llct-playlist-image-group {
  display: flex;
}
.llct-playlist-card .rich-summary .llct-playlist-image-group .text {
  margin: auto;
  margin-left: 16px;
  font-weight: bold;
  font-size: 18px;
}
.llct-playlist-card > .contents {
  visibility: hidden;
  opacity: 0;
  height: 0;
  max-height: 0;
  transform: translateY(-10px);
  transition: 0.3s visibility cubic-bezier(0.19, 1, 0.22, 1), 0.3s opacity cubic-bezier(0.19, 1, 0.22, 1), 0.4s transform cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-playlist-card > .contents.show {
  visibility: visible;
  opacity: 1;
  height: auto;
  transform: translateY(0px);
}

@media screen and (max-width: 800px) {
  .llct-playlist-card .contents .card-lists {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .llct-playlist-card .contents .card-lists {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 800px) {
  .llct-playlist-card .contents .card-lists {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 1000px) {
  .llct-playlist-card .contents .card-lists {
    width: 95%;
    margin: auto;
  }
}
@media screen and (min-width: 1240px) {
  .llct-playlist-card .contents .card-lists {
    grid-template-columns: repeat(4, 1fr);
  }
}
.llct-dark .dashboard-component.birthday .title-wrap .member-color {
  text-shadow: 0px 0px 16px rgba(255, 255, 255, 0.26);
}

.dashboard-component.birthday {
  display: grid;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
@media screen and (max-width: 800px) {
  .dashboard-component.birthday {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 800px) {
  .dashboard-component.birthday {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .dashboard-component.birthday {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 1240px) {
  .dashboard-component.birthday {
    grid-template-columns: repeat(3, 1fr);
  }
}
.dashboard-component.birthday .title-wrap,
.dashboard-component.birthday .card-wrap {
  min-height: 170px;
}
@media screen and (max-width: 1000px) {
  .dashboard-component.birthday .title-wrap,
.dashboard-component.birthday .card-wrap {
    min-height: 140px;
  }
}
.dashboard-component.birthday .title-wrap {
  grid-area: 1/1/2/3;
  display: flex;
}
@media screen and (max-width: 1000px) {
  .dashboard-component.birthday .title-wrap {
    grid-area: 1/1/2/4;
  }
}
.dashboard-component.birthday .title-wrap .title {
  font-size: 36px;
  font-weight: 300;
  font-family: "SB AggroOTF", "SB AggroTTF", "SBAggroM", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin-bottom: auto;
  word-wrap: break-word;
  word-break: keep-all;
}
@media screen and (max-width: 1000px) {
  .dashboard-component.birthday .title-wrap .title {
    font-size: 26px;
  }
}
@media screen and (min-width: 1000px) {
  .dashboard-component.birthday .title-wrap .title {
    margin-top: auto;
  }
}
.dashboard-component.birthday .title-wrap .member-color {
  text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.26);
}
.dashboard-component.birthday .card-wrap {
  grid-area: 1/3/2/4;
}
@media screen and (max-width: 1000px) {
  .dashboard-component.birthday .card-wrap {
    grid-area: 2/1/3/4;
  }
}
.dashboard-component.link {
  display: grid;
  gap: 16px;
}
@media screen and (max-width: 600px) {
  .dashboard-component.link {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 800px) {
  .dashboard-component.link {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 800px) {
  .dashboard-component.link {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1240px) {
  .dashboard-component.link {
    grid-template-columns: repeat(3, 1fr);
  }
}

.llct-dark .link-component {
  background: #0f4163;
}
.llct-dark .link-component:hover {
  background: #125079;
}
.llct-dark .link-component:active {
  background: #165e8f;
}

.link-component {
  display: flex;
  position: relative;
  min-width: 170px;
  min-height: 210px;
  transition: 0.23s background cubic-bezier(0.19, 1, 0.22, 1);
  background: #bfe0f2;
  border-radius: 16px;
}
.link-component.clickable {
  cursor: pointer;
}
.link-component:hover {
  background: #aad6ee;
}
.link-component:active {
  background: #95cbe9;
}
.link-component .background {
  position: absolute;
  border-radius: 16px;
  width: 100%;
  height: 100%;
}
.link-component .contents {
  margin: auto;
  display: flex;
  flex-direction: column;
}
.link-component .contents p {
  margin: 0;
}
.link-component .contents .title {
  font-weight: bold;
  font-size: 26px;
  letter-spacing: -2px;
}
.link-component .contents .description {
  font-size: 16px;
  letter-spacing: -2px;
  margin-left: auto;
  margin-right: auto;
}
.llct-settings {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}
@media screen and (max-width: 1000px) {
  .llct-settings {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
@media screen and (max-width: 600px) {
  .llct-settings {
    font-size: 12px;
  }
}

.llct-dark .llct-settings-row .info .link {
  color: #16abf4;
  border-bottom: 1px dashed #16abf4;
}

.llct-settings-row {
  display: flex;
  margin-bottom: 3vh;
  outline: none;
}
.llct-settings-row .info {
  letter-spacing: -1px;
}
.llct-settings-row .info .link {
  color: #128bf4;
  cursor: pointer;
  border-bottom: 1px dashed #128bf4;
}
.llct-settings-row .info h1,
.llct-settings-row .info p {
  margin: 0;
}
.llct-settings-row .logo span {
  font-size: 16px;
}
.llct-settings-row .controls {
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
}
.llct-settings-row label {
  margin-right: 10px;
}

.settings-title {
  display: block;
  font-size: 20px;
  letter-spacing: -1px;
  font-weight: normal;
  font-family: "SBAggroM", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-display: "swap";
}
@media screen and (max-width: 600px) {
  .settings-title {
    font-size: 16px;
  }
}

.settings-desc {
  display: block;
  font-size: 14px;
  letter-spacing: -1px;
  margin-top: 4px;
  opacity: 0.8;
}
.llct-dark .llct-checkbox {
  background: #0f4163;
}
.llct-dark .llct-checkbox.disabled {
  background: #0c324d;
}
.llct-dark .llct-checkbox.disabled .thumb {
  background: #076c9d;
}
.llct-dark .llct-checkbox .thumb {
  background: #16abf4;
}

.llct-checkbox {
  position: relative;
  cursor: pointer;
  outline: none;
  width: 48px;
  height: 24px;
  background: #bfe0f2;
  border-radius: 18px;
}
.llct-checkbox > input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.llct-checkbox.disabled {
  background: #d4eaf6;
}
.llct-checkbox.disabled .thumb {
  background: #73bbf9;
}
.llct-checkbox .thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translateX(0px);
  margin-left: 1px;
  margin-top: 1px;
  border-radius: 50%;
  background: #128bf4;
  transition: 0.3s transform cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}
.llct-checkbox > input:checked + .thumb {
  transform: translateX(24px);
}
.llct-dark .llct-lists-dropdown select {
  background: #082437;
  color: #16abf4;
}
.llct-dark .llct-lists-dropdown select:hover {
  background: #0a2d44;
}
.llct-dark .llct-lists-dropdown select:focus {
  background: #0c324d;
}

.llct-lists-dropdown select {
  min-width: 150px;
  min-height: 30px;
  padding: 8px 20px;
  border: 0;
  border-radius: 16px;
  background: #bfe0f2;
  color: #0877f7;
  outline: none;
}
.llct-lists-dropdown select:hover {
  background: #cce6f5;
}
.llct-lists-dropdown select:focus {
  background: #d4eaf6;
}

.llct-dark .llct-lists-dropdown select {
  color: #0877f7;
}
.llct-button {
  padding: 12px 42px;
  border-radius: 32px;
  background-color: var(--color-background-shade, #81bbdb);
  color: white;
  font-size: 16px;
  letter-spacing: -1px;
  display: flex;
  cursor: pointer;
  user-select: none;
  transition: 0.23s background, 0.23s box-shadow cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16);
  text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16);
}
.llct-button .contents {
  margin: auto;
}
.llct-button:hover, .llct-button:focus {
  background-color: #75b5d8;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
}
.llct-button:active {
  background-color: #6db0d5;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
}

.llct-dark .llct-button {
  background-color: var(--color-background-dark-shade, #032740);
}
.llct-dark .llct-button:hover, .llct-dark .llct-button:focus {
  background-color: #021e31;
}
.llct-dark .llct-button:active {
  background-color: #021828;
}
.songs-groups-wrapper {
  display: flex;
  margin-bottom: 30px;
  overflow: auto;
}
.songs-groups-wrapper::-webkit-scrollbar {
  width: 1px;
}

.songs-list-wrapper {
  display: grid;
  gap: 16px;
  position: relative;
}
@media screen and (max-width: 600px) {
  .songs-list-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 800px) {
  .songs-list-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 800px) {
  .songs-list-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 1000px) {
  .songs-list-wrapper {
    width: 95%;
    margin: auto;
  }
}
@media screen and (min-width: 1240px) {
  .songs-list-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

.llct-dark .songs-action-box {
  background: #0b1929;
}

.songs-action-box {
  display: flex;
  background: #eff5fd;
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: 30px;
}
.songs-action-box h3 {
  letter-spacing: -2px;
  font-size: 24px;
}
.songs-action-box .llct-button {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 16px;
}
@media screen and (max-width: 1000px) {
  .songs-action-box {
    flex-direction: column;
    padding-bottom: 3vh;
  }
  .songs-action-box h3 {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 600px) {
  .songs-action-box h3 {
    font-size: 20px;
  }
}

.group-card {
  margin-right: 5px;
}
.group-card:last-child {
  margin-right: unset;
}
.llct-dark .group-card {
  background-color: var(--group-color-dark, #bfe0f2);
  color: var(--group-color, #16abf4);
  border: 1px solid var(--group-color-dark-border, #16abf4);
}
.llct-dark .group-card[data-active=true] {
  background-color: var(--group-color, #95cbe9);
  color: white;
}

.group-card {
  display: flex;
  border-radius: 16px;
  padding: 8px 32px;
  white-space: nowrap;
  outline: none;
  background-color: var(--group-color-light, #bfe0f2);
  color: var(--group-color, #128bf4);
  border: 1px solid var(--group-color, #128bf4);
  cursor: pointer;
  font-weight: bold;
  transition: background 0.23s cubic-bezier(0.19, 1, 0.22, 1), color 0.23s cubic-bezier(0.19, 1, 0.22, 1), transform 0.23s cubic-bezier(0.19, 1, 0.22, 1);
}
.group-card .text {
  margin: auto;
  text-align: center;
  letter-spacing: -1px;
}
.group-card[data-active=false]:hover {
  transform: scale(0.95);
}
.group-card[data-active=true] {
  background-color: var(--group-color, #95cbe9);
  color: white;
}
@media screen and (max-width: 600px) {
  .group-card {
    padding: 6px 26px;
    font-size: 14px;
  }
}
@keyframes llct-tab-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.llct-tab {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  left: 8vw;
  top: 30vh;
  display: none;
  max-width: 1400px;
  padding: 0px 0px 20vh 0px;
}
.llct-tab.show {
  display: block;
  animation: llct-tab-animation 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 1000px) {
  .llct-tab {
    left: 0;
    top: calc(30vh + 30px + 3vh);
    width: 95vw;
  }
}
@media screen and (min-width: 1000px) {
  .llct-tab {
    width: 75vw;
  }
}
@media screen and (min-width: 2000px) {
  .llct-tab {
    left: 0;
  }
}

.llct-tab-list {
  position: fixed;
  overflow-x: auto;
  overflow-y: hidden;
  left: 5vw;
  top: 30vh;
  display: block;
  width: fit-content;
  text-align: center;
}
.llct-tab-list::-webkit-scrollbar {
  width: 1px;
}
@media screen and (min-width: 1000px) {
  .llct-tab-list {
    top: max(38vh, 280px);
  }
  .llct-tab-list .llct-tab-button {
    margin-right: unset;
    margin-bottom: 25px;
    width: fit-content;
  }
}
@media screen and (max-width: 1000px) {
  .llct-tab-list {
    position: absolute;
    display: flex;
    max-width: 90%;
  }
}
.llct-tab-list .llct-tab-button {
  margin-right: 15px;
  outline: none;
}

.llct-dark .llct-tab-button {
  color: #054a6c;
}
.llct-dark .llct-tab-button[data-current=false]:hover {
  color: #1c7bbc;
}
.llct-dark .llct-tab-button[data-current=true] {
  color: #16abf4;
}
.llct-dark .llct-tab-button .text::before {
  background: #0f4163;
}

.llct-tab-button {
  position: relative;
  font-weight: bold;
  font-size: 24px;
  white-space: nowrap;
  letter-spacing: -2px;
  color: #bfe0f2;
  user-select: none;
  transition: 0.23s color cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 600px) {
  .llct-tab-button {
    font-size: 20px;
  }
}
.llct-tab-button .text {
  position: relative;
}
.llct-tab-button .text::before {
  position: absolute;
  content: " ";
  left: 0;
  top: 40%;
  width: 100%;
  height: 60%;
  background-color: #bfe0f2;
  transition: 0.23s opacity cubic-bezier(0.19, 1, 0.22, 1), 0.23s transform cubic-bezier(0.19, 1, 0.22, 1);
  transform: scaleX(0);
  opacity: 0;
  z-index: -1;
}
.llct-tab-button[data-current=false] {
  cursor: pointer;
}
.llct-tab-button[data-current=false]:hover {
  color: #73bbf9;
}
.llct-tab-button[data-current=true] {
  color: #128bf4;
}
.llct-tab-button[data-current=true] .text::before {
  opacity: 1;
  transform: scaleX(1);
}

@keyframes llct-icon-animation {
  0% {
    opacity: 0;
    transform: rotateY(30deg) translateX(-10px);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: rotateY(0deg);
  }
}
.llct-icon {
  position: absolute;
  left: 5vw;
  top: 4vh;
  width: 56px;
  height: 56px;
  z-index: 100;
  user-select: none;
  cursor: pointer;
  -webkit-perspective: 100px;
  perspective: 100px;
  animation: llct-icon-animation 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-icon:hover {
  transform: scale(1.1);
}

.llct-icon-inline {
  width: 56px;
  height: 56px;
}
.llct-animate-appear {
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1) 0.23s, opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.23s;
}
.llct-animate-appear-active {
  opacity: 1;
  transform: translateX(0px);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1) 0.23s, opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.23s;
}
.llct-animate-appear-done {
  opacity: 1;
  transform: translateX(0px);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1) 0.23s, opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.23s;
}
.llct-animate-exit {
  opacity: 1;
  transform: translateX(10px);
}
.llct-animate-exit-active {
  opacity: 0;
  transform: translateX(10px);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1) 0.23s, opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.23s;
}

.llct-tab-animate-appear {
  opacity: 0;
  transform: scale(0.95);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1) 0.23s, opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.23s;
}
.llct-tab-animate-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1) 0.23s, opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.23s;
}
.llct-tab-animate-appear-done {
  opacity: 1;
  transform: scale(1);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1) 0.23s, opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.23s;
}
.llct-tab-animate-exit {
  opacity: 1;
  transform: scale(0.9);
}
.llct-tab-animate-exit-active {
  opacity: 0;
  transform: scale(1);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1) 0.23s, opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.23s;
}

.llct-tab-animate-nodelay-appear {
  opacity: 0;
  transform: scale(0.95);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-tab-animate-nodelay-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-tab-animate-nodelay-appear-done {
  opacity: 1;
  transform: scale(1);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-tab-animate-nodelay-exit {
  opacity: 1;
  transform: scale(0.9);
}
.llct-tab-animate-nodelay-exit-active {
  opacity: 0;
  transform: scale(1);
  transition: 0.5s transform cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.categories {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.categories .category {
  width: 95%;
  margin: auto;
  gap: 32px;
  display: flex;
  flex-direction: column;
}
.categories .category-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -1px;
}
@media screen and (max-width: 600px) {
  .categories .category-title {
    font-size: 18px;
  }
}
.categories .category-items {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.categories .button-group {
  display: flex;
  margin: auto;
  gap: 16px;
}
@media screen and (max-width: 600px) {
  .categories .button-group {
    flex-direction: column;
  }
}
.llct-dark .llct-player-button {
  background: #0f4163;
  box-shadow: 0px 0px 16px #0b1929;
}

.llct-player-button {
  position: fixed;
  right: 5vw;
  bottom: 5vh;
  cursor: pointer;
  display: flex;
  z-index: 10000;
  transition: 0.23s opacity cubic-bezier(0.19, 1, 0.22, 1), 0.6s transform cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  pointer-events: none;
  transform: scale(0) translateX(100px);
  width: 100px;
  height: 100px;
  background: #bfe0f2;
  box-shadow: 0px 0px 32px #eff5fd;
}
.llct-player-button.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateX(0);
}
@media screen and (max-width: 600px) {
  .llct-player-button {
    width: 80px;
    height: 80px;
    transform: scale(0) translateX(80px);
  }
}
.llct-player-button .llct-player-wave {
  z-index: 100;
  border-radius: 50%;
  opacity: 0;
  transition: 0.23s opacity cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-player-button .llct-player-wave[data-show=true] {
  opacity: 1;
}
.llct-player-button .llct-player-wave:hover {
  opacity: 0.4;
}
.llct-player-button .llct-player-wave canvas {
  width: 100px;
  height: 100px;
}
@media screen and (max-width: 600px) {
  .llct-player-button .llct-player-wave,
.llct-player-button .llct-player-wave canvas {
    width: 80px;
    height: 80px;
  }
}
.llct-player-button .llct-player-wave canvas {
  position: relative;
  border-radius: 50%;
}
.llct-player-button,
.llct-player-button img,
.llct-player-button .layer {
  border-radius: 50%;
}
.llct-player-button img,
.llct-player-button .layer {
  position: absolute;
  width: 100%;
  height: 100%;
}
.llct-player-button .layer {
  opacity: 1;
  background: rgba(0, 0, 0, 0.26);
  display: flex;
  transition: 0.23s opacity cubic-bezier(0.19, 1, 0.22, 1);
  color: white;
  fill: white;
}
.llct-player-button .layer > * {
  margin: auto;
}
.llct-player-button .layer svg {
  width: 36px;
  height: 36px;
}
.llct-player-button[data-state="0"] .layer {
  opacity: 0.4;
}
.llct-player-button:hover .layer {
  opacity: 1;
}
@keyframes cover-animation {
  0% {
    transform: translateY(0px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(165px) rotate(calc(var(--direction, -1) * 90deg));
    opacity: 0;
  }
}
.llct-player-button-animation {
  position: fixed;
  right: calc(5vw);
  bottom: calc(5vh + 55px * 3);
  cursor: pointer;
  display: flex;
  pointer-events: none;
  opacity: 0;
  width: 100px;
  z-index: 9999;
}
@media screen and (max-width: 600px) {
  .llct-player-button-animation {
    width: 80px;
  }
}
.llct-player-button-animation img {
  border-radius: 9.1666666667px;
  width: 55px;
  height: 55px;
  margin: auto;
}
.llct-player-button-animation.show {
  animation: cover-animation 1s cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 1;
}
.llct-player-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.42);
  transition: 0.45s opacity cubic-bezier(0.215, 0.61, 0.355, 1);
}
.llct-player-background.show {
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
  opacity: var(--opacity, 1);
}
.llct-player-background.show.player-handle-touch {
  transition: unset;
}

@keyframes dashboard-column-popup {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.llct-dark .llct-player {
  background: var(--color-background-dark, #0b1929);
  color: var(--color-text-dark, #16abf4);
}
.llct-dark .llct-player svg {
  fill: var(--color-text-dark, #16abf4);
}
.llct-dark .llct-player .controls > svg:hover {
  background: rgba(0, 0, 0, 0.22);
}
.llct-dark .llct-player .mini-player {
  background: linear-gradient(to bottom, var(--color-background-dark, #0b1929), var(--color-background-dark, #0b1929), var(--color-background-dark-alpha-zero, #0b192900));
}

.llct-player {
  position: fixed;
  right: 0;
  top: 0;
  width: 80%;
  display: block;
  z-index: 20000;
  isolation: isolate;
  height: 100%;
  border-radius: 16px 0px 0px 16px;
  transition: 0.45s opacity cubic-bezier(0.19, 1, 0.22, 1), 0.6s transform cubic-bezier(0.19, 1, 0.22, 1), 0.4s background cubic-bezier(0.19, 1, 0.22, 1), 0.4s color cubic-bezier(0.19, 1, 0.22, 1), 0.6s border-radius 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  color: var(--color-text, #128bf4);
  opacity: 0;
  pointer-events: none;
  transform: translateX(90vw);
  background: var(--color-background, #eff5fd);
}
@media screen and (max-width: 1240px) {
  .llct-player {
    height: 130%;
  }
}
.llct-player svg {
  fill: var(--color-text, #128bf4);
}
.llct-player.show {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}
@media screen and (max-width: 1240px) {
  .llct-player.show {
    border-radius: 0px;
    transform: translateY(var(--player-pull, 0));
  }
}
.llct-player.player-handle-touch {
  transition: 0.6s border-radius cubic-bezier(0.19, 1, 0.22, 1);
  border-radius: 16px 0px 0px 16px;
}
@media screen and (max-width: 1240px) {
  .llct-player.player-handle-touch {
    border-radius: 16px 16px 0px 0px;
  }
}
.llct-player:not(.show) {
  border-radius: 16px 0px 0px 16px;
  transition: 0.45s opacity 0.05s cubic-bezier(0.19, 1, 0.22, 1), 0.9s transform cubic-bezier(0.19, 1, 0.22, 1), 0.6s border-radius cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 1240px) {
  .llct-player:not(.show) {
    border-radius: 16px 16px 0px 0px;
  }
}
@media screen and (max-width: 1240px) {
  .llct-player {
    width: 100%;
    border-radius: 0px;
    transform: translateY(var(--player-pull, 90vh));
  }
}
.llct-player .close-area {
  position: fixed;
  cursor: grab;
  z-index: 10000;
}
.llct-player .close-area:active {
  cursor: grabbing;
}
@media screen and (max-width: 1240px) {
  .llct-player .close-area {
    width: 100%;
    height: 8vh;
    left: 0;
    top: 0;
    display: flex;
  }
  .llct-player .close-area > * {
    margin: auto;
  }
}
@media screen and (min-width: 1240px) {
  .llct-player .close-area {
    left: 5%;
    top: 5%;
  }
}
.llct-player .close-area > svg {
  width: 32px;
  height: 32px;
}
.llct-player > .contents {
  display: flex;
  position: relative;
  top: 5%;
  left: 5%;
  flex-direction: column;
}
@media screen and (max-width: 1240px) {
  .llct-player > .contents {
    height: 90vh;
    overflow-y: auto;
  }
}
@media screen and (min-width: 1240px) {
  .llct-player > .contents {
    flex-direction: row;
  }
}
.llct-player .mini-player {
  position: fixed;
  width: 90%;
  height: 85px;
  background: #fff;
  z-index: 100;
  background: linear-gradient(to bottom, var(--color-background, #eff5fd), var(--color-background, #eff5fd), var(--color-background-alpha-zero, #eff5fd00));
  transition: 0.23s transform cubic-bezier(0.19, 1, 0.22, 1), 0.23s opacity cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateY(-35px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  display: flex;
}
@media screen and (max-width: 1240px) {
  .llct-player .mini-player.visible {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
  }
}
.llct-player .mini-player .left,
.llct-player .mini-player .right {
  height: 50%;
  pointer-events: all;
}
.llct-player .mini-player .left {
  flex: 2;
  margin-top: 6px;
  margin-right: 16px;
}
.llct-player .mini-player .left .controls {
  margin-top: unset;
  margin-left: unset;
}
.llct-player .mini-player .left svg {
  width: 26px;
  height: 26px;
}
@media screen and (max-width: 600px) {
  .llct-player .mini-player .left svg {
    width: 24px;
    heght: 24px;
  }
}
.llct-player .mini-player .right {
  flex: 8;
  display: flex;
  position: relative;
}
.llct-player .mini-player .right .llct-slider-wrapper {
  width: 95%;
  margin-top: 8px;
  margin-bottom: auto;
}
.llct-player .mini-player .equalizer-button {
  display: none;
}
@media screen and (max-width: 1240px) {
  .llct-player .dashboard,
.llct-player .lyrics {
    width: 85%;
    margin-left: 2.5%;
  }
}
.llct-player .dashboard {
  position: relative;
  margin-top: 5%;
  flex: 4;
}
@media screen and (min-width: 1240px) {
  .llct-player .dashboard {
    min-width: 480px;
    max-width: 600px;
    margin-top: 8%;
  }
}
@media screen and (max-width: 600px) {
  .llct-player .dashboard {
    font-size: 14px;
  }
}
.llct-player .dashboard h1,
.llct-player .dashboard h2,
.llct-player .dashboard h3,
.llct-player .dashboard h4,
.llct-player .dashboard h5,
.llct-player .dashboard p {
  margin: 0;
  letter-spacing: -1px;
}
.llct-player .lyrics {
  position: relative;
  display: flex;
}
.llct-player .lyrics .llct-call {
  margin: auto;
  width: 100%;
}
@media screen and (max-width: 1240px) {
  .llct-player .lyrics {
    margin-top: 3vh;
  }
}
@media screen and (min-width: 1240px) {
  .llct-player .lyrics {
    margin-left: 5%;
    width: 60%;
    height: 90vh;
    overflow: auto;
    flex: 5;
    margin-right: 8vw;
  }
}
.llct-player .lyrics .no-call {
  height: 80vh;
}
.llct-player .dashboard-column {
  margin-top: 3vh;
  animation: dashboard-column-popup 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-player .dashboard-column:first-child {
  margin-top: unset;
}
.llct-player .dashboard-column .column-title {
  font-size: 20px;
  letter-spacing: -1px;
  margin-bottom: 1vh;
  font-weight: bold;
  opacity: 0.8;
}
@media screen and (max-width: 600px) {
  .llct-player .dashboard-column .column-title {
    font-size: 16px;
  }
}
.llct-player .call-info-zone {
  margin-top: 4vh;
  display: flex;
}
.llct-player .call-info-zone .player-banner-wrapper {
  overflow-x: auto;
  display: flex;
  gap: 8px;
  width: 100%;
}
@media screen and (max-width: 800px) {
  .llct-player .call-info-zone .player-banner-wrapper {
    flex-direction: column;
  }
  .llct-player .call-info-zone .player-banner-wrapper .title,
.llct-player .call-info-zone .player-banner-wrapper .description {
    white-space: normal;
  }
}
.llct-player .call-info-zone .llct-player-banner {
  flex: 1;
}
.llct-player .call-info-zone + .upnext-zone, .llct-player .call-info-zone + .equalizer-zone, .llct-player .call-info-zone + .lyrics {
  margin-top: 3vh;
}
.llct-player .metadata-zone {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "texts texts image" "texts texts image" "controls controls image";
  letter-spacing: -1px;
}
.llct-player .upnext-zone {
  margin-top: 6vh;
}
@media screen and (min-width: 1240px) {
  .llct-player .upnext-zone {
    display: block;
  }
}
@media screen and (max-width: 1240px) {
  .llct-player .upnext-zone {
    display: none;
  }
}
@media screen and (max-width: 1240px) {
  .llct-player .upnext-zone[data-show=true] {
    display: block;
  }
}
.llct-player .equalizer-zone {
  margin-top: 6vh;
}
.llct-player .equalizer-zone .no-eq-support {
  letter-spacing: -1px;
}
.llct-player .equalizer-zone .no-eq-support > span {
  display: flex;
}
.llct-player .equalizer-zone .no-eq-support svg {
  width: 18px;
  height: 18px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 3px;
}
.llct-player .equalizer-zone .equalizer-lack {
  margin-bottom: 3vh;
}
.llct-player .equalizer-zone .equalizer-lack h3 {
  margin-bottom: 1vh !important;
}
.llct-player .equalizer-zone .equalizer-lack:last-child {
  margin-bottom: unset;
}
.llct-player .equalizer-zone .equalizer-lack .llct-slider-wrapper {
  margin-top: 10px;
}
.llct-player .controls,
.llct-player .image {
  display: flex;
}
.llct-player .texts {
  grid-area: texts;
  margin-top: auto;
  margin-bottom: 5px;
  max-width: 95%;
}
.llct-player .texts .title {
  font-size: 20px;
  letter-spacing: -1px;
}
@media screen and (max-width: 600px) {
  .llct-player .texts .title {
    font-size: 16px;
  }
}
.llct-player .texts .title,
.llct-player .texts .artist {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.llct-player .texts .artist {
  font-size: 16px;
  font-weight: normal;
  opacity: 0.8;
}
@media screen and (max-width: 600px) {
  .llct-player .texts .artist {
    font-size: 12px;
  }
}
.llct-player .controls {
  grid-area: controls;
  margin-top: 5px;
  margin-bottom: auto;
  margin-left: -12px;
}
@media screen and (max-width: 600px) {
  .llct-player .controls {
    margin-left: -12px;
  }
}
.llct-player .controls > svg {
  width: 24px;
  height: 24px;
  padding: 8px;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
  transition: 0.23s background cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 600px) {
  .llct-player .controls > svg {
    width: 24px;
    height: 24px;
  }
}
.llct-player .controls > svg:hover {
  background: rgba(0, 0, 0, 0.08);
}
.llct-player .controls > svg:last-child {
  margin-right: unset;
}
.llct-player .image {
  grid-area: image;
}
.llct-player .image img {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.22);
  margin: auto;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
@media screen and (max-width: 800px) {
  .llct-player .image img {
    width: 150px;
    height: 150px;
  }
}
@media screen and (max-width: 600px) {
  .llct-player .image img {
    width: 120px;
    height: 120px;
  }
}
.llct-player .image .youtubeContainer {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 8px;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.22);
  margin: auto;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .llct-player .image .youtubeContainer {
    width: 150px;
    height: 150px;
  }
}
@media screen and (max-width: 600px) {
  .llct-player .image .youtubeContainer {
    width: 120px;
    height: 120px;
  }
}
.llct-player .image .youtubeContainer iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.llct-player .llct-call .llct-call-line:last-child {
  margin-bottom: 10vh;
}
.llct-slider-wrapper {
  user-select: none;
  position: relative;
  display: grid;
  cursor: grab;
}
.llct-slider-wrapper:hover .llct-slider-text {
  opacity: 1;
}
.llct-slider-wrapper:active {
  cursor: grabbing;
}

.llct-slider-text {
  pointer-events: none;
  display: flex;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.23s cubic-bezier(0.19, 1, 0.22, 1);
}
.llct-slider-text .text-current,
.llct-slider-text .text-max {
  position: absolute;
}
@media screen and (max-width: 600px) {
  .llct-slider-text {
    font-size: 12px;
  }
}
.llct-slider-text .text-current {
  left: 0;
}
.llct-slider-text .text-max {
  right: 0;
}

.llct-slider {
  position: relative;
  min-height: 4px;
  min-width: 100px;
  top: 28px;
  margin-bottom: 14px;
  background: var(--slider-background-color, #bfe0f2);
  border-radius: 3px;
}
@media screen and (max-width: 600px) {
  .llct-slider {
    top: 24px;
  }
}
.llct-slider .thumb,
.llct-slider .running-track {
  position: absolute;
  pointer-events: none;
}
.llct-slider .thumb {
  width: 16px;
  height: 16px;
  top: -8px;
  left: -8px;
  background: var(--slider-thumb-color, #128bf4);
  transform: translateX(var(--translate, 0));
  border-radius: 50%;
  pointer-events: none;
}
.llct-slider .running-track {
  background: var(--slider-track-color, #128bf4);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  width: 100%;
  height: 100%;
}

.llct-dark .llct-slider {
  background: var(--slider-background-color-dark, #0f4163);
}
.llct-dark .llct-slider .thumb {
  background: var(--slider-thumb-color-dark, #16abf4);
}
.llct-dark .llct-slider .running-track {
  background: var(--slider-track-color-dark, #16abf4);
}
.llct-upnext {
  display: block;
  max-height: 300px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (min-width: 1000px) {
  .llct-upnext {
    max-height: 40vh;
  }
}
.llct-upnext .upnext-section {
  position: relative;
}
.llct-upnext .upnext-music {
  margin-bottom: 15px;
}
.llct-upnext .upnext-music:last-child {
  margin-bottom: unset;
}

.llct-dark .upnext-music[data-current=true] {
  background-color: var(--color-background-dark-shade, rgba(0, 140, 255, 0.12));
}
.llct-dark .upnext-music:not([data-current=true]):hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.upnext-music {
  display: flex;
  border-radius: 16px;
}
.upnext-music[data-current=true] {
  background-color: var(--color-background-shade, rgba(0, 140, 255, 0.12));
}
.upnext-music:not([data-current=true]):hover {
  background-color: rgba(0, 0, 0, 0.12);
}
.upnext-music .cover {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}
@media screen and (max-width: 600px) {
  .upnext-music .cover {
    width: 45px;
    height: 45px;
  }
}
.upnext-music .info {
  display: grid;
  margin: auto 15px;
  letter-spacing: -1px;
}
.upnext-music .info .music-title,
.upnext-music .info .music-artist {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.upnext-music .info .music-title {
  font-size: 16px;
}
@media screen and (max-width: 600px) {
  .upnext-music .info .music-title {
    font-size: 14px;
  }
}
.upnext-music .info .music-artist {
  font-size: 14px;
  opacity: 0.8;
}
@media screen and (max-width: 600px) {
  .upnext-music .info .music-artist {
    font-size: 12px;
  }
}
.llct-call {
  position: relative;
}

.llct-dark .llct-call-line .line-lyrics {
  color: #fff;
}

.llct-call-line {
  display: table;
  margin: 0;
  line-height: 1.45;
}
.llct-call-line .line-lyrics {
  display: block;
  font-size: 16px;
  letter-spacing: -1px;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-duration: 0.3s;
  margin: 0px 0px 8px 0px;
  color: #000;
  opacity: 0.4;
}
@media screen and (max-width: 600px) {
  .llct-call-line .line-lyrics {
    font-size: 14px;
  }
}
.llct-call-line[data-active=true] .line-lyrics {
  opacity: 0.8;
}
.llct-call-line[data-margin=true] {
  margin-bottom: 8px;
}

.llct-call-word {
  font-size: 18px;
  letter-spacing: -1px;
  font-weight: bold;
  transition-property: opacity, color, box-shadow;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-duration: 0.3s;
  color: #8d9194;
}
.llct-call-word[data-passed=true] {
  transition-duration: 0.3s !important;
}
@media screen and (max-width: 600px) {
  .llct-call-word {
    font-size: 16px;
  }
}

.llct-call-word[data-type][data-passed=true] {
  color: #999e9e;
}
.llct-call-word[data-type][data-active=true] {
  color: var(--color-text, #33b4f7);
}

.llct-dark .llct-call-word[data-type][data-active=true] {
  color: var(--color-text, #33b4f7);
}

.llct-call-word[data-type="0"] {
  color: var(--color-text, #666b6b);
}
.llct-call-word[data-type="0"][data-passed=true] {
  color: #999e9e;
}
.llct-call-word[data-type="0"][data-active=true] {
  color: white;
  text-shadow: 0px 0px 6px var(--color-text, #33b4f7);
}

.llct-dark .llct-call-word[data-type="0"] {
  color: var(--color-text-dark, #d6e9f3);
}
.llct-dark .llct-call-word[data-type="0"][data-passed=true] {
  color: var(--color-text-dark-shade, #60a9d0);
}
.llct-dark .llct-call-word[data-type="0"][data-active=true] {
  color: var(--color-text-dark-active, #33b4f7);
  text-shadow: unset;
}

.llct-call-word[data-type="1"] {
  color: #28c335;
}
.llct-call-word[data-type="1"][data-passed=true] {
  color: #6fe279;
}
.llct-call-word[data-type="1"][data-active=true] {
  color: white;
  text-shadow: 0px 0px 4px #28c335;
}

.llct-dark .llct-call-word[data-type="1"] {
  color: #28c335;
}
.llct-dark .llct-call-word[data-type="1"][data-passed=true] {
  color: #176e1e;
}
.llct-dark .llct-call-word[data-type="1"][data-active=true] {
  color: white;
  text-shadow: 0px 0px 4px #28c335;
}

.llct-call-word[data-type="2"] {
  color: #499797;
  text-shadow: unset;
}
.llct-call-word[data-type="2"][data-passed=true] {
  color: #83c3c3;
}
.llct-call-word[data-type="2"][data-active=true] {
  color: white;
  text-shadow: 0px 0px 4px var(--color-text, #499797);
}

.llct-dark .llct-call-word[data-type="2"] {
  color: #499797;
}
.llct-dark .llct-call-word[data-type="2"][data-passed=true] {
  color: #285252;
}
.llct-dark .llct-call-word[data-type="2"][data-active=true] {
  color: white;
  text-shadow: 0px 0px 4px var(--color-text, #499797);
}

.llct-call-word[data-type="3"] {
  color: #0a8bf5;
}
.llct-call-word[data-type="3"][data-passed=true] {
  color: #6cb9f9;
}
.llct-call-word[data-type="3"][data-active=true] {
  color: white;
  text-shadow: 0px 0px 4px var(--color-text, #0a8bf5);
}

.llct-dark .llct-call-word[data-type="3"] {
  color: #0a8bf5;
}
.llct-dark .llct-call-word[data-type="3"][data-passed=true] {
  color: #086fc4;
}
.llct-dark .llct-call-word[data-type="3"][data-active=true] {
  color: white;
  text-shadow: 0px 0px 4px var(--color-text, #0a8bf5);
}

.llct-call-word[data-passed=true] {
  opacity: 0.5;
}

.llct-call-word[data-active=true] {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
}

.llct-open-editor-wrapper {
  display: block;
  margin-top: 20px;
}
.llct-open-editor-wrapper p {
  font-size: 20px;
  letter-spacing: -1px;
  opacity: 0.6;
  margin-bottom: 10px;
}
.llct-open-editor-wrapper .llct-button {
  margin-top: 16px;
  color: inherit;
}
.llct-loader-wrapper {
  position: relative;
  width: 100%;
  height: 50vh;
  display: flex;
}
.llct-loader-wrapper > .llct-loader {
  margin: auto;
}

.llct-loader {
  transform: scale(0.5);
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.llct-loader div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}

.llct-loader div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}

.llct-loader div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.llct-loader div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.llct-loader div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.llct-loader div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.llct-loader div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.llct-loader div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.llct-loader div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.llct-loader div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.llct-loader div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.llct-loader div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.llct-loader div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.llct-loader div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.llct-dark .llct-player-banner {
  background: var(--color-background-dark-shade, #032740);
}

.llct-player-banner {
  position: relative;
  min-height: 75px;
  background: var(--color-background-shade, #81bbdb);
  padding-left: 32px;
  padding-right: 32px;
  display: flex;
  border-radius: 16px;
}
.llct-player-banner .contents {
  margin-top: auto;
  margin-bottom: auto;
}
.llct-player-banner .contents .title,
.llct-player-banner .contents .description {
  white-space: nowrap;
}
.llct-player-banner .contents .title {
  font-size: 18px;
  font-weight: bold;
}
.llct-player-banner .contents .description {
  font-size: 14px;
  font-weight: 500;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

@font-face {
  font-family: "SBAggroM";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: "swap";
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Spoqa Han Sans Neo", "Noto Sans CJK KR", -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Segoe UI", Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
  transition: 0.3s color cubic-bezier(0.19, 1, 0.22, 1), 0.3s background cubic-bezier(0.19, 1, 0.22, 1);
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  width: 100%;
  height: 100%;
}

body {
  background: #eff5fd;
  color: #128bf4;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

.llct-dark body {
  background: #0b1929;
  color: #16abf4;
}

.no-transition {
  transition: unset;
}
.no-transition * {
  transition: unset;
}