@import url("https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --red: #fe5353;
  --red2: #fe7575;
  --grey1: #D9D9D9;
  --grey2: #C6C6C6;
  --grey3: #adaaaadd;
  --grey4: #7F7C7D;
  --black: #000000;
  --black2: #353533;
  --white: #ffffff;
  --yellow: #FFE842;
  --yellow: #959377;
  --pink: #ff8cc2;
  --pink2: #ffa2f0;
  --green: #01AF77;
  --orange: #FF8147;
  --orange2: #ff8d59;
  --blue: #8687FB;
  --blue: #9e9ffb;
  --purple: #9e9ffb;
  --purple: #9293fb;
  --red_light: #febaba;
  --yellow_light: #fff5b3;
  --pink_light: #ffd9e6;
  --green_light: #99dfc8;
  --blue_light: #d8d8fd;
  --color_player: var(--grey1);
  --color_muted: var(--grey3);
  --red_muted: #e44a4a;
  --color_views_light: #70b895;
  --color_views_light: var(--color_player);
  --color_views_dark: #70b895;
  --color_views_dark: #64a484;
  --color_views_dark: var(--black);
  --play_color: #BBD191;
  --play_color: #c2ff8e;
  --play_color: #D3F68F;
  --play_color: #C7E099;
  --play_icon_color: #CDEB94;
  --play_icon_green: #01AF77;
  --search_color: #fea9a9;
  --track_playin: var(--black);
  --color_new: var(--purple);
  --color_new: #B2B1FB;
  --color_new: #c5c4fc;
  --color_pick: var(--red2);
  --color_pick: #FF8F8F;
  --color_pick: #ffabab;
  --bg: #C6C6C6;
  --board: #D9D9D9;
  --tab-bg: #D9D9D9;
  --text: var(--black);
  --typo-xs: 11px;
  --typo-s: 12px;
  --typo-m: 13px;
  --typo-L: 14px;
  --typo-action: 14px;
  --genre-color: var(--red);
  --radius: 12px;
  --radius2: 100px;
  --pad: 210px;
  --pad-top: 100px;
  --sidebar-w: 380px;
  --player-h: 24px;
  --logo-size: 58px;
  --logo-size: 54px;
  --board-w: 1100px;
  --ascii-color: var(--grey4);
  --ascii-opacity: 0.05;
}

* {
  box-sizing: border-box;
}

@keyframes brand-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes brand-rotate-fade {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
@keyframes track-time-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes track-play-in {
  from {
    opacity: 0;
    max-width: 0;
  }
  to {
    opacity: 1;
    max-width: 1em;
  }
}
@keyframes t-toggle-blink {
  0% {
    color: var(--black);
  }
  60% {
    color: var(--red_muted);
  }
  100% {
    color: var(--red);
  }
}
@keyframes key-flash {
  0% {
    color: var(--text);
  }
  50% {
    color: var(--red);
    color: var(--red_muted);
  }
  100% {
    color: var(--text);
  }
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Chivo Mono", monospace;
  font-weight: 400;
  font-size: var(--typo-m);
  font-variant-ligatures: none;
  cursor: default;
  min-height: 100vh;
  padding: var(--pad-top) calc(var(--sidebar-w) + var(--pad) + var(--pad) * 0.4) calc(var(--pad) / 4) var(--pad);
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

p::selection, span::selection, div::selection, a::selection, li::selection {
  background: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

@keyframes section-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tracklist,
.sidebar .control-box,
.focus-list {
  animation: section-fade-in 0.3s 0.2s both;
}

.board-title,
.board-meta,
.board-status,
.tracklist > li.track,
.control-label,
.control-box .opt,
#control-box-search input,
.focus-list .focus-item {
  opacity: 0;
  transition: opacity 0.5s 0.5s;
}

body.loaded .board-title,
body.loaded .board-meta,
body.loaded .board-status,
body.loaded .tracklist > li.track,
body.loaded .control-label,
body.loaded .control-box .opt,
body.loaded #control-box-search input,
body.loaded .focus-list .focus-item {
  opacity: 1;
}

.control-style .control-box,
.control-sort .control-box,
.control-mode .control-box,
.control-display .control-box {
  pointer-events: none;
  transition: pointer-events 0s 1s;
}

body.loaded .control-style .control-box,
body.loaded .control-sort .control-box,
body.loaded .control-mode .control-box,
body.loaded .control-display .control-box {
  pointer-events: auto;
}

.main,
.sidebar {
  transition: filter 0.8s ease, opacity 0.8s ease, gap 0.5s ease;
  will-change: filter;
}

body.idle .main {
  filter: blur(15px);
  pointer-events: none;
}

body.idle .sidebar {
  filter: blur(15px);
  pointer-events: none;
}

body.idle-instant .main,
body.idle-instant .sidebar {
  transition: none;
}

body.idle .focus-list .focus-img {
  opacity: 0.25;
}

body.idle.idle-hidden .main,
body.idle.idle-hidden .sidebar {
  filter: none;
  opacity: 0;
}

#ascii-bg {
  opacity: 0;
  transition: opacity 1.2s ease;
}

#ascii-bg.ascii-running {
  opacity: var(--ascii-opacity);
}

body.idle.idle-hidden {
  --ascii-opacity: 0.20;
}

body.idle.idle-outline .main,
body.idle.idle-outline .sidebar {
  filter: none;
}

.tracklist,
.control-box,
.focus-list {
  border: 0.5px solid transparent;
  transition: background-color 0.8s ease, border-color 0.8s ease;
}

body.idle.idle-outline .tracklist,
body.idle.idle-outline .control-box,
body.idle.idle-outline .focus-list {
  background: transparent;
  border-color: var(--grey4);
  border-color: rgba(127, 124, 125, 0.7647058824);
  border-color: var(--grey1);
}

body.idle-outline .tracklist > li.track,
body.idle-outline .control-box > *,
body.idle-outline .focus-list > *,
body.idle-outline .control-label,
body.idle-outline .board-header {
  transition: opacity 0.7s ease;
}

body.idle.idle-outline .tracklist > li.track,
body.idle.idle-outline .control-box > *,
body.idle.idle-outline .focus-list > *,
body.idle.idle-outline .control-label,
body.idle.idle-outline .board-header {
  opacity: 0;
}

body.idle-outline #search-input {
  transition: opacity 0.7s ease;
}

