@font-face { font-family: UnifrakturCook; src: url('/fonts/unifrakturcook.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --white: #f4f4f4;
  --muted: #969696;
  --heading: UnifrakturCook, 'Old English Text MT', Georgia, serif;
  --body: Arial, Helvetica, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #000; color-scheme: dark; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #000; color: var(--white); font-family: var(--body); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
::selection { background: #aaa; color: #000; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.entry { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; border: 0; background: #000; text-align: center; transition: opacity .85s var(--ease), visibility .85s; }
.entry-inner { display: grid; justify-items: center; gap: 15px; transform: translateY(-2vh); animation: gate-breathe 11s ease-in-out 1.5s infinite alternate; }
.entry img { object-fit: contain; animation: gate-reveal .95s var(--ease) both; }
.entry-wordmark { font: 700 clamp(3.5rem, 7vw, 6.6rem)/.95 var(--heading); }
.entry-instruction { margin-top: 20px; color: #b1b1b1; font: 11px/1.5 var(--body); letter-spacing: .22em; }
.entry-wordmark { animation: gate-reveal 1.05s var(--ease) .19s both; }
.entry-instruction { animation: gate-reveal .95s var(--ease) .48s both, instruction-breathe 5.8s ease-in-out 1.6s infinite alternate; }
.entry:hover .entry-instruction, .entry:focus-visible .entry-instruction { color: #fff; }
@keyframes gate-reveal { from { opacity: 0; transform: translateY(22px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes gate-breathe { from { transform: translateY(-2vh) scale(1); } to { transform: translateY(calc(-2vh - 6px)) scale(1.012); } }
@keyframes instruction-breathe { from { opacity: .82; } to { opacity: 1; } }
body.entered .entry { opacity: 0; visibility: hidden; pointer-events: none; }
#trail { position: fixed; z-index: 12; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.site-shell { position: relative; min-height: 100svh; opacity: 0; transition: opacity .9s var(--ease); }
body.entered .site-shell { opacity: 1; }
.site-header { position: absolute; z-index: 4; top: max(13px, env(safe-area-inset-top)); left: max(15px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 6px; }
.site-header img { object-fit: contain; }
.brand { position: relative; font: 700 24px/.9 var(--heading); }
.brand.glitch { animation: brand-glitch 135ms steps(2, end) 2; }
@keyframes brand-glitch { 25% { transform: translateX(2px); clip-path: inset(8% 0 54%); } 50% { transform: translateX(-2px); clip-path: inset(62% 0 4%); } 100% { transform: none; clip-path: none; } }

.composition { display: grid; place-items: center; min-height: 100svh; padding: 72px 32px 64px; }
.profile-column { width: min(100%, 500px); transform-origin: center center; will-change: transform; opacity: 0; filter: blur(7px); transition: opacity 1s var(--ease), filter 1s var(--ease); }
body.entered .profile-column { opacity: 1; filter: none; }
.profile-panel, .player { position: relative; overflow: hidden; border: 2px solid rgb(255 255 255 / 12%); background: linear-gradient(145deg, rgb(30 30 30 / 33%) 0%, rgb(16 16 16 / 40%) 55%, rgb(4 4 4 / 52%) 100%); box-shadow: inset 0 1px 0 #ffffff0d, inset 0 -6px 18px #0009, 0 14px 32px #0009; }
.profile-panel { border-radius: 68px; padding: 24px 26px 20px; }
.profile-panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 25% 8%, #ffffff05, transparent 58%); pointer-events: none; }
.profile-panel > * { position: relative; }
.identity { display: flex; align-items: center; gap: 16px; min-height: 90px; }
.identity-mark { display: grid; place-items: center; flex: 0 0 90px; width: 90px; height: 90px; overflow: hidden; border: 1px solid #3c3c3c; border-radius: 50%; background: #050505; box-shadow: 0 6px 18px #0009; transform: translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 12px); }
.identity-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
#identity-avatar { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.identity-copy { align-self: flex-end; min-width: 0; margin-bottom: 13px; transform: translate3d(var(--copy-x, 0px), var(--copy-y, 0px), 8px); }
.identity-mark, .identity-copy { opacity: 0; transition: opacity .75s var(--ease); }
body.entered .identity-mark { opacity: 1; transition-delay: .06s; }
body.entered .identity-copy { opacity: 1; transition-delay: .13s; }
.identity p { margin: 0; color: #aaa; font-size: 12px; letter-spacing: .035em; }
.embed-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
.embed-row, .social-links, .player-main, .player-bottom { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
body.entered .embed-row, body.entered .social-links, body.entered .player-main, body.entered .player-bottom { opacity: 1; transform: none; }
body.entered .embed-row { transition-delay: .2s; }
body.entered .social-links { transition-delay: .3s; }
body.entered .player-main { transition-delay: .39s; }
body.entered .player-bottom { transition-delay: .46s; }
.embed { display: block; min-width: 0; min-height: 124px; padding: 10px 11px; border: 1px solid rgb(255 255 255 / 11%); border-radius: 22px; background: rgb(31 31 31 / 43%); box-shadow: inset 0 1px 0 #ffffff08; text-decoration: none; transition: background-color .26s, border-color .26s, box-shadow .26s, transform .32s var(--ease); }
.embed:hover, .embed:focus-visible { border-color: rgb(255 255 255 / 38%); background: rgb(44 44 44 / 68%); box-shadow: inset 0 1px 0 #ffffff16, 0 9px 20px #0009; transform: translateY(-3px) scale(1.012); }
.embed:focus-visible { outline-offset: 3px; }
.embed:hover img, .embed:focus-visible img { border-color: #aaa; filter: grayscale(1) brightness(1.15); transform: scale(1.035); }
.embed-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #d0d0d0; font-size: 11px; font-weight: 700; letter-spacing: .025em; }
.state-label { color: #969696; font-size: 9px; font-weight: 700; letter-spacing: .035em; text-align: right; white-space: nowrap; }
.presence-content, .roblox-content { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 52px; margin-top: 6px; }
.presence-avatar, .roblox-content img { flex: none; border: 1px solid #565656; border-radius: 50%; object-fit: cover; filter: grayscale(1); transition: border-color .26s, filter .26s, transform .26s var(--ease); }
.roblox-content img { border-radius: 13px; object-fit: contain; background: #0c0c0c; }
.embed-copy { display: block; min-width: 0; }
.embed-copy strong { display: block; overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.embed-copy small { display: block; overflow: hidden; margin-top: 4px; color: #999; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
#roblox-name { max-height: 2.4em; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
.roblox-details { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 1px; color: #a9a9a9; font-size: 10px; }
.roblox-details strong { color: #e4e4e4; font-weight: 700; }
.roblox-action, .discord-action { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; margin-top: 7px; padding: 2px 10px; border: 1px solid #777; border-radius: 12px; background: #dedede; color: #0b0b0b; font-size: 10px; font-weight: 700; }
.roblox:hover .roblox-action, .roblox:focus-visible .roblox-action { background: #fff; }
.presence { display: flex; flex-direction: column; }
.presence-content { flex: 1; }
.discord-action { align-self: flex-start; margin-top: auto; border-color: #4a4a4a; background: rgb(255 255 255 / 7%); color: #dedede; }
.presence:hover .discord-action, .presence:focus-visible .discord-action { border-color: #aaa; background: #ddd; color: #080808; }
.social-links { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 10px; }
.social-links a { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; color: #b8b8b8; text-decoration: none; cursor: default; transition: background-color .22s, color .22s, transform .3s var(--ease); }
.social-links a:hover { background: #ffffff13; color: #fff; transform: translateY(-2px) scale(1.05); }
.social-links a * { pointer-events: none; }
.social-links svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.player { margin-top: 11px; padding: 10px 18px; border-radius: 64px; background: linear-gradient(125deg, rgb(25 25 25 / 35%) 0%, rgb(11 11 11 / 43%) 70%, rgb(0 0 0 / 55%) 100%); }
.player-main { display: flex; align-items: center; gap: 11px; min-height: 53px; }
.records { display: flex; align-items: center; gap: 4px; flex: none; }
.record-button { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid #555; border-radius: 50%; background: #111; transition: border-color .24s, transform .3s var(--ease); }
.record-button:hover { border-color: #eee; transform: translateY(-3px); }
.record-button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px #ffffff26; }
.record-art { display: block; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; transform: rotate(var(--rotation, 0deg)); }
.record-art img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: grayscale(1); }
.record-button::after { content: ''; position: absolute; width: 7px; height: 7px; border: 2px solid #111; border-radius: 50%; background: #e5e5e5; }
.record-number { position: absolute; right: -1px; bottom: -3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #171717; color: #e1e1e1; font-size: 9px; line-height: 1; }
.track-meta { display: block; flex: 1; min-width: 0; }
.track-meta-top { display: flex; align-items: baseline; justify-content: flex-start; gap: 9px; color: #aaa; font-size: 10px; letter-spacing: .05em; }
.track-meta-top .state-label { font-size: 9px; }
.track-meta strong { display: block; overflow: hidden; margin-top: 3px; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.track-meta small { display: block; overflow: hidden; margin-top: 3px; color: #c3c3c3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.player-bottom { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.transport { display: flex; align-items: center; gap: 2px; flex: none; }
.transport button, .volume-row button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #eee; font-size: 17px; transition: background-color .2s, color .2s, transform .2s; }
.transport button:hover, .volume-row button:hover { background: #ffffff26; transform: scale(1.05); }
.transport .play-button { border: 1px solid #aaa; font-size: 15px; }
.seek-wrap { display: flex; align-items: center; flex: 1; gap: 6px; min-width: 0; color: #ddd; font-size: 10px; }
input[type=range] { min-width: 0; height: 44px; margin: 0; accent-color: #eee; background: transparent; cursor: pointer; }
.seek-wrap input { width: 100%; flex: 1; }
.volume-row { display: flex; align-items: center; gap: 3px; flex: none; color: #d8d8d8; font-size: 10px; }
.volume-row button { font-size: 10px; }
.volume-row input { width: 52px; }
.volume-row span { min-width: 21px; text-align: right; }
.player audio { display: none; }

.lyric-stage { position: fixed; z-index: 2; right: max(28px, env(safe-area-inset-right)); bottom: max(25px, env(safe-area-inset-bottom)); width: min(25vw, 410px); opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease) .28s, transform 1s var(--ease) .28s; }
body.entered .lyric-stage { opacity: 1; transform: none; }
#lyric-status { min-height: 20px; margin: 0 0 9px; color: #aaa; font-size: 12px; line-height: 1.5; }
.lyric-lines { min-height: 104px; }
.lyric-lines p { margin: 0; min-height: 25px; overflow-wrap: anywhere; color: #888; font: 13px/1.4 Georgia, serif; transition: color .32s, opacity .25s, transform .25s; }
.lyric-lines p.active { color: #fff; }
.lyric-word { background: linear-gradient(90deg, #fff var(--word-progress, 0%), #888 var(--word-progress, 0%)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.lyric-lines.fading p { opacity: 0; transform: translateY(4px); }

@media (max-width: 1150px) {
  .composition { display: flex; flex-direction: column; align-items: center; min-height: 100svh; gap: 36px; padding: 85px 28px 50px; }
  .profile-column { width: min(100%, 500px); }
  .lyric-stage { position: static; width: min(100%, 500px); margin: 0; }
}
@media (max-width: 660px) {
  .site-header { top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
  .brand { font-size: 23px; }
  .composition { gap: 30px; padding: 70px max(15px, env(safe-area-inset-left)) 46px; }
  .profile-column { width: min(100%, 440px); }
  .profile-panel { padding: 20px 20px 18px; border-radius: 55px; }
  .identity { gap: 13px; min-height: 82px; }
  .identity-mark { flex-basis: 82px; width: 82px; height: 82px; }
  #identity-sigil { width: 62px; height: 62px; }
  .identity p { font-size: 11px; }
  .embed-row { gap: 9px; margin-top: 16px; }
  .embed { min-height: 123px; padding: 10px; border-radius: 20px; }
  .embed-heading { font-size: 12px; }
  .embed-copy strong { font-size: 13px; }
  .embed-copy small { font-size: 10px; }
  .presence-content, .roblox-content { gap: 6px; }
  .presence-avatar { width: 37px; height: 37px; }
  .roblox-content img { width: 46px; height: 46px; }
  .social-links { gap: 11px; margin-top: 9px; }
  .player { margin-top: 10px; padding: 12px 16px; border-radius: 52px; }
  .player-main { flex-wrap: wrap; gap: 8px 15px; }
  .records { order: 0; }
  .record-button { width: 46px; height: 46px; }
  .record-art { width: 40px; height: 40px; }
  .track-meta { order: 2; flex-basis: 100%; }
  .player-bottom { flex-wrap: wrap; gap: 2px 8px; margin-top: 8px; }
  .seek-wrap { min-width: 155px; }
  .volume-row { width: 100%; justify-content: center; }
  .volume-row input { width: min(42vw, 150px); }
  .lyric-lines p { font-size: 14px; }
}
@media (max-width: 410px) {
  .profile-column { width: min(100%, 330px); }
  .profile-panel { padding-inline: 17px; border-radius: 46px; }
  .identity-mark { flex-basis: 76px; width: 76px; height: 76px; }
  .embed-row { grid-template-columns: 1fr; }
  .embed { min-height: 101px; }
  .presence-content, .roblox-content { min-height: 50px; margin-top: 6px; }
  .roblox { min-height: 125px; }
  .social-links { margin-top: 8px; }
  .player { padding-inline: 16px; }
  .records { width: 100%; justify-content: space-between; }
  .player-bottom { justify-content: center; }
  .seek-wrap { min-width: 0; flex-basis: calc(100% - 150px); }
}
@media (max-height: 690px) and (min-width: 1151px) {
  .composition { min-height: 0; padding-top: 85px; }
}
@media (hover: none), (pointer: coarse) { #trail { display: none; } .profile-column { will-change: auto; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms; transition-duration: .01ms; }
  .entry-inner, .entry img, .entry-wordmark, .entry-instruction { animation: none; opacity: 1; transform: none; filter: none; }
  #trail { display: none; }
  .profile-column { will-change: auto; }
  .identity-mark, .identity-copy, .embed-row, .social-links, .player-main, .player-bottom, .lyric-stage { transition-delay: 0ms; }
}