:root {
  --red: #bf032c;
  --black: #121212;
  --white: #ffffff;
  --inactive: #919191;
  --inactive-hover: #696969;
  --active: var(--red);
  --stage-bg: var(--white);
  --logo-bg: var(--red);
  --red-stripe: var(--red);
  --own-music-link: var(--red);
  --site-scale: 0.5;
  --scaled-site-width: 960px;
  --scaled-stage-height: 3350px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background: var(--stage-bg);
  color: var(--active);
  overflow-x: hidden;
  transition: background-color 650ms ease;
}

button {
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
}

.page-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--red);
  pointer-events: auto;
  animation: preloader-exit 1000ms cubic-bezier(0.76, 0, 0.24, 1) 200ms forwards;
}

.page-preloader.is-hidden {
  display: none;
}

@keyframes preloader-exit {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, 110vh, 0);
    pointer-events: none;
  }
}

.stage-shell {
  position: relative;
  width: var(--scaled-site-width);
  height: var(--scaled-stage-height);
  margin: 0 auto;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 1920px;
  min-height: 1080px;
  overflow: hidden;
  background: var(--stage-bg);
  transform: scale(var(--site-scale));
  transform-origin: top left;
  transition: background-color 650ms ease;
}

.theme-projects .stage {
  min-height: 6700px;
}

.theme-all-music .stage {
  min-height: 3060px;
}

.theme-contact .stage {
  min-height: 2030px;
}

.theme-projects {
  --stage-bg: var(--white);
  --logo-bg: var(--red);
  --red-stripe: var(--red);
  --active: var(--red);
  --inactive: #919191;
}

.theme-all-music {
  --stage-bg: var(--red);
  --logo-bg: var(--red);
  --red-stripe: var(--red);
  --active: var(--white);
  --inactive: #c6c6c6;
  --inactive-hover: #949494;
}

.theme-all-music[data-music-tab="own-music"] {
  --stage-bg: var(--black);
  --logo-bg: var(--black);
  --red-stripe: var(--black);
  --inactive: #919191;
  --inactive-hover: #696969;
}

.theme-all-music[data-music-tab="soundtracks"] .music-content > .site-footer {
  display: none;
}

.theme-contact {
  --stage-bg: var(--black);
  --logo-bg: var(--black);
  --red-stripe: var(--black);
  --active: var(--white);
  --inactive: #919191;
}

.logo-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 480px;
  height: 480px;
  display: grid;
  place-items: center;
  background: var(--logo-bg);
  transition: background-color 650ms ease;
}

.logo-text {
  display: grid;
  justify-items: center;
  color: var(--white);
  font-family: "Jacquarda Bastarda 9", system-ui, sans-serif;
  font-size: 130px;
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: 0;
  text-align: center;
  user-select: none;
}

.stripe-field {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 1440px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.stripe {
  width: 80px;
  height: 480px;
  flex: 0 0 80px;
  transition:
    height 780ms cubic-bezier(0.65, 0, 0.2, 1),
    background-color 650ms ease;
}

.stripe--white {
  background: var(--white);
}

.stripe--red {
  background: var(--red-stripe);
}

.title-nav {
  position: absolute;
  top: 560px;
  left: 72px;
  z-index: 5;
  width: 900px;
  height: 360px;
}

.title-link {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 82px;
  color: var(--inactive);
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 100px;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  will-change: color, font-size, height, transform;
  transition:
    color 220ms ease,
    font-size 780ms cubic-bezier(0.65, 0, 0.2, 1),
    height 780ms cubic-bezier(0.65, 0, 0.2, 1),
    transform 780ms cubic-bezier(0.65, 0, 0.2, 1);
}

.title-link[data-section="projects"] {
  transform: translate3d(0, 0, 0);
}

.title-link[data-section="all-music"] {
  transform: translate3d(0, 188px, 0);
}

.title-link[data-section="contact"] {
  transform: translate3d(0, 254px, 0);
}

body[data-active-section="all-music"] .title-link[data-section="all-music"] {
  transform: translate3d(0, 106px, 0);
}

body[data-active-section="contact"] .title-link[data-section="all-music"] {
  transform: translate3d(0, 86px, 0);
}

body[data-active-section="contact"] .title-link[data-section="contact"] {
  transform: translate3d(0, 196px, 0);
}

.title-link:hover:not(.is-active),
.title-link:focus-visible:not(.is-active) {
  color: var(--inactive-hover);
}

.title-link.is-active {
  height: 164px;
  color: var(--active);
  font-size: 200px;
}

html.is-webkit .title-link {
  height: 82px;
  font-size: 100px;
  will-change: color;
  transition: color 220ms ease;
}

html.is-webkit .title-link[data-section="projects"] {
  transform: translate3d(0, -10px, 0);
}

html.is-webkit .title-link[data-section="all-music"],
html.is-webkit body[data-active-section="all-music"] .title-link[data-section="all-music"],
html.is-webkit body[data-active-section="contact"] .title-link[data-section="all-music"] {
  transform: translate3d(0, 66px, 0);
}

html.is-webkit .title-link[data-section="contact"],
html.is-webkit body[data-active-section="contact"] .title-link[data-section="contact"] {
  transform: translate3d(0, 132px, 0);
}

html.is-webkit .title-link.is-active {
  height: 82px;
  font-size: 100px;
}

.title-link:focus-visible {
  outline: 4px solid currentColor;
  outline-offset: 8px;
}

.section-content[hidden] {
  display: none;
}

.section-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}