body.idle.idle-outline #search-input {
  opacity: 0;
}

.brand {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  transition: top 0.3s ease, transform 0.3s ease;
}
.brand.brand-rotating {
  animation: brand-rotate-fade 0.35s ease;
}
.brand .brand-logo {
  display: inline-flex;
  width: var(--logo-size);
  height: var(--logo-size);
  transform-origin: 50% 50%;
  animation: brand-spin 20s linear infinite;
  animation-play-state: paused;
  cursor: pointer;
}
.brand .brand-logo.spinning {
  animation-play-state: running;
}
.brand .brand-logo img, .brand .brand-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.brand .brand-logo #logo-circle {
  fill: var(--genre-color, #FE5252);
  transition: fill 0.5s;
}
.brand .brand-logo:hover #logo-circle {
  fill: var(--black2);
}
.brand .brand-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--typo-m);
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.brand .brand-text-left {
  right: calc(50% + var(--logo-size) / 2 + 16px);
}
.brand .brand-text-right {
  left: calc(50% + var(--logo-size) / 2 + 16px);
}
.brand:hover .brand-text {
  pointer-events: auto;
  cursor: pointer;
}

.main {
  display: block;
  width: 100%;
  max-width: var(--board-w);
  padding-bottom: 24px;
}

.board {
  position: relative;
}
.board .board-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 2px 14px;
  font-size: var(--typo-m);
}
.board .board-header .board-title {
  color: var(--grey4);
  font-size: var(--typo-xs);
}
.board .board-header .board-meta {
  color: var(--grey4);
  font-size: var(--typo-xs);
}
.board .board-header .board-header-right {
  padding: 0 14px 4px 0;
  padding: 0 14px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.board .board-header .board-header-right.visible {
  opacity: 1;
}
.board .board-header .board-header-right.interactive {
  pointer-events: auto;
}
.board .board-header .board-header-right.fading-in {
  animation: track-time-fade 0.5s 0.5s both;
}
.board .board-header .board-header-right span {
  transition: color 0.15s;
  font-size: var(--typo-xs);
  transition: color 0.15s;
  color: var(--text);
}
.board .board-header .board-header-right svg {
  margin-left: 3px;
}
.board .board-header .board-header-right svg path {
  transition: fill 0.15s;
  fill: var(--text);
}
.board .board-header .board-header-right .undo-icon {
  display: none;
}
.board .board-header .board-header-right.undo-mode .reset-icon {
  display: none;
}
.board .board-header .board-header-right.undo-mode .undo-icon {
  display: inline;
}
.board .board-header .board-header-right:hover span {
  color: var(--red);
}
.board .board-header .board-header-right:hover svg path {
  fill: var(--red);
}
.board .tracklist {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--board);
  border-radius: var(--radius);
}
.board .tracklist:empty {
  min-height: 2000px;
}
.board .tracklist.paused li.track .track-play {
  opacity: 0;
  max-width: 0;
  margin-right: 0;
}
.board .tracklist.cued li.track.active .track-title {
  cursor: pointer;
}
.board .tracklist li.track {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 4px 14px 4px 14px;
  font-size: var(--typo-m);
  line-height: 1.55;
  color: var(--grey4);
}
.board .tracklist li.track:first-child {
  padding-top: 12px;
}
.board .tracklist li.track:last-child {
  padding-bottom: 8px;
}
.board .tracklist li.track .track-order {
  flex-shrink: 0;
  align-self: center;
  width: 1ch;
  margin-right: 12px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--typo-m);
  color: var(--red);
}
.board .tracklist li.track .track-order::selection {
  background: var(--grey2);
}
.board .tracklist li.track .track-num {
  flex-shrink: 0;
  align-self: center;
  margin-right: 12px;
  font-size: var(--typo-m);
  color: var(--grey3);
  user-select: none;
  pointer-events: none;
}
.board .tracklist li.track .track-title-wrap {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
}
.board .tracklist li.track .track-title {
  flex-shrink: 1;
  min-width: 0;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  cursor: pointer;
  transition: color 0.15s;
}
.board .tracklist li.track .track-title:hover {
  color: var(--text);
  color: var(--track_playin);
}
.board .tracklist li.track .search-match {
  background: var(--search_color);
  background: var(--grey1);
  color: inherit;
  color: var(--text);
  color: var(--red);
}
.board .tracklist li.track .track-uploader {
  flex-shrink: 0;
  color: var(--grey3);
  font-size: var(--typo-xs);
  font-style: normal;
  font-weight: 400;
  cursor: default;
  margin-left: 10px;
}
.board .tracklist li.track .track-uploader:hover {
  color: var(--grey3);
}
.board .tracklist li.track .track-action {
  flex-shrink: 0;
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  font-size: var(--typo-action);
  line-height: 1;
  transition: color 0.15s;
  user-select: none;
  font-weight: 600;
}
.board .tracklist li.track .track-action.action-x {
  color: var(--red);
  color: var(--black);
  color: var(--grey4);
  font-weight: 400;
}
.board .tracklist li.track .track-action.action-x:hover {
  color: var(--black);
  color: var(--red);
}
.board .tracklist li.track .track-action.action-plus {
  color: var(--grey4);
}
.board .tracklist li.track .track-action.action-plus:hover {
  color: var(--red);
}
.board .tracklist li.track .track-meta {
  flex-shrink: 0;
  margin-left: 8px;
  font-size: var(--typo-xs);
  color: var(--grey3);
  user-select: none;
}
.board .tracklist li.track .track-meta .views-icon {
  width: 11px;
  height: 8px;
  margin-left: -1px;
}
.board .tracklist li.track .track-meta .plays-icon {
  width: 9px;
  height: 8px;
  margin-left: -1px;
}
.board .tracklist li.track .track-stats {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 10px;
  font-size: var(--typo-xs);
  color: var(--grey3);
  user-select: none;
  white-space: nowrap;
}
.board .tracklist li.track .track-stats .views-icon {
  width: 11px;
  height: 8px;
  margin-left: -1px;
}
.board .tracklist li.track .track-stats .views-icon path {
  fill: transparent;
  stroke: var(--grey3);
}
.board .tracklist li.track .track-stats .views-icon path.eye-pupil {
  fill: var(--grey3);
}
.board .tracklist li.track .track-stats .plays-icon {
  width: 9px;
  height: 8px;
  margin-left: -1px;
}
.board .tracklist li.track .track-link {
  flex-shrink: 0;
  align-self: center;
  margin-left: 10px;
  width: 9px;
  height: 9px;
  color: var(--red);
  color: var(--grey4);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}
