:root {
  --yk-bg: #07090d;
  --yk-bg-2: rgba(9, 12, 18, .92);
  --yk-card: rgba(20, 24, 33, .5);
  --yk-card-2: rgba(27, 32, 43, .62);
  --yk-line: rgba(255, 255, 255, .1);
  --yk-line-strong: rgba(255, 255, 255, .16);
  --yk-text: #f7f8fb;
  --yk-soft: #dde1e9;
  --yk-muted: #969daa;
  --yk-accent: #a46cff;
  --yk-accent-2: #bd98ff;
  --yk-hot: #ff6c62;
  --yk-yokopoints: #a46cff;
  --yk-top100: #43c8ff;
  --yk-news: #54dba0;
  --yk-artists: #f175b7;
  --yk-events: #ffbd5b;
  --yk-glass: rgba(16, 20, 28, .46);
  --yk-glass-strong: rgba(18, 22, 31, .66);
  --yk-glass-blur: blur(18px) saturate(1.15);
}

body {
  background-color: var(--yk-bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 8px 8px;
  background-attachment: fixed;
  background-blend-mode: normal;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 13, .16), rgba(7, 9, 13, .74));
  pointer-events: none;
  content: "";
}

::selection {
  background: rgba(164, 108, 255, .42);
  color: #fff;
}

.yk-top {
  border-bottom-color: var(--yk-line-strong);
  background: rgba(8, 10, 15, .76);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
  backdrop-filter: var(--yk-glass-blur);
}

.yk-topbar {
  min-height: 76px;
}

.yk-logo {
  letter-spacing: .01em;
}

.yk-primary > ul {
  gap: 3px;
}

.yk-primary > ul > li > a {
  position: relative;
  border-radius: 3px;
  background: transparent;
}

.yk-primary > ul > li > a::before {
  position: absolute;
  right: 11px;
  bottom: 2px;
  left: 11px;
  height: 2px;
  background: var(--nav-color, transparent);
  content: "";
  opacity: .52;
  transform: scaleX(.42);
  transition: opacity .18s ease, transform .18s ease;
}

.yk-primary > ul > li > a:hover {
  background: rgba(255, 255, 255, .045);
}

.yk-primary > ul > li > a:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.yk-primary > ul > li:nth-child(1) > a { --nav-color: var(--yk-hot); }
.yk-primary > ul > li:nth-child(2) > a { --nav-color: var(--yk-yokopoints); }
.yk-primary > ul > li:nth-child(3) > a { --nav-color: var(--yk-top100); }
.yk-primary > ul > li:nth-child(4) > a { --nav-color: var(--yk-news); }
.yk-primary a[href*="artista"] { --nav-color: var(--yk-artists); }
.yk-primary a[href*="noticia"] { --nav-color: var(--yk-news); }
.yk-primary a[href*="evento"] { --nav-color: var(--yk-events); }