.section-content.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.site-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 30;
  width: 1920px;
  height: 200px;
  padding: 47px 0 0 75px;
  color: #949494;
  background: #121212;
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: 0;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 220ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--white);
}

.projects-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: #919191;
  font-family: "Jersey 25", system-ui, sans-serif;
}

.project-image {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
  user-select: none;
}

.project-image--kletka {
  top: 1120px;
  left: 0;
  width: 976px;
}

.project-image--fictional {
  top: 2220px;
  left: -224px;
  width: 1200px;
}

.project-image--downsouth {
  top: 3270px;
  left: -223px;
  width: 1243px;
  height: 1152px;
}

.project-image--school {
  top: 4550px;
  left: -360px;
  width: 1920px;
}

.project-copy {
  position: absolute;
  left: 1055px;
  z-index: 2;
  width: 780px;
}

.project-copy--kletka {
  top: 980px;
}

.project-copy--fictional {
  top: 2190px;
}

.project-copy--downsouth {
  top: 3320px;
}

.project-copy--school {
  top: 4550px;
  width: 980px;
}

.project-copy--school .project-heading {
  white-space: nowrap;
}

.project-heading,
.project-subtitle,
.project-text,
.project-links {
  margin: 0;
  letter-spacing: 0;
  font-weight: 400;
}

.project-heading {
  color: var(--red);
  font-size: 140px;
  line-height: 0.82;
}

.project-heading--fictional {
  display: grid;
  line-height: 100px;
}

.project-subtitle {
  color: #919191;
  font-size: 140px;
  line-height: 0.82;
}

.project-copy--school .project-subtitle {
  margin-top: -10px;
}

.project-text {
  width: 720px;
  margin-top: 26px;
  color: #919191;
  font-size: 40px;
  line-height: 42px;
}

.project-text p {
  margin: 0 0 44px;
}

.project-text p:last-child {
  margin-bottom: 0;
}

.project-links {
  display: grid;
  justify-items: start;
  margin-top: 42px;
}

.project-links a {
  color: var(--red);
  font-size: 100px;
  line-height: 76px;
  text-decoration: none;
  transition: color 220ms ease;
}

.project-links--single {
  margin-top: 38px;
}

.project-link--listen:hover,
.project-link--listen:focus-visible {
  color: #8b001e;
}

.project-link--steam:hover,
.project-link--steam:focus-visible {
  color: #31273a;
}

.project-link--youtube:hover,
.project-link--youtube:focus-visible {
  color: #f30035;
}

.music-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--white);
  font-family: "Jersey 25", system-ui, sans-serif;
}

.music-subnav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.music-tab {
  position: absolute;
  right: 80px;
  color: var(--inactive);
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 100px;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transform: translate3d(0, -82px, 0);
  transform-origin: right bottom;
  will-change: color, font-size, transform;
  transition:
    color 220ms ease,
    font-size 780ms cubic-bezier(0.65, 0, 0.2, 1),
    transform 780ms cubic-bezier(0.65, 0, 0.2, 1);
}

.music-tab[data-music-tab="soundtracks"] {
  top: 830px;
  transform: translate3d(0, -106px, 0);
}