.board .tracklist li.track .track-link:hover {
  color: var(--red);
}
.board .tracklist li.track .track-link svg {
  width: 100%;
  height: 100%;
  display: block;
}
.board .tracklist li.track .track-new {
  flex-shrink: 0;
  align-self: center;
  margin-left: 10px;
  font-size: var(--typo-s);
  font-size: var(--typo-xs);
  font-style: italic;
  color: var(--orange);
  color: var(--search_color);
  color: var(--color_new);
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}
.board .tracklist li.track .track-new svg {
  display: block;
  margin-top: 1px;
}
.board .tracklist li.track .track-pick {
  flex-shrink: 0;
  align-self: center;
  margin-left: 10px;
  font-size: var(--typo-xs);
  font-style: italic;
  color: var(--color_pick);
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}
.board .tracklist li.track .track-pick svg {
  display: block;
  margin-top: 1px;
}
.board .tracklist li.track .track-heart {
  flex-shrink: 0;
  align-self: center;
  margin-top: 1px;
  margin-left: 10px;
  width: 10px;
  height: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  user-select: none;
}
@media (max-width: 835px) {
  .board .tracklist li.track .track-heart {
    margin-top: 2px;
  }
}
@media (max-width: 400px) {
  .board .tracklist li.track .track-heart {
    margin-top: 2px;
  }
}
.board .tracklist li.track .track-heart svg {
  width: 100%;
  height: 100%;
  display: block;
}
.board .tracklist li.track .track-heart .heart-outline {
  fill: var(--red);
  fill: var(--grey4);
}
.board .tracklist li.track .track-heart .heart-inner {
  fill: transparent;
}
.board .tracklist li.track .track-heart.liked .heart-outline {
  fill: var(--red);
}
.board .tracklist li.track .track-heart.liked .heart-inner {
  fill: var(--pink2);
}
.board .tracklist li.track .track-heart:hover .heart-outline {
  fill: var(--red);
}
.board .tracklist li.track .track-play {
  flex-shrink: 0;
  align-self: center;
  margin-right: 9px;
  display: inline-flex;
  overflow: hidden;
  max-width: 1em;
  opacity: 1;
  transition: opacity 0.25s ease, max-width 0.25s ease, margin-right 0.25s ease;
}
.board .tracklist li.track .track-play.entering {
  animation: track-play-in 0.25s ease;
}
.board .tracklist li.track .track-play svg {
  width: 9px;
  height: 10px;
  display: block;
}
.board .tracklist li.track .track-play svg path {
  fill: var(--genre-color);
}
.board .tracklist li.track.active .track-title {
  cursor: default;
  color: var(--track_playin);
}
.board .tracklist li.track.active .track-title:hover {
  color: var(--track_playin);
}
.board .tracklist li.track.active .track-stats, .board .tracklist li.track:has(.track-title:hover) .track-stats {
  color: var(--track_playin);
}
.board .tracklist li.track.active .track-stats .views-icon path, .board .tracklist li.track:has(.track-title:hover) .track-stats .views-icon path {
  stroke: var(--black);
}
.board .tracklist li.track.active .track-stats .views-icon path.eye-pupil, .board .tracklist li.track:has(.track-title:hover) .track-stats .views-icon path.eye-pupil {
  fill: var(--black);
}
.board .tracklist li.track.active .track-meta {
  color: var(--grey4);
}
.board .tracklist li.track.disabled {
  color: var(--grey3);
}
.board .tracklist li.track.disabled .track-title {
  color: var(--grey3);
  cursor: default;
}
.board .tracklist li.track.disabled .track-title:hover {
  color: var(--grey3);
}
.board .tracklist li.track.disabled .track-uploader {
  color: var(--grey3);
}
.board .tracklist li.track.disabled .track-uploader:hover {
  color: var(--grey3);
}
.board .tracklist li.track.disabled .track-heart .heart-outline {
  fill: var(--grey3);
}
.board .tracklist li.track.disabled .track-heart .heart-inner {
  fill: var(--grey2);
}
.board .tracklist li.track.errored {
  color: var(--grey2);
}
.board .tracklist li.track.errored .track-title {
  color: var(--grey2);
  cursor: default;
}
.board .tracklist li.track.errored .track-title:hover {
  color: var(--grey2);
}
.board .tracklist li.track.errored .track-uploader {
  display: none;
}
.board .tracklist.mode-queue li.track.disabled .track-heart {
  pointer-events: none;
}
.board .board-status {
  color: var(--grey4);
  font-size: var(--typo-m);
  padding: 8px 0;
}

