@font-face {
  font-family: Shareit;
  src: url("/assets/fonts/Shareit.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Positions;
  src: url("/assets/fonts/PositionsByArixbored.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Shareit, sans-serif;
  font-synthesis: none;
  --white: #f2f2f2;
  --soft: #bdbdbd;
  --energy: 0;
}

* { box-sizing: border-box; }
html { background: #000; }
body { margin: 0; color: var(--white); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: -5rem; left: 12px; padding: 8px 12px; background: #000; font-size: 22px; }
.skip-link:focus-visible { top: 12px; }
html:not([data-page-state="entered"]) .skip-link { visibility: hidden; }

.site { min-height: 100svh; position: relative; isolation: isolate; overflow: clip; }
.scene, .scene__poster, .scene__video { position: fixed; inset: 0; width: 100%; height: 100%; }
.scene { z-index: -1; overflow: hidden; background: #000; }
.scene__poster, .scene__video { object-fit: cover; object-position: center; animation: scene-drift 64s ease-in-out infinite; }
.scene__video { opacity: 0; transition: opacity .12s linear; }
html[data-video-ready="true"] .scene__video { opacity: 1; }
@keyframes scene-drift {
  0%, 100% { transform: scale(1.044) translate3d(-.65%, -.35%, 0); }
  50% { transform: scale(1.044) translate3d(.65%, .35%, 0); }
}

.entry { position: fixed; z-index: 4; inset: 0; display: grid; place-items: center; }
.entry__button { min-width: 240px; min-height: 74px; border: 0; background: transparent; padding: 13px 26px; font-size: clamp(36px, 3vw, 45px); line-height: 1.1; color: #fff; text-shadow: 0 2px 15px #000; transition: letter-spacing .28s ease, transform .28s ease, opacity .28s ease; }
.entry__button:not(:disabled):hover, .entry__button:not(:disabled):focus-visible { letter-spacing: .035em; transform: translateY(-2px); }
.entry__button:disabled { cursor: wait; }
html[data-page-state="booting"] .entry__button { opacity: 0; }
html[data-page-state="ready-to-enter"] .entry__button { animation: entry-settle .5s ease-out both; }
html[data-page-state="entered"] .entry { visibility: hidden; pointer-events: none; }
@keyframes entry-settle { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

.interface { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center; padding: 26px 16px 36px; }
html:not([data-page-state="entered"]) .interface { visibility: hidden; pointer-events: none; }
.profile-anchor { width: min(608px, calc(100vw - 32px)); margin-inline: auto; perspective: 1000px; }
.profile-stack { width: 100%; display: grid; gap: 12px; transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-origin: center center; transform-style: preserve-3d; will-change: transform; }
.profile, .player, .works { font-family: Positions, Shareit, sans-serif; }
.profile, .player { min-width: 0; background: rgba(0, 0, 0, .84); border: 1px solid transparent; box-shadow: 0 20px 65px rgba(0, 0, 0, .62); backdrop-filter: blur(2px) brightness(.76); }
.profile { --pointer-x: 50%; --pointer-y: 50%; --pointer-active: 0; position: relative; isolation: isolate; overflow: hidden; border-radius: 23px; display: grid; grid-template-columns: 102px minmax(0, 1fr); align-items: center; column-gap: 18px; padding: 20px 26px 14px; box-shadow: 0 16px 54px rgba(0,0,0,.62); }
.profile::before, .player::before { content: ""; position: absolute; z-index: 2; inset: -1px; border: 2px solid rgba(255,255,255,calc(.78 + var(--energy) * .18)); border-radius: inherit; opacity: var(--pointer-active, 0); -webkit-mask-image: radial-gradient(circle 112px at var(--pointer-x) var(--pointer-y), #000 0%, rgba(0,0,0,.82) 30%, transparent 100%); mask-image: radial-gradient(circle 112px at var(--pointer-x) var(--pointer-y), #000 0%, rgba(0,0,0,.82) 30%, transparent 100%); pointer-events: none; }
.profile::after { content: ""; position: absolute; z-index: 0; width: 160px; height: 160px; left: var(--pointer-x); top: var(--pointer-y); border-radius: 50%; background: rgba(255,255,255,.055); filter: blur(34px); transform: translate(-50%,-50%); opacity: calc(var(--pointer-active) * (.65 + var(--energy) * .35)); pointer-events: none; }
.profile > * { position: relative; z-index: 1; }
.profile__avatar { display: block; width: 102px; height: 102px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,calc(.76 + var(--energy) * .2)); filter: grayscale(1) contrast(1.12) brightness(calc(1 + var(--energy) * .06)); translate: var(--near-x, 0px) var(--near-y, 0px); scale: calc(1 + var(--depth-strength, 0) * .012); }
.profile__name { margin: 0; min-width: 0; display: flex; align-items: center; height: 103px; translate: var(--identity-x, 0px) var(--identity-y, 0px); scale: calc(1 + var(--depth-strength, 0) * .008); }
.profile__name img { display: block; width: 198px; max-width: 100%; height: 102px; object-fit: contain; object-position: left center; filter: brightness(calc(1 + var(--energy) * .2)); transform: translateY(calc(var(--energy) * -1px)); }
.profile__bio { grid-column: 1 / -1; margin: 14px 0 11px; font-size: 23px; line-height: 1.25; letter-spacing: .005em; color: #ededed; translate: var(--mid-x, 0px) var(--mid-y, 0px); }
.socials { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; translate: var(--mid-x, 0px) var(--mid-y, 0px); }
.socials a { display: inline-flex; width: 40px; height: 38px; align-items: center; justify-content: center; opacity: .78; transition: opacity .16s ease, transform .16s ease, background .16s ease, box-shadow .16s ease; border-radius: 50%; }
.socials a:hover, .socials a:focus-visible { opacity: 1; transform: translateY(-2px); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.socials a:active { transform: translateY(1px) scale(.97); }
.socials svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.socials__dot, .socials__play { fill: currentColor; stroke: none; }
.profile__footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 11px; border-top: 1px solid rgba(255,255,255,.13); margin-top: 8px; padding-top: 10px; translate: var(--far-x, 0px) var(--far-y, 0px); }
.profile__details { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 0; }
.profile__details div { display: flex; gap: 4px; font-size: 15px; line-height: 1.2; }
.profile__details dt { color: var(--soft); }
.profile__details dd { margin: 0; white-space: nowrap; }
.profile__works { flex: none; min-width: 54px; min-height: 40px; border: 0; padding: 3px 4px; background: none; font-size: 18px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #777; transition: transform .16s ease, text-decoration-color .16s ease, letter-spacing .16s ease; }
.profile__works:hover, .profile__works:focus-visible { transform: translateX(2px); text-decoration-color: #fff; letter-spacing: .02em; }
.profile__works:active { transform: translateX(0) scale(.98); }
.profile__works span { display: inline-block; font-family: sans-serif; font-size: 14px; text-decoration: none; }

.player { --pointer-x: 50%; --pointer-y: 50%; --pointer-active: 0; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-radius: 999px; padding: 6px 15px; box-shadow: 0 16px 52px rgba(0,0,0,.62); translate: var(--player-x, 0px) var(--player-y, 0px); }
.player > * { position: relative; z-index: 1; }
.player__mark { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: #050505; translate: var(--mid-x, 0px) var(--mid-y, 0px); }
.player__mark img { width: 39px; height: 39px; object-fit: contain; filter: grayscale(1) brightness(calc(1 + var(--energy) * .1)); transform: scale(calc(1 + var(--energy) * .04)); transition: transform .12s linear; }
.player__content { min-width: 0; }
.player__track { display: grid; gap: 0; margin: 0 0 2px; overflow: hidden; white-space: nowrap; line-height: 1.12; }
.player__title, .player__artist { overflow: hidden; text-overflow: ellipsis; }
.player__title { font-size: 20px; color: #fff; }
.player__artist { font-size: 14px; color: var(--soft); }
.player__artist[hidden] { display: none; }
.player__timeline { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 7px; font-size: 15px; line-height: 1.1; color: var(--soft); }
.player__timeline span:last-child { text-align: right; }
.range { position: relative; height: 44px; display: flex; align-items: center; }
.range__rail { width: 100%; height: 2px; background: rgba(255,255,255,.4); pointer-events: none; transition: height .16s ease, background .16s ease; }
.range__fill { display: block; width: 0; height: 100%; background: #fff; pointer-events: none; position: relative; }
.range__fill::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: translateY(-50%) scale(.5); opacity: 0; transition: transform .16s ease, opacity .16s ease; }
.range:hover .range__rail, .range:focus-within .range__rail { height: 3px; background: rgba(255,255,255,.65); }
.range:hover .range__fill::after, .range:focus-within .range__fill::after { transform: translateY(-50%) scale(1); opacity: 1; }
.range input { position: absolute; inset: 0; display: block; width: 100%; margin: 0; opacity: 0; cursor: pointer; }
.range:focus-within .range__rail { outline: 1px solid white; outline-offset: 5px; }
.player__controls { display: flex; align-items: center; gap: 2px; }
.player__controls button { display: grid; place-items: center; flex: none; width: 40px; height: 44px; border: 0; padding: 0; background: transparent; border-radius: 50%; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.player__controls button:hover, .player__controls button:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.player__controls button:active { transform: translateY(1px) scale(.96); }
.player__controls svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.player__play[data-state="pause"] .player__icon-play, .player__play[data-state="play"] .player__icon-pause { display: none; }
.player__icon-play { fill: currentColor; stroke: none; }
.player__mute[data-state="muted"] .player__icon-audible, .player__mute[data-state="audible"] .player__icon-muted { display: none; }
.range--volume { width: 45px; flex: none; }
.player__energy { display: flex; align-items: center; gap: 2px; width: 24px; height: 23px; margin-right: 3px; }
.player__energy span { width: 2px; height: 6px; background: #fff; transform-origin: center; transition: height .11s linear, opacity .11s linear; opacity: .38; }
.player__energy span:nth-child(2n) { height: 9px; }

html[data-page-state="entered"] .profile { animation: reveal-profile .62s cubic-bezier(.16,1,.3,1) both; }
html[data-page-state="entered"] .player { animation: reveal-player .53s cubic-bezier(.16,1,.3,1) .28s both; }
html[data-page-state="entered"] .profile__avatar, html[data-page-state="entered"] .profile__name { animation: reveal-identity .48s ease-out .16s both; }
@keyframes reveal-profile { from { clip-path: inset(0 100% 0 0 round 28px); opacity: .55; } to { clip-path: inset(0 0 0 0 round 28px); opacity: 1; } }
@keyframes reveal-player { from { clip-path: inset(0 100% 0 0 round 999px); opacity: .2; } to { clip-path: inset(0 0 0 0 round 999px); opacity: 1; } }
@keyframes reveal-identity { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.lyrics { position: absolute; left: 50%; bottom: max(62px, 7vh); transform: translateX(-50%); width: min(620px, calc(100% - 32px)); text-align: center; pointer-events: none; }
.lyrics p { margin: 0; font-size: 25px; line-height: 1.3; text-shadow: 0 2px 15px #000; }
.lyrics p[hidden] { display: none; }
.site-footer { position: fixed; z-index: 3; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); pointer-events: none; }
.site-footer__name { font-size: 27px; line-height: 1; color: #e6e6e6; text-shadow: 0 2px 10px #000; }

.works { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-width: none; max-height: none; margin: auto; border: 0; padding: 0; background: #030303; color: var(--white); }
.works[open] { animation: works-enter .24s ease-out both; }
@keyframes works-enter { from { opacity: .82; transform: scale(.994); } to { opacity: 1; transform: scale(1); } }
.works::backdrop { background: #000; }
.works__surface { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 10px; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.works__header { display: flex; justify-content: space-between; align-items: center; }
.works__header h2 { margin: 0; font-size: 28px; font-weight: 400; }
.works__header button { display: grid; place-items: center; width: 46px; height: 46px; border: 0; background: transparent; border-radius: 50%; transition: transform .16s ease, background .16s ease; }
.works__header button:hover, .works__header button:focus-visible { background: rgba(255,255,255,.13); transform: rotate(8deg); }
.works__header button:active { transform: scale(.95); }
.works__header svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.works__viewer { min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.works__media { position: relative; isolation: isolate; width: min(100%, 1390px); max-height: 100%; display: grid; place-items: center; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 20px 70px #000; }
.works__viewer video { display: block; width: 100%; max-height: min(74dvh, 850px); aspect-ratio: 16/9; object-fit: contain; background: #000; }
.works__poster { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; filter: brightness(.94); opacity: 1; transition: opacity .25s ease; pointer-events: none; }
.works__media[data-playing="true"] .works__poster { opacity: 0; }
.works__play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 142px; min-height: 62px; border: 1px solid #ddd; background: rgba(0,0,0,.88); padding: 5px 20px; font-size: 23px; transition: background .16s ease, letter-spacing .16s ease, border-color .16s ease, transform .16s ease; }
.works__play:hover, .works__play:focus-visible { background: #171717; border-color: #fff; letter-spacing: .025em; transform: translate(-50%,-52%); }
.works__play:active { transform: translate(-50%,-49%) scale(.98); }
.works__play[hidden] { display: none; }
.works__viewer figcaption { padding: 4px 0; font-size: 23px; color: #e0e0e0; }
.works__index { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px 16px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 9px; }
.works__index button { display: flex; align-items: baseline; gap: 6px; min-height: 44px; border: 0; border-bottom: 1px solid transparent; padding: 7px 4px; background: transparent; color: #c5c5c5; text-align: left; font-size: 20px; transition: color .16s ease, border-color .16s ease, transform .16s ease; }
.works__index button:hover, .works__index button:focus-visible { color: #fff; border-color: #888; transform: translateY(-1px); }
.works__index button[aria-current="true"] { color: #fff; border-color: #fff; }
.works__index button:active { transform: translateY(1px); }
.works__index-number { color: #aaa; font-size: 16px; }
audio { display: none; }

@media (max-width: 620px) {
  .interface { padding-inline: 14px; }
  .profile-anchor { width: min(430px, calc(100vw - 28px)); }
  .profile-stack { gap: 8px; }
  .profile { grid-template-columns: 82px minmax(0,1fr); gap: 0 14px; padding: 19px 18px 14px; border-radius: 22px; }
  .profile__avatar { width: 82px; height: 82px; }
  .profile__name { height: 84px; }
  .profile__name img { width: 164px; height: 84px; }
  .profile__bio { margin: 14px 0 10px; font-size: 23px; line-height: 1.3; }
  .socials { gap: 3px; }
  .socials a { width: 44px; height: 44px; }
  .socials svg { width: 23px; height: 23px; }
  .profile__details { gap: 2px 11px; }
  .profile__details div { font-size: 17px; }
  .profile__works { min-height: 44px; font-size: 19px; }
  .player { grid-template-columns: 42px minmax(0,1fr); gap: 0 11px; border-radius: 25px; padding: 11px 14px; }
  .player__mark { width: 42px; height: 42px; }
  .player__mark img { width: 37px; height: 37px; }
  .player__title { font-size: 22px; }
  .player__artist { font-size: 15px; }
  .player__timeline { font-size: 17px; }
  .player__controls { grid-column: 1 / -1; justify-content: center; margin-top: 2px; }
  .player__controls button { width: 44px; height: 44px; }
  .range--volume { width: 54px; }
  .player__energy { width: 25px; gap: 2px; margin-right: 2px; }
  .works__viewer video { max-height: 64dvh; }
  .works__index { gap: 0 12px; }
  .works__index button { font-size: 17px; min-height: 44px; }
}

@media (hover: none), (pointer: coarse) {
  .profile::before, .profile::after, .player::before { display: none; }
  .profile-stack { transform: none; will-change: auto; }
  .profile__avatar, .profile__name, .profile__bio, .socials, .profile__footer, .player, .player__mark { translate: none; scale: none; }
}

@media (max-height: 660px) {
  .interface { padding-block: 12px 36px; }
  .works__viewer video { max-height: 60dvh; }
}