.music-tab[data-music-tab="own-music"] {
  top: 896px;
}

.music-tab.is-active {
  color: var(--white);
  font-size: 130px;
  transform: translate3d(0, -107px, 0);
}

.music-tab:hover:not(.is-active),
.music-tab:focus-visible:not(.is-active) {
  color: var(--inactive-hover);
}

html.is-webkit .music-tab {
  font-size: 100px;
  transform: none;
  transform-origin: right top;
  will-change: color;
  transition: color 220ms ease;
}

html.is-webkit .music-tab[data-music-tab="soundtracks"],
html.is-webkit .music-tab[data-music-tab="soundtracks"].is-active {
  top: 626px;
  transform: none;
}

html.is-webkit .music-tab[data-music-tab="own-music"],
html.is-webkit .music-tab[data-music-tab="own-music"].is-active {
  top: 692px;
  transform: none;
}

html.is-webkit .music-tab.is-active {
  font-size: 100px;
}

.music-panel[hidden] {
  display: none;
}

.music-panel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}

.music-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.soundtrack-list {
  position: absolute;
  top: 996px;
  left: 72px;
  display: grid;
  gap: 130px;
}

.own-music-list {
  position: absolute;
  top: 996px;
  left: 72px;
  display: grid;
  gap: 90px;
  width: 1768px;
}

.own-music-item {
  position: relative;
}

.own-music-copy {
  display: grid;
  justify-items: start;
}

.own-music-title,
.own-music-description,
.own-music-link {
  margin: 0;
  font-family: "Jersey 25", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.own-music-title {
  color: var(--white);
  font-size: 140px;
  line-height: 0.82;
}

.own-music-description {
  display: grid;
  margin-top: 18px;
  color: var(--white);
  font-size: 40px;
  line-height: 42px;
}

.own-music-description p {
  margin: 0;
}

.own-music-collab {
  color: #919191;
  text-decoration: none;
  transition: color 220ms ease;
}

.own-music-collab:hover,
.own-music-collab:focus-visible {
  color: #c6c6c6;
}

.own-music-link {
  margin-top: 18px;
  color: var(--own-music-link);
  font-size: 100px;
  line-height: 0.82;
  text-decoration: none;
  transition: color 220ms ease;
}

.own-music-link:hover,
.own-music-link:focus-visible {
  color: #8b001e;
}

.own-music-cover {
  position: absolute;
  top: 50%;
  right: 0;
  width: 350px;
  height: 350px;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  transform: translateY(-50%);
  user-select: none;
}

.contact-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--white);
  font-family: "Jersey 25", system-ui, sans-serif;
}

.contact-list {
  position: absolute;
  top: 1020px;
  left: 72px;
  display: grid;
  justify-items: start;
}

.contact-primary,
.contact-social-links {
  display: grid;
  justify-items: start;
}

.contact-line,
.contact-social-heading,
.contact-link {
  margin: 0;
  font-family: "Jersey 25", system-ui, sans-serif;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0;
}

.contact-line,
.contact-link {
  color: var(--white);
  font-size: 100px;
}

.contact-label--discord {
  color: #7751be;
}

.contact-label--telegram {
  color: #31a0fb;
}

.contact-label--email {
  color: #ffa352;
}

.contact-social {
  margin-top: 100px;
}

.contact-social-heading {
  margin-bottom: 10px;
  color: #919191;
  font-size: 65px;
}

.contact-link {
  text-decoration: none;
  transition: color 220ms ease;
}

.contact-link--youtube {
  color: #f30035;
}

.contact-link--youtube:hover,
.contact-link--youtube:focus-visible {
  color: #f9436a;
}

.contact-link--telegram {
  color: #31a0fb;
}

.contact-link--telegram:hover,
.contact-link--telegram:focus-visible {
  color: #63b9ff;
}

.contact-link--tiktok {
  color: #7751be;
}

.contact-link--tiktok:hover,
.contact-link--tiktok:focus-visible {
  color: #9278c3;
}

.soundtrack-item {
  display: grid;
  gap: 3px;
}