.sidebar {
  position: fixed;
  top: var(--pad-top);
  right: var(--pad);
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 15;
}
.sidebar .control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .control-search {
  margin-top: 32px;
  margin-bottom: 32px;
}
.sidebar .control-label {
  font-size: var(--typo-xs);
  color: var(--grey4);
  font-weight: 400;
  padding-left: 14px;
}
.sidebar .control-label-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 14px;
}
.sidebar .more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--grey4);
  color: var(--black);
  user-select: none;
  transition: color 0.15s;
}
.sidebar .more-toggle:hover {
  color: var(--text);
  color: var(--red);
}
.sidebar .more-toggle .more-icon {
  display: inline-flex;
  width: 6px;
  height: 9px;
  margin-left: 3px;
}
.sidebar .more-toggle .more-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sidebar .control-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--tab-bg);
  border-radius: var(--radius);
  padding: 0px 14px;
  min-height: 24px;
}
.sidebar .control-box#control-box-playlists {
  border-radius: var(--radius2);
  border-radius: var(--radius);
  height: 24px;
}
.sidebar .control-box#control-box-sort {
  border-radius: var(--radius2);
  border-radius: var(--radius);
  height: 24px;
  width: 380px;
}
.sidebar .control-box#control-box-sort.cb-flow .cb-extra:last-child {
  margin-left: 6px;
}
.sidebar .control-box#control-box-sort, .sidebar .control-box#control-box-playlists {
  flex-wrap: wrap;
  gap: 0 12px;
  overflow: hidden;
  transition: height 0.3s ease;
}
.sidebar .control-box#control-box-sort .opt, .sidebar .control-box#control-box-playlists .opt {
  height: 24px;
}
.sidebar .control-box#control-box-sort .cb-extra, .sidebar .control-box#control-box-playlists .cb-extra {
  display: none;
  opacity: 0;
}
.sidebar .control-box#control-box-sort.cb-flow, .sidebar .control-box#control-box-playlists.cb-flow {
  align-content: flex-start;
}
.sidebar .control-box#control-box-sort.cb-flow .cb-extra, .sidebar .control-box#control-box-playlists.cb-flow .cb-extra {
  display: flex;
  opacity: 1;
  margin-top: -2px;
}
.sidebar .control-box#control-box-sort.cb-flow .cb-extra:last-child, .sidebar .control-box#control-box-playlists.cb-flow .cb-extra:last-child {
  margin-right: auto;
}
.sidebar .control-box#control-box-sort.cb-open, .sidebar .control-box#control-box-playlists.cb-open {
  border-radius: var(--radius);
  height: 48px;
}
.sidebar .control-box#control-box-sort.cb-closing, .sidebar .control-box#control-box-playlists.cb-closing {
  transition: height 0.3s ease, border-radius 0.3s ease;
}
.sidebar .control-box#control-box-sort.cb-closing .cb-extra, .sidebar .control-box#control-box-playlists.cb-closing .cb-extra {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar .control-box#control-box-mode {
  border-radius: var(--radius2);
  border-radius: var(--radius);
  height: 24px;
  width: 230px;
}
.sidebar .control-box#control-box-display {
  border-radius: var(--radius2);
  border-radius: var(--radius);
  height: 24px;
  width: 120px;
}
.sidebar .control-box#control-box-search {
  border-radius: var(--radius2);
  border-radius: var(--radius);
  height: 24px;
  width: 380px;
  gap: 8px;
}
.sidebar .control-box#control-box-search input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  font: inherit;
  font-size: var(--typo-m);
  color: var(--red);
}
.sidebar .control-box#control-box-search input::placeholder {
  color: var(--grey3);
  font-size: var(--typo-s);
}
.sidebar .control-box#control-box-search input::selection {
  background: var(--grey2);
}
.sidebar .control-box#control-box-search .search-count {
  flex-shrink: 0;
  font-size: var(--typo-xs);
  color: var(--grey4);
}
.sidebar .control-box#control-box-search .search-count[hidden] {
  display: none;
}
.sidebar .control-box#control-box-search .search-count.fading-in {
  animation: track-time-fade 0.5s 0.5s both;
}
.sidebar .control-box span {
  margin: 0;
  padding: 0;
}
.sidebar .opt {
  display: inline-flex;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--typo-m);
  color: var(--grey4);
  cursor: pointer;
  font-weight: 400;
  transition: color 0.2s;
}
.sidebar .opt .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey2);
}
.sidebar .opt .sort-heart {
  display: inline-flex;
  align-items: center;
  width: 9.5px;
  height: 9.5px;
  margin-top: 0.5px;
  line-height: 1;
}
.sidebar .opt .sort-heart svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sidebar .opt .sort-heart .heart-outline,
.sidebar .opt .sort-heart .heart-inner {
  fill: var(--grey2);
  transition: fill 0.2s;
}
.sidebar .opt .sort-eye {
  display: inline-flex;
  align-items: center;
  width: 11px;
  height: 8px;
  line-height: 1;
}
.sidebar .opt .sort-eye svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sidebar .opt .sort-eye svg path {
  fill: transparent;
  transition: fill 0.2s, stroke 0.2s;
}
.sidebar .opt .sort-eye svg path:not(#eye-pupil) {
  fill: var(--grey2);
  stroke: transparent;
}
.sidebar .opt .plus_sign_sort {
  display: inline-block;
  margin-top: -1px;
  margin-left: -3px;
}
.sidebar .opt:hover {
  color: var(--text);
}
.sidebar .opt.toggle {
  cursor: pointer;
}
.sidebar .opt.selected {
  color: var(--text);
  cursor: default;
}
.sidebar .opt.selected .dot {
  background: var(--red);
}
.sidebar .opt.selected .sort-heart .heart-outline {
  fill: var(--red);
}
.sidebar .opt.selected .sort-heart .heart-inner {
  fill: var(--pink2);
}
.sidebar .opt.selected .sort-eye svg path#eye-pupil {
  fill: var(--black);
  stroke: var(--black);
}
.sidebar .opt.selected .sort-eye svg path:not(#eye-pupil) {
  stroke: var(--text);
  fill: var(--color_views_light);
}
.sidebar .opt.toggle.selected {
  cursor: pointer;
}
body.dot-grid-toggle .sidebar .opt.selected[data-display=img] {
  cursor: pointer;
}
.sidebar .opt.is-disabled {
  text-decoration: line-through;
  text-decoration-color: var(--grey3);
  cursor: default;
  pointer-events: none;
  color: var(--grey3);
}
.sidebar .control-style .opt.selected .dot {
  background: var(--this-color, var(--genre-color));
}
.sidebar .control-sort .opt.selected .dot,
.sidebar .control-mode .opt.selected .dot,
.sidebar .control-display .opt.selected .dot {
  background: var(--genre-color);
}
.sidebar .control-style .opt .dot.playing {
  background: none;
  width: 9px;
  height: 10px;
  border: 0;
  border-radius: 0;
}
.sidebar .control-style .opt .dot.playing svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sidebar .control-style .opt .dot.playing svg path {
  fill: var(--this-color);
}
.sidebar .control-sort .control-box,
.sidebar .control-mode .control-box {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  border-radius: var(--radius);
}