.yk-primary .sub-menu,
.yk-search {
  border-color: var(--yk-line-strong);
  background: rgba(17, 21, 29, .78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: var(--yk-glass-blur);
}

.yk-primary .sub-menu a:hover {
  background: rgba(73, 217, 154, .1);
  color: var(--yk-news);
}

.yk-search {
  border-radius: 4px;
}

.yk-search:focus-within {
  border-color: rgba(164, 108, 255, .58);
  box-shadow: 0 0 0 3px rgba(164, 108, 255, .1);
}

.yk-search button {
  color: var(--yk-yokopoints);
}

.yk-eyebrow,
.yk-section-line > p,
.yk-section-title > p {
  color: var(--section-color, var(--yk-accent-2));
}

.yk-news-rail,
.yk-side-chart,
.yk-artist-loop,
.yk-about-strip,
.yk-feature-band,
.yk-chart-table,
.yk-artists-strip,
.yk-submit,
.yk-filter-panel,
.yk-rank-periods,
.yk-reading,
.yk-legal-page,
.yk-about-page,
.yk-artist-stat-bar,
.yk-song-chart-summary,
.yk-youtube-player,
.yk-song-vote,
.yk-song-sidebar .yk-song-credits,
.yk-featured-list,
.yk-artist-leader,
.yk-artist-directory-card {
  border-color: var(--yk-line-strong);
  background: var(--yk-glass);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 18px 48px rgba(0, 0, 0, .12);
  backdrop-filter: var(--yk-glass-blur);
}

.yk-home-hero {
  gap: 18px;
}

.yk-hero-news {
  --section-color: var(--yk-hot);
  padding: 0 8px;
}

.yk-lead-story span {
  border-color: var(--yk-hot);
  color: var(--yk-hot);
}

.yk-lead-story img {
  border: 1px solid var(--yk-line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}

.yk-news-rail {
  --section-color: var(--yk-news);
  padding: 0 14px 14px;
  border: 1px solid var(--yk-line-strong);
  border-top: 3px solid var(--yk-news);
  border-radius: 4px;
}

.yk-news-rail small,
.yk-news-rail .yk-more-link {
  color: var(--yk-news);
}

.yk-home-ranks {
  gap: 12px;
}

.yk-home-ranks .yk-side-chart {
  padding: 0 14px;
  border: 1px solid var(--yk-line-strong);
  border-top: 3px solid var(--yk-top100);
  border-radius: 4px;
}

.yk-home-ranks .yk-side-chart:first-child h2,
.yk-home-ranks .yk-side-chart:first-child span {
  color: var(--yk-top100);
}

.yk-home-ranks .yk-side-chart:last-child {
  border-top-color: var(--yk-events);
}

.yk-home-ranks .yk-side-chart:last-child h2,
.yk-home-ranks .yk-side-chart:last-child span {
  color: var(--yk-events);
}

.yk-artist-carousel,
.yk-artists-strip,
.yk-artists-directory {
  --section-color: var(--yk-artists);
}

.yk-artist-carousel .yk-section-line::after,
.yk-artists-strip .yk-section-title::after {
  background: color-mix(in srgb, var(--yk-artists) 52%, transparent);
}

.yk-artist-loop {
  border: 1px solid var(--yk-line-strong);
  border-top: 2px solid var(--yk-artists);
  border-radius: 4px;
}

.yk-artist-loop img {
  border: 2px solid rgba(241, 117, 183, .35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

.yk-about-strip {
  overflow: hidden;
  border: 1px solid var(--yk-line-strong);
  border-radius: 4px;
}

.yk-about-strip article,
.yk-kpi-card {
  padding: clamp(24px, 4vw, 38px);
}

.yk-kpi-card span {
  color: var(--yk-top100);
}

.yk-feature-band {
  --section-color: var(--yk-news);
  padding: 24px;
  border: 1px solid var(--yk-line-strong);
  border-top: 3px solid var(--yk-news);
  border-radius: 4px;
}

.yk-feature-band h2::after {
  background: color-mix(in srgb, var(--yk-news) 48%, transparent);
}

.yk-feature-band a:hover strong {
  color: var(--yk-news);
}

.yk-chart-section,
.yk-rank-page-filtered,
.yk-artist-releases {
  --section-color: var(--yk-top100);
}

.yk-chart-section .yk-section-title::after,
.yk-artist-releases {
  border-color: color-mix(in srgb, var(--yk-top100) 48%, transparent);
}

.yk-chart-table {
  border: 1px solid var(--yk-line-strong);
  border-top: 3px solid var(--yk-top100);
  border-radius: 4px;
}

.yk-chart-head {
  color: var(--yk-top100);
}

.yk-chart-row > b,
.yk-artist-chart-head {
  color: var(--yk-top100);
}

.yk-chart-row:hover {
  background: rgba(67, 200, 255, .055);
}

.yk-artists-strip {
  border: 1px solid var(--yk-line-strong);
  border-top: 3px solid var(--yk-artists);
  border-radius: 4px;
}

.yk-artists-strip > .yk-section-title {
  padding: 22px 22px 0;
}

.yk-artists-strip article span {
  color: var(--yk-artists);
}

.yk-submit {
  padding-right: clamp(24px, 5vw, 48px);
  padding-left: clamp(24px, 5vw, 48px);
  border: 1px solid var(--yk-line-strong);
  border-left: 3px solid var(--yk-events);
  border-radius: 4px;
  text-align: left;
}

.yk-submit h2 {
  max-width: 820px;
}

.yk-submit p {
  margin-right: 0;
  margin-left: 0;
}

.yk-rank-page:not(.yk-rank-page-filtered),
.yk-song-chart-summary,
.yk-featured-yokopoints {
  --section-color: var(--yk-yokopoints);
}

.yk-rank-page:not(.yk-rank-page-filtered) .yk-rank-hero,
.yk-song-chart-summary,
.yk-featured-list {
  border-color: color-mix(in srgb, var(--yk-yokopoints) 48%, var(--yk-line));
}

.yk-song-chart-summary,
.yk-featured-list {
  border-top: 3px solid var(--yk-yokopoints);
}

.yk-song-chart-summary .yk-eyebrow,
.yk-featured-yokopoints .yk-eyebrow,
.yk-featured-position {
  color: var(--yk-yokopoints);
}

.yk-rank-page-filtered .yk-rank-hero,
.yk-filter-panel,
.yk-rank-page-filtered .yk-chart-table {
  border-color: color-mix(in srgb, var(--yk-top100) 48%, var(--yk-line));
}

.yk-filter-panel {
  padding: 22px;
  border: 1px solid var(--yk-line-strong);
  border-top: 3px solid var(--section-color, var(--yk-top100));
  border-radius: 4px;
}

.yk-filter-panel select,
.yk-filter-panel button,
.yk-rank-periods a,
.yk-points-control,
.yk-yokopoints-submit,
.yk-button-primary,
.yk-button-secondary,
.yk-artist-follow,
.yk-artist-chart-action a,
.yk-artist-catalog-action a,
.yk-artist-directory-action {
  border-radius: 3px;
}

.yk-reading,
.yk-legal-page,
.yk-about-page {
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--yk-line-strong);
  border-top: 3px solid var(--yk-news);
  border-radius: 4px;
}

.yk-reading {
  max-width: 940px;
}

.yk-reading .yk-eyebrow,
.yk-reading a,
.yk-legal-page a {
  color: var(--yk-news);
}

.yk-artist-banner {
  border-color: rgba(241, 117, 183, .28);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
}

.yk-artist-stat-bar {
  border: 1px solid var(--yk-line-strong);
  border-top: 3px solid var(--yk-artists);
  border-radius: 4px;
}

.yk-artist-tags span {
  border-color: rgba(241, 117, 183, .25);
  background: rgba(241, 117, 183, .06);
  color: #e8c6da;
}

.yk-artist-yokore-summary > a,
.yk-artist-directory-action,
.yk-artist-leader > div > span {
  color: var(--yk-artists);
}

.yk-directory-section-title {
  border-color: var(--yk-artists);
}

.yk-artist-leader,
.yk-artist-directory-card {
  border-color: rgba(241, 117, 183, .16);
}

.yk-artist-leader:hover,
.yk-artist-directory-card:hover {
  border-color: rgba(241, 117, 183, .55);
  background: rgba(37, 26, 37, .54);
}

.yk-artist-leader p,
.yk-artist-directory-card p {
  color: var(--yk-artists);
}

.yk-song-intro {
  border-color: var(--yk-line-strong);
}

.yk-song-meta span {
  background: rgba(255, 255, 255, .035);
}

.yk-youtube-player {
  border-color: rgba(255, 108, 98, .3);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .22);
}

.yk-song-vote,
.yk-song-sidebar .yk-song-credits {
  padding: 20px;
  border: 1px solid var(--yk-line-strong);
  border-radius: 4px;
}

.yk-related-songs,
.yk-song-discovery-grid {
  border-color: var(--yk-line-strong);
}

.yk-related-card,
.yk-popular-article {
  background: rgba(16, 20, 28, .4);
}

.yk-footer {
  border-top-color: var(--yk-line-strong);
  background: rgba(8, 10, 15, .78);
  backdrop-filter: var(--yk-glass-blur);
}

.yk-footer-links div:nth-child(1) h2 { color: var(--yk-yokopoints); }
.yk-footer-links div:nth-child(2) h2 { color: var(--yk-news); }
.yk-footer-links div:nth-child(3) h2 { color: var(--yk-events); }

@supports not (color: color-mix(in srgb, white, black)) {
  .yk-chart-section .yk-section-title::after,
  .yk-artist-releases,
  .yk-feature-band h2::after {
    border-color: var(--yk-line-strong);
    background: var(--yk-line-strong);
  }
}

@media (max-width: 1020px) {
  .yk-home-hero {
    gap: 22px;
  }

  .yk-news-rail,
  .yk-home-ranks .yk-side-chart {
    border-top-width: 3px;
  }

  .yk-filter-panel {
    border-right: 1px solid var(--yk-line-strong);
  }
}

@media (max-width: 640px) {
  body {
    background-size: 7px 7px;
  }

  .yk-topbar {
    padding: 10px 0 14px;
  }

  .yk-primary > ul {
    gap: 0;
  }

  .yk-primary > ul > li > a {
    padding-right: 8px;
    padding-left: 8px;
  }

  .yk-news-rail,
  .yk-home-ranks .yk-side-chart,
  .yk-feature-band,
  .yk-about-strip,
  .yk-artists-strip,
  .yk-submit {
    border-radius: 3px;
  }

  .yk-about-strip article,
  .yk-kpi-card {
    padding: 24px 20px;
  }

  .yk-feature-band {
    padding: 18px;
  }

  .yk-artists-strip > .yk-section-title {
    padding: 18px 18px 0;
  }

  .yk-submit {
    padding: 28px 20px;
  }

  .yk-reading,
  .yk-legal-page,
  .yk-about-page {
    padding: 24px 18px;
  }

  .yk-song-vote,
  .yk-song-sidebar .yk-song-credits {
    padding: 18px;
  }
}