.soundtrack-description {
  margin: 0;
  color: #c6c6c6;
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.soundtrack-toggle {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  color: var(--white);
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 140px;
  font-weight: 400;
  line-height: 100px;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.soundtrack-title {
  display: block;
  line-height: 100px;
}

.soundtrack-title--fictional {
  display: grid;
}

.soundtrack-arrow {
  display: block;
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  margin-left: 20px;
  image-rendering: pixelated;
  transform: translateY(-3px) rotate(180deg);
  transform-origin: center;
  transition: transform 420ms ease;
}

.soundtrack-item.is-open .soundtrack-arrow {
  transform: translateY(-3px) rotate(360deg);
}

.soundtrack-body {
  width: 1810px;
  height: 0;
  overflow: hidden;
  transition: height 420ms ease;
}

.soundtrack-body[hidden] {
  display: none;
}

.soundtrack-player {
  padding-top: 10px;
}

.player-categories {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.player-category {
  color: #c6c6c6;
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 220ms ease;
}

.player-category.is-active {
  color: var(--white);
}

.player-category:hover:not(.is-active),
.player-category:focus-visible:not(.is-active) {
  color: #949494;
}

.player-track-list {
  display: grid;
  margin-top: 116px;
}

.player-track-list[hidden] {
  display: none;
}

.player-note {
  margin: -35px 0 0;
  color: #c6c6c6;
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 140px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.player-note--compact {
  margin-top: -25px;
  font-size: 110px;
}

.player-text-block {
  display: grid;
}

.player-text {
  width: 1740px;
  margin: 0;
  color: var(--white);
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 72px;
  letter-spacing: 0;
}

.player-text-link {
  justify-self: start;
  margin-top: 116px;
  color: var(--white);
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 100px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 220ms ease;
}

.player-text-link:hover,
.player-text-link:focus-visible {
  color: #c6c6c6;
}

.audio-track + .audio-track {
  margin-top: 60px;
}

.audio-track-title {
  margin: 0;
  color: var(--white);
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.audio-track-detail {
  color: #c6c6c6;
}

.audio-track-controls {
  display: grid;
  grid-template-columns: 32px 1436px 250px;
  align-items: center;
  column-gap: 20px;
  margin-top: 10px;
}

.track-play {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  image-rendering: pixelated;
  cursor: pointer;
}

.track-play-icon {
  display: block;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.track-play-icon--stop {
  display: none;
}

.audio-track.is-playing .track-play-icon--play,
.audio-track.is-play-pending .track-play-icon--play {
  display: none;
}

.audio-track.is-playing .track-play-icon--stop,
.audio-track.is-play-pending .track-play-icon--stop {
  display: block;
}

.track-loading-icon {
  display: none;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.audio-track.is-loading .track-play-icon {
  display: none;
}

.audio-track.is-loading .track-loading-icon {
  display: block;
}

.track-progress {
  position: relative;
  width: 1436px;
  height: 30px;
  cursor: pointer;
}

.track-progress-bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1436px;
  height: 8px;
  background: #c6c6c6;
  transform: translateY(-50%);
}

.track-progress-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 8px;
  background: var(--white);
  opacity: 0;
  transform: translateY(-50%);
}

.track-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 30px;
  background: var(--white);
  opacity: 0;
  transform: translate(-5px, -50%);
}

.audio-track.is-playing .track-progress-fill,
.audio-track.is-playing .track-progress-thumb,
.audio-track.has-progress .track-progress-fill,
.audio-track.has-progress .track-progress-thumb {
  opacity: 1;
}

.track-time {
  margin-left: 10px;
  color: var(--white);
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.audio-native {
  display: none;
}

.mini-player {
  --mini-bg: var(--red);
  --mini-text: var(--white);
  --mini-muted: #c6c6c6;
  --mini-bar: #c6c6c6;
  --mini-accent: var(--white);
  --mini-shuffle-passive: #c6c6c6;
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 80;
  width: 1920px;
  height: 130px;
  color: var(--mini-text);
  background: var(--mini-bg);
  font-family: "Jersey 25", system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(var(--site-scale));
  transform-origin: bottom center;
  transition:
    opacity 220ms ease,
    color 220ms ease,
    background-color 650ms ease;
}

body.theme-all-music .mini-player,
body.theme-contact .mini-player {
  --mini-bg: var(--white);
  --mini-text: var(--red);
  --mini-muted: #696969;
  --mini-bar: #919191;
  --mini-accent: var(--red);
  --mini-shuffle-passive: #696969;
  --mini-play-icon: url("./assets/icons/bf032c/play.webp");
  --mini-stop-icon: url("./assets/icons/bf032c/stop.webp");
  --mini-loading-icon: url("./assets/icons/bf032c/loading.gif");
  --mini-shuffle-passive-icon: url("./assets/icons/696969/shuffle-passive.webp");
  --mini-shuffle-active-icon: url("./assets/icons/bf032c/shuffle-active.webp");
  --mini-prev-icon: url("./assets/icons/bf032c/prev.webp");
  --mini-next-icon: url("./assets/icons/bf032c/next.webp");
}

.mini-player.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mini-track-title,
.mini-track-source,
.mini-time {
  position: absolute;
  margin: 0;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.mini-track-title {
  top: 19px;
  left: 34px;
  max-width: 1500px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-track-detail {
  color: var(--mini-muted);
}

.mini-track-source {
  top: 19px;
  right: 34px;
  color: var(--mini-muted);
}

.mini-controls {
  position: absolute;
  bottom: 21px;
  left: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.mini-control {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--mini-accent);
  cursor: pointer;
}

.mini-control-image,
.mini-play-icon {
  display: block;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.mini-control--shuffle .mini-control-image {
  content: var(--mini-shuffle-passive-icon, url("./assets/icons/c6c6c6/shuffle-passive.webp"));
}

.mini-player.is-shuffled .mini-control--shuffle .mini-control-image,
.mini-control--shuffle:hover .mini-control-image,
.mini-control--shuffle:focus-visible .mini-control-image,
body.theme-all-music .mini-player.is-shuffled .mini-control--shuffle .mini-control-image,
body.theme-all-music .mini-control--shuffle:hover .mini-control-image,
body.theme-all-music .mini-control--shuffle:focus-visible .mini-control-image,
body.theme-contact .mini-player.is-shuffled .mini-control--shuffle .mini-control-image,
body.theme-contact .mini-control--shuffle:hover .mini-control-image,
body.theme-contact .mini-control--shuffle:focus-visible .mini-control-image {
  content: var(--mini-shuffle-active-icon, url("./assets/icons/ffffff/shuffle-active.webp"));
}

.mini-control--shuffle {
  opacity: 1;
  transition: opacity 220ms ease;
}

.mini-player.is-shuffled .mini-control--shuffle,
.mini-control--shuffle:hover,
.mini-control--shuffle:focus-visible {
  opacity: 1;
}

.mini-skip-icon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.mini-skip-icon::before,
.mini-skip-icon::after {
  display: none;
}

.mini-skip-icon--previous {
  content: var(--mini-prev-icon, url("./assets/icons/ffffff/prev.webp"));
}

.mini-skip-icon--next {
  content: var(--mini-next-icon, url("./assets/icons/ffffff/next.webp"));
}

.mini-play-icon--stop,
.mini-play-icon--loading {
  display: none;
}

.mini-play-icon--play {
  content: var(--mini-play-icon, url("./assets/icons/ffffff/play.webp"));
}

.mini-play-icon--stop {
  content: var(--mini-stop-icon, url("./assets/icons/ffffff/stop.webp"));
}

.mini-play-icon--loading {
  content: var(--mini-loading-icon, url("./assets/icons/ffffff/loading.gif"));
}

.mini-player.is-playing .mini-play-icon--play {
  display: none;
}

.mini-player.is-playing .mini-play-icon--stop {
  display: block;
}

.mini-player.is-loading .mini-play-icon {
  display: none;
}

.mini-player.is-loading .mini-play-icon--loading {
  display: block;
}

.mini-progress {
  position: absolute;
  bottom: 22px;
  left: 229px;
  width: 1418px;
  height: 30px;
  cursor: pointer;
}

.mini-progress-bar,
.mini-progress-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 8px;
  transform: translateY(-50%);
}

.mini-progress-bar {
  width: 1418px;
  background: var(--mini-bar);
}

.mini-progress-fill {
  width: 0;
  background: var(--mini-accent);
}

.mini-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 30px;
  background: var(--mini-accent);
  transform: translate(-5px, -50%);
}

.mini-time {
  bottom: 18px;
  left: 1681px;
  color: var(--mini-text);
}

@media (max-width: 767px) {
  .title-nav {
    width: 1770px;
    height: 520px;
    pointer-events: none;
  }

  .title-link,
  .title-link.is-active,
  html.is-webkit .title-link,
  html.is-webkit .title-link.is-active {
    height: 148px;
    font-size: 180px;
    line-height: 0.82;
    transform-origin: left top;
    pointer-events: auto;
    will-change: color;
    transition: color 220ms ease;
  }

  .title-link[data-section="projects"],
  .title-link[data-section="projects"].is-active,
  html.is-webkit .title-link[data-section="projects"],
  html.is-webkit .title-link[data-section="projects"].is-active {
    transform: translate3d(0, 0, 0);
  }

  .title-link[data-section="all-music"],
  .title-link[data-section="all-music"].is-active,
  body[data-active-section="all-music"] .title-link[data-section="all-music"],
  body[data-active-section="contact"] .title-link[data-section="all-music"],
  html.is-webkit .title-link[data-section="all-music"],
  html.is-webkit .title-link[data-section="all-music"].is-active,
  html.is-webkit body[data-active-section="all-music"] .title-link[data-section="all-music"],
  html.is-webkit body[data-active-section="contact"] .title-link[data-section="all-music"] {
    transform: translate3d(0, 150px, 0);
  }

  .title-link[data-section="contact"],
  .title-link[data-section="contact"].is-active,
  body[data-active-section="contact"] .title-link[data-section="contact"],
  html.is-webkit .title-link[data-section="contact"],
  html.is-webkit .title-link[data-section="contact"].is-active,
  html.is-webkit body[data-active-section="contact"] .title-link[data-section="contact"] {
    transform: translate3d(0, 270px, 0);
  }

  .music-tab,
  .music-tab.is-active,
  html.is-webkit .music-tab,
  html.is-webkit .music-tab.is-active {
    height: 148px;
    font-size: 180px;
    line-height: 0.82;
    transform: none;
    transform-origin: right top;
    will-change: color;
    transition: color 220ms ease;
  }

  .music-tab[data-music-tab="soundtracks"],
  .music-tab[data-music-tab="soundtracks"].is-active,
  html.is-webkit .music-tab[data-music-tab="soundtracks"],
  html.is-webkit .music-tab[data-music-tab="soundtracks"].is-active {
    top: 710px;
    transform: none;
  }

  .music-tab[data-music-tab="own-music"],
  .music-tab[data-music-tab="own-music"].is-active,
  html.is-webkit .music-tab[data-music-tab="own-music"],
  html.is-webkit .music-tab[data-music-tab="own-music"].is-active {
    top: 830px;
    transform: none;
  }

  .soundtrack-list,
  .own-music-list {
    top: 1096px;
  }

  .contact-list {
    top: 1120px;
  }

  .mini-player {
    height: 360px;
  }

  .mini-track-title,
  .mini-track-source,
  .mini-time {
    line-height: 1;
  }

  .mini-track-title {
    top: 35px;
    left: 60px;
    max-width: 1800px;
    font-size: 65px;
  }

  .mini-track-source {
    top: 100px;
    right: auto;
    left: 60px;
    max-width: 1800px;
    overflow: hidden;
    color: var(--mini-muted);
    font-size: 60px;
    text-overflow: ellipsis;
  }

  .mini-progress {
    top: 184px;
    bottom: auto;
    left: 60px;
    width: 1800px;
    height: 40px;
  }

  .mini-progress-bar,
  .mini-progress-fill {
    height: 10px;
  }

  .mini-progress-bar {
    width: 1800px;
  }

  .mini-progress-thumb {
    width: 10px;
    height: 40px;
    transform: translate(-5px, -50%);
  }

  .mini-controls {
    inset: 0;
    display: block;
  }

  .mini-control {
    position: absolute;
    top: 258px;
    width: 68px;
    height: 68px;
  }

  .mini-control-image,
  .mini-play-icon,
  .mini-skip-icon {
    width: 68px;
    height: 68px;
  }

  .mini-skip-icon {
    object-fit: contain;
  }

  .mini-control--shuffle {
    left: 60px;
  }

  .mini-control--previous {
    left: calc(50% - 162px);
  }

  .mini-control--toggle {
    left: calc(50% - 34px);
  }

  .mini-control--next {
    left: calc(50% + 94px);
  }

  .mini-time {
    top: 267px;
    right: 60px;
    bottom: auto;
    left: auto;
    color: var(--mini-text);
    font-size: 50px;
  }
}