.track-img .d0, .track-img .d1, .track-img .d2, .track-img .d3, .track-img .d4, .track-img .d5, .track-img .d6, .focus-img .d0, .focus-img .d1, .focus-img .d2, .focus-img .d3, .focus-img .d4, .focus-img .d5, .focus-img .d6 {
  transition: fill var(--dot-hover-transition, 0s) ease;
}
.track-img .d0, .focus-img .d0 {
  fill: var(--black2);
}
.track-img .d1, .focus-img .d1 {
  fill: var(--red);
}
.track-img .d2, .focus-img .d2 {
  fill: var(--grey2);
}
.track-img .d3, .focus-img .d3 {
  fill: var(--yellow);
}
.track-img .d4, .focus-img .d4 {
  fill: var(--pink);
}
.track-img .d5, .focus-img .d5 {
  fill: var(--green);
}
.track-img .d6, .focus-img .d6 {
  fill: var(--blue);
}
.track-img .dot-hover-layer, .focus-img .dot-hover-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dot-hover-transition, 0s) ease;
}
.track-img .dot-hover-layer svg, .focus-img .dot-hover-layer svg {
  display: block;
  width: 100%;
  height: 100%;
}
.track-img .dot-hover-layer.shown, .focus-img .dot-hover-layer.shown {
  opacity: 1;
}

.tracklist.display-img li.track.disabled:not(:has(.track-action.action-plus:hover)) .track-img .d0, .tracklist.display-img li.track.disabled:not(:has(.track-action.action-plus:hover)) .track-img .d1, .tracklist.display-img li.track.disabled:not(:has(.track-action.action-plus:hover)) .track-img .d2, .tracklist.display-img li.track.disabled:not(:has(.track-action.action-plus:hover)) .track-img .d3, .tracklist.display-img li.track.disabled:not(:has(.track-action.action-plus:hover)) .track-img .d4, .tracklist.display-img li.track.disabled:not(:has(.track-action.action-plus:hover)) .track-img .d5, .tracklist.display-img li.track.disabled:not(:has(.track-action.action-plus:hover)) .track-img .d6 {
  fill: var(--grey2);
}

.tracklist.display-img li.track.errored .track-img {
  filter: grayscale(1) opacity(0.5);
}

.tracklist.display-img {
  display: block;
}
.tracklist.display-img li.track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  padding: 9px 14px 9px 14px;
}
.tracklist.display-img li.track:first-child {
  padding-top: 16px;
}
.tracklist.display-img li.track:last-child {
  padding-bottom: 16px;
}
.tracklist.display-img li.track .track-play {
  margin-right: 0;
}
.tracklist.display-img li.track .track-img {
  width: 24px;
  height: 24px;
  width: 20px;
  height: 20px;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
  transition: filter 0.15s ease;
}
.tracklist.display-img li.track .track-img svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tracklist.display-img li.track .track-img.track-img-empty {
  background: var(--grey3);
  background: var(--grey2);
}
.tracklist.display-img li.track .track-img.track-img-pending {
  background: var(--grey2);
}
.tracklist.display-img li.track .track-img.track-img-greybg {
  background: var(--grey2);
}
.tracklist.display-img li.track .track-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.tracklist.display-img li.track .track-card-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: 100%;
  min-width: 0;
  font-size: var(--typo-m);
  line-height: 1.55;
  margin-top: -4px;
}
.tracklist.display-img li.track .track-card-l1, .tracklist.display-img li.track .track-card-l2, .tracklist.display-img li.track .track-card-l3 {
  display: contents;
}
.tracklist.display-img li.track .track-card-title {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--grey4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.15s;
}
.tracklist.display-img li.track.hovering .track-card-title, .tracklist.display-img li.track.hovering .track-stats {
  color: var(--track_playin);
}
.tracklist.display-img li.track.active .track-card-title {
  color: var(--track_playin);
}
.tracklist.display-img li.track.hovering .track-stats .views-icon path {
  stroke: var(--black);
}
.tracklist.display-img li.track.hovering .track-stats .views-icon path.eye-pupil {
  fill: var(--black);
}
.tracklist.display-img li.track.active .track-img, .tracklist.display-img li.track.active .track-card-title {
  cursor: default;
}
.tracklist.display-img li.track.disabled .track-img, .tracklist.display-img li.track.disabled .track-card-title, .tracklist.display-img li.track.errored .track-img, .tracklist.display-img li.track.errored .track-card-title {
  cursor: default;
}
.tracklist.display-img li.track.disabled .track-card-title {
  color: var(--grey3);
}

.tracklist.display-img:not(.paused) li.track.active .track-play {
  margin-right: 10px;
}

.board .tracklist li.track.disabled:has(.track-action.action-plus:hover) .track-title, .board .tracklist li.track.disabled:has(.track-action.action-plus:hover) .track-card-title {
  color: var(--grey4);
}

.board .tracklist li.track:has(.track-action.action-x:hover) .track-title, .board .tracklist li.track:has(.track-action.action-x:hover) .track-card-title {
  color: var(--grey3);
}

.tracklist.display-img li.track:has(.track-action.action-x:hover) .track-img .d0, .tracklist.display-img li.track:has(.track-action.action-x:hover) .track-img .d1, .tracklist.display-img li.track:has(.track-action.action-x:hover) .track-img .d2, .tracklist.display-img li.track:has(.track-action.action-x:hover) .track-img .d3, .tracklist.display-img li.track:has(.track-action.action-x:hover) .track-img .d4, .tracklist.display-img li.track:has(.track-action.action-x:hover) .track-img .d5, .tracklist.display-img li.track:has(.track-action.action-x:hover) .track-img .d6 {
  fill: var(--grey2);
}

.focus-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--tab-bg);
  border-radius: var(--radius);
  padding: 12px;
}
.focus-list:empty {
  border-radius: var(--radius2);
  border-radius: var(--radius);
}
.focus-list .focus-new {
  margin-left: 10px;
  font-size: var(--typo-xs);
  font-style: italic;
  color: var(--color_new);
  line-height: 1;
}
.focus-list .focus-new svg {
  display: inline-block;
  vertical-align: middle;
}
.focus-list .focus-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  width: fit-content;
  max-width: 100%;
}
.focus-list .focus-item .focus-img {
  width: 36px;
  height: 36px;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--grey2);
  background: var(--grey3);
  border: none;
  position: relative;
  overflow: hidden;
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.focus-list .focus-item .focus-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--focus-img-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10px) grayscale(1);
  transform: scale(1);
  transition: filter 0.2s, transform 0.2s;
}
.focus-list .focus-item .focus-img svg {
  display: block;
  width: 100%;
  height: 100%;
}
.focus-list .focus-item .focus-img.focus-img-colors::before {
  filter: none;
  transform: scale(1);
}
.focus-list .focus-item .focus-img.focus-img-nobg {
  background: transparent;
}
.focus-list .focus-item .focus-img.focus-img-greybg {
  background: var(--grey2);
  background: var(--grey3);
}
.focus-list .focus-item .focus-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 0 1 auto;
}
.focus-list .focus-item .focus-index {
  font-size: var(--typo-xs);
  color: var(--grey3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.focus-list .focus-item .focus-artist {
  font-size: var(--typo-m);
  color: var(--grey4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.15s;
}
.focus-list .focus-item .focus-title {
  font-size: var(--typo-m);
  color: var(--grey4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.15s;
}
.focus-list .focus-item .focus-duration {
  font-size: var(--typo-xs);
  color: var(--grey3);
  line-height: 1.2;
}
.focus-list .focus-item:hover .focus-title, .focus-list .focus-item:hover .focus-artist {
  color: var(--track_playin);
}
.focus-list .focus-item:hover .focus-img::before {
  filter: blur(0) grayscale(0);
  transform: scale(1);
}
.focus-list .focus-item.active {
  cursor: default;
}
.focus-list .focus-item.active .focus-title {
  color: var(--track_playin);
}
.focus-list .focus-item.active .focus-artist {
  color: var(--track_playin);
}
.focus-list .focus-item.active .focus-img::before {
  filter: blur(0);
  transform: scale(1);
}

.player-bar {
  --play-color: var(--genre-color);
  --play-color-light: var(--color_player);
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 850px;
  z-index: 18;
  font-size: var(--typo-m);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.player-bar[hidden] {
  display: none;
}
.player-bar .p-head {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 22px;
}
.player-bar .p-transport {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  font-size: var(--typo-xs);
  font-size: var(--typo-s);
  color: var(--grey4);
}
.player-bar .p-transport .t-prev, .player-bar .p-transport .t-next, .player-bar .p-transport .t-toggle, .player-bar .p-transport .t-mute {
  cursor: pointer;
  color: var(--text);
  transition: color 0.15s;
  user-select: none;
}
.player-bar .p-transport .t-prev:hover, .player-bar .p-transport .t-next:hover, .player-bar .p-transport .t-mute:hover {
  color: var(--red);
  color: var(--red_muted);
}
.player-bar .p-transport .t-mute.muted {
  color: var(--red);
  color: var(--red_muted);
}
.player-bar .p-transport .t-mute.muted:hover {
  color: var(--text);
}
.player-bar .p-transport .t-prev.key-flash, .player-bar .p-transport .t-next.key-flash, .player-bar .p-transport .t-toggle.key-flash {
  animation: key-flash 0.5s ease;
}
.player-bar .p-transport .t-toggle {
  color: var(--text);
  transition: color 0.15s;
}
.player-bar .p-transport .t-toggle:hover {
  color: var(--red);
  color: var(--red_muted);
}
.player-bar .p-transport .t-toggle.blinking {
  animation: t-toggle-blink 1.2s ease-in-out infinite alternate;
}
.player-bar .p-transport .t-toggle.blinking:hover {
  animation: none;
  color: var(--red);
  color: var(--red_muted);
}
.player-bar .p-pill {
  position: relative;
  height: var(--player-h);
  background: var(--grey2);
  border: 0.5px solid var(--grey4);
  border-radius: var(--radius2);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px 0 16px;
  overflow: hidden;
  cursor: pointer;
  cursor: default;
}
.player-bar .p-left {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 1 auto;
}
.player-bar .p-right {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.player-bar .p-title {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.player-bar .p-title.fading-in {
  animation: track-time-fade 0.5s 0.5s both;
}
.player-bar .p-time {
  flex-shrink: 0;
  font-size: var(--typo-xs);
  color: var(--grey4);
}
.player-bar .p-time .tt-current {
  color: var(--black);
  opacity: 0.5;
}
.player-bar .p-time .tt-sep, .player-bar .p-time .tt-total {
  color: var(--black);
}
.player-bar .p-time.fading-in {
  animation: track-time-fade 0.5s 0.5s both;
}
.player-bar .p-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--dot-pct, 0%);
  background: linear-gradient(to right, var(--play-color-light), var(--play-color));
  pointer-events: none;
  z-index: 0;
}
.player-bar .p-dot {
  position: absolute;
  top: 50%;
  left: var(--dot-pct, 0%);
  transform: translate(calc(-1 * var(--dot-pct, 0%)), -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--play-color);
  pointer-events: none;
  z-index: 1;
  display: none;
}
.player-bar.muted .p-fill {
  background: linear-gradient(to right, var(--color_player), var(--color_muted));
}
.player-bar .p-seek {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  margin-left: -1.5px;
  background: var(--play_icon_color);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  z-index: 1;
}
.player-bar .p-seek.visible {
  opacity: 1;
}

#error-size {
  display: none;
}

#player {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 1750px) {
  :root {
    --pad: 150px;
  }
}
@media (max-width: 1600px) {
  :root {
    --pad: 100px;
  }
}
@media (max-width: 1200px) {
  :root {
    --pad: 70px;
  }
}
@media (max-width: 1100px) {
  :root {
    --pad: 30px;
  }
  body {
    padding: var(--pad-top) calc(var(--pad) / 2 + var(--sidebar-w) + (var(--pad))) calc(var(--pad) / 2) var(--pad);
  }
  .player-bar {
    width: 800px;
  }
}
@media (max-width: 1000px) {
  .track-meta {
    display: none;
  }
  .player-bar {
    width: 720px;
  }
}
@media (max-width: 900px) {
  :root {
    --typo-xs: 10px;
    --typo-m: 11px;
    --typo-L: 13px;
  }
  .track-uploader {
    display: none;
  }
  .track-uploader {
    display: none;
  }
  .track-link {
    display: none;
  }
  .player-bar {
    width: 650px;
  }
  .control-style {
    max-width: 380px;
  }
  .sidebar .control-search, .sidebar .control-focus {
    display: none;
  }
}
@media (max-width: 835px), (orientation: landscape) and (max-height: 500px) {
  :root {
    --logo-size: 46px;
    --player-h: 32px;
    --typo-action: 13px;
    --pad-top: 90px;
    --pad-side: calc(100vw - 30px) ;
  }
  body {
    padding: var(--pad-top) var(--pad);
    padding-bottom: calc(var(--player-h) + var(--pad) * 2);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100vh;
  }
  .sidebar {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    order: 2;
    gap: 10px;
    z-index: auto;
  }
  .sidebar .control-box {
    width: 100%;
    max-width: 100%;
  }
  .sidebar .control-search,
  .sidebar .control-display {
    display: none;
  }
  .main {
    order: 3;
    width: 100%;
    padding-bottom: 0;
  }
  .board {
    margin-top: 22px;
  }
  .board .tracklist:empty {
    min-height: 100vh;
  }
  .board-header-right .board-reset {
    display: none;
  }
  .board-header-right svg {
    margin-left: 0;
  }
  .board .tracklist li.track .track-num,
  .board .tracklist li.track .track-order {
    display: none;
  }
  .sidebar .control-box#control-box-mode {
    width: 200px;
  }
  body.info-open .brand .brand-logo #logo-circle {
    fill: var(--genre-color);
  }
  .player-bar {
    width: var(--pad-side);
    width: 100%;
    height: 140px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: linear-gradient(to top, var(--grey2) 60%, transparent);
    padding-bottom: 30px;
  }
  .player-bar .p-head {
    width: calc(100vw - var(--pad) * 2);
  }
  .player-bar .p-pill {
    height: 24px;
    width: calc(100vw - var(--pad) * 2);
  }
  .player-bar .p-transport {
    font-size: var(--typo-m);
    margin-bottom: 5px;
  }
  .player-bar .p-transport .t-prev, .player-bar .p-transport .t-next, .player-bar .p-transport .t-toggle {
    color: var(--text);
  }
  .player-bar .p-transport .t-prev:hover, .player-bar .p-transport .t-next:hover {
    color: var(--text);
  }
  .player-bar .p-transport .t-toggle {
    color: var(--text);
  }
  .player-bar .p-transport .t-toggle:hover {
    color: var(--text);
  }
}
@media (max-width: 400px) {
  :root {
    --typo-m: 10px;
  }
}
@media (max-width: 835px) and (orientation: portrait) {
  .tracklist.display-img li.track .track-card-head {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    min-height: 48px;
    margin-top: 0;
  }
  .tracklist.display-img li.track .track-card-l1,
  .tracklist.display-img li.track .track-card-l2,
  .tracklist.display-img li.track .track-card-l3 {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
    min-width: 0;
  }
  .tracklist.display-img li.track .track-card-l1 {
    gap: 6px;
  }
  .tracklist.display-img li.track .track-card-l2 {
    gap: 8px;
  }
  .tracklist.display-img li.track .track-card-l2 > * {
    margin-left: 0;
  }
  .tracklist.display-img li.track .track-meta {
    display: inline-block;
    margin-left: -2px;
  }
  .tracklist.display-img li.track .track-link {
    margin-left: 2px;
  }
  .tracklist.display-img li.track .track-card-l3 .track-stats {
    margin-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 350px), (max-height: 350px), (orientation: landscape) and (max-height: 500px) {
  .main,
  .sidebar,
  .player-bar,
  .info-panel {
    display: none !important;
  }
  .brand {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.sidebar-filters {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: opacity 0.5s ease, height 0.5s ease;
}

body.focus-expanded .sidebar {
  gap: 0;
}

body.focus-expanded .sidebar-filters {
  pointer-events: none;
}

body.play-marker-fixed .board .tracklist li.track .track-play svg path,
body.play-marker-fixed .control-style .opt .dot.playing svg path {
  fill: var(--play_icon_green);
}

body.info-open .main,
body.info-open .sidebar {
  filter: blur(15px);
  pointer-events: none;
}

body.info-open .control-style .control-box,
body.info-open .control-sort .control-box,
body.info-open .control-mode .control-box,
body.info-open .control-display .control-box {
  pointer-events: none;
}

body.info-open .focus-list .focus-img .d0, body.info-open .focus-list .focus-img .d1, body.info-open .focus-list .focus-img .d2, body.info-open .focus-list .focus-img .d3, body.info-open .focus-list .focus-img .d4, body.info-open .focus-list .focus-img .d5, body.info-open .focus-list .focus-img .d6,
body.info-open .track-img .d0,
body.info-open .track-img .d1,
body.info-open .track-img .d2,
body.info-open .track-img .d3,
body.info-open .track-img .d4,
body.info-open .track-img .d5,
body.info-open .track-img .d6 {
  fill: var(--grey2);
}

body.info-open .brand-logo #logo-circle {
  fill: var(--black2);
}

body.info-open {
  overflow: hidden;
}

.info-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 850px;
  max-width: calc(100vw - 2 * var(--pad));
  box-sizing: border-box;
  z-index: 17;
  background: var(--board);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: var(--typo-m);
  line-height: 1.6;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.info-panel .info-header {
  padding: 14px 20px;
}
.info-panel .info-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
.info-panel .info-tab {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--typo-m);
  color: var(--grey3);
  cursor: pointer;
  transition: color 0.15s;
}
.info-panel .info-tab:hover {
  color: var(--text);
}
.info-panel .info-tab.active {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: default;
}
.info-panel .info-main {
  display: grid;
  padding: 4px 21px;
}
.info-panel .info-section {
  grid-area: 1/1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.info-panel .info-section p {
  margin: 0;
}
.info-panel .info-section.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s;
}
.info-panel .info-footer {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.info-panel .info-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-panel .info-updated {
  margin: 0;
  font-size: var(--typo-xs);
  color: var(--purple);
  font-style: italic;
}
.info-panel .info-updated[hidden] {
  display: none;
}
.info-panel .info-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  cursor: pointer;
  transition: color 0.15s;
}
.info-panel .info-link:hover {
  color: var(--red);
}
.info-panel .info-link .info-link-icon {
  display: inline-flex;
  width: 9px;
  height: 9px;
}
.info-panel .info-link .info-link-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.info-open .info-panel {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 700px) {
  .info-panel {
    display: none;
  }
}

/*# sourceMappingURL=style.css.map */