:root{
  --bg:#050506; --card:#65005c; --line:rgba(255,255,255,.08);
  --text:#f2f2f3; --muted:#8d8d94; --link:#8fd8ff; --accent:#c79bff;
}
*{box-sizing:border-box;margin:0; -webkit-tap-highlight-color:transparent}
html{-webkit-touch-callout:none}
body{-webkit-user-select:none; user-select:none}
img{-webkit-user-drag:none; user-drag:none}
:focus:not(:focus-visible){outline:none}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:"Poppins",system-ui,sans-serif;
  display:grid; place-items:center; overflow:hidden; position:relative;
}

.bg{position:fixed; inset:-10%; z-index:0;
  background:
    radial-gradient(40% 35% at 30% 25%, #2a2a2e 0%, transparent 70%),
    radial-gradient(35% 30% at 75% 60%, #1b1b1e 0%, transparent 70%),
    #050506;
  background-size:cover; background-position:center;
  filter:blur(26px) brightness(.75);
}
.bg.img{filter:blur(14px) brightness(.45)}
.bgvid{position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:blur(10px) brightness(.35) contrast(1.1); transform:scale(1.08); opacity:0; transition:opacity 1.2s ease; pointer-events:none}
.bgvid.on{opacity:1}
.shade{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at center,rgba(0,0,0,.05),rgba(0,0,0,.35))}

.stack{position:relative; z-index:2; width:min(92vw,560px);
  display:flex; flex-direction:column; align-items:center; gap:22px}
.ghost{width:100%; height:2.5em; display:flex; justify-content:center; text-align:center;
  font-size:clamp(15px,4.6vw,30px); line-height:1.25; font-weight:600;
  letter-spacing:.22em; padding-left:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.16); user-select:none; pointer-events:none;
  transition:opacity .55s ease, filter .55s ease}
.ghost.top{align-items:flex-end}
.ghost.bot{align-items:flex-start}
.ghost.out{opacity:0; filter:blur(8px)}

.float{width:100%;
  animation:drift 9s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(8px,-7px)}
  50%{transform:translate(0,0)}
  75%{transform:translate(-8px,7px)}
}

.card{position:relative; width:100%;
  background:linear-gradient(180deg,#65005c 150px,#52125c 45%,#3a2f5a 100%);
  border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6);
  opacity:0; transform:translateY(10px); animation:in .7s .1s ease forwards}
@keyframes in{to{opacity:1;transform:none}}

.banner{height:150px; background:#222 center/cover no-repeat; position:relative}
.banner::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,var(--card))}
.views{position:absolute; top:12px; right:12px; z-index:2;
  display:flex; align-items:center; gap:6px; padding:5px 12px;
  font-family:"Share Tech Mono",monospace; font-size:13px; color:#cfcfd4;
  background:rgba(0,0,0,.45); border:1px solid var(--line); border-radius:999px}
.views svg{width:14px;height:14px;opacity:.8}

.body{display:flex; gap:16px; padding:0 22px 24px; margin-top:-34px; position:relative; z-index:2}
.left{display:flex; flex-direction:column; align-items:center; gap:10px; flex:none}

.av{position:relative; width:84px; height:84px}
.av img.pfp{width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:3px solid #0c0c0e; background:#222; display:block}
.av img.deco{position:absolute; width:120%; height:120%; left:-10%; top:-10%; pointer-events:none}
.dot{position:absolute; right:2px; bottom:2px; width:18px; height:18px; border-radius:50%;
  background:#747f8d; border:3px solid #0c0c0e; z-index:3}
.dot.online{background:#23a55a} .dot.idle{background:#f0b232}
.dot.dnd{background:#f23f43} .dot.offline{background:#747f8d}

.icons{display:flex; gap:12px}
.icons a{color:#bdbdc4; display:grid; place-items:center; transition:color .2s}
.icons a:hover,.icons a:focus-visible{color:#fff; outline:none}
.icons svg{width:22px;height:22px;fill:currentColor}

.info{padding-top:40px; min-width:0}
.name{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:21px; font-weight:600; line-height:1.2}
.tag{display:inline-flex; align-items:center; gap:4px; padding:2px 7px;
  font-size:12px; font-weight:500; color:#d8d8dc;
  background:rgba(255,255,255,.08); border-radius:6px}
.tag img{width:14px;height:14px}
#dname{font-family:"Fredoka","Poppins",sans-serif; font-weight:700; letter-spacing:.01em; color:#2be26a;
  -webkit-text-stroke:1.5px #0b7a35; paint-order:stroke fill; text-shadow:0 0 14px rgba(43,226,106,.35)}
.uid{font-size:13px; color:#d6c6e4; margin-top:2px}
.links{margin-top:10px; font-size:14px; display:grid; gap:4px}
.links a{color:var(--link); text-decoration:none; word-break:break-all}
.links a:hover{text-decoration:underline}
.links b{font-weight:600; margin-right:6px}
.bio{margin-top:10px; font-size:14px; color:#eadff2}
.langs{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:14px; color:#d6c6e4}
.langs b{font-weight:600; color:#f2f2f3}
.langs-list{display:flex; gap:10px}
.langs-list img{width:24px; height:24px; display:block; object-fit:contain}

.music-btn{position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); left:12px; z-index:40;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:rgba(24,12,34,.72); color:#e9dcff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; transition:border-color .2s, box-shadow .2s}
.music-btn svg{width:22px; height:22px; fill:currentColor}
.music-btn.playing{border-color:var(--accent); box-shadow:0 0 14px rgba(199,155,255,.45)}
.music-btn:focus-visible,.icon-btn:focus-visible,.play:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.player{position:fixed; top:calc(68px + env(safe-area-inset-top,0px)); left:12px; z-index:39;
  width:min(calc(100vw - 24px),420px); padding:14px;
  background:rgba(18,10,28,.9); border:1px solid rgba(190,150,255,.28); border-radius:18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.98); transform-origin:top left;
  transition:opacity .22s, transform .22s, visibility .22s}
.player.open{opacity:1; visibility:visible; pointer-events:auto; transform:none}

.p-head{display:flex; align-items:center; gap:12px}
.cover{width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none; background:#222;
  border:1px solid rgba(255,255,255,.14)}
.meta{flex:1; min-width:0}
.title{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.artist{font-size:12.5px; color:var(--accent); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.artist:empty{display:none}

.icon-btn{background:none; border:0; color:#cfc3e6; cursor:pointer; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; flex:none; transition:color .2s, background .2s}
.icon-btn:hover{color:#fff; background:rgba(255,255,255,.08)}
.icon-btn svg{width:24px; height:24px; fill:currentColor}

.seek{display:flex; align-items:center; gap:10px; margin-top:12px;
  font-family:"Share Tech Mono",monospace; font-size:12px; color:#a99cc2}
.seek input{flex:1; min-width:0; -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; cursor:pointer;
  background:linear-gradient(90deg,var(--accent) var(--p,0%),rgba(255,255,255,.14) var(--p,0%))}
.seek input::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; border:0}
.seek input::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:#fff; border:0}

.ctrl{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px}
.play{width:52px; height:52px; border-radius:50%; border:1px solid rgba(199,155,255,.5); cursor:pointer;
  background:rgba(199,155,255,.16); color:#fff; display:grid; place-items:center}
.play svg{width:24px; height:24px; fill:currentColor; grid-area:1/1}
.play .i-pause{display:none}
.play.on .i-play{display:none}
.play.on .i-pause{display:block}


@media (max-width:420px){
  .body{padding:0 16px 20px; gap:12px}
  .av{width:72px;height:72px}
  .info{padding-top:36px}
  .name{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .float{animation:none}
  .card{animation:none; opacity:1; transform:none}
  .player{transition:none}
}

.fx-layer{position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none}
.amb-dot{position:absolute; font-size:14px; font-weight:700; color:#444; opacity:0; pointer-events:none;
  animation:pulseDot 3s ease-in-out infinite alternate}
@keyframes pulseDot{0%{opacity:.03; transform:scale(.7)} 100%{opacity:.5; transform:scale(1.1)}}

.floating-feather{position:absolute; width:24px; height:auto; opacity:0; pointer-events:none;
  animation:dropFeather 9s ease-in-out forwards}
@keyframes dropFeather{
  0%{opacity:0; transform:translate(0,-40px) rotate(0deg)}
  10%{opacity:.5}
  50%{opacity:.5; transform:translate(50px,calc(var(--fall,600px)*.5)) rotate(20deg)}
  85%{opacity:.3; transform:translate(85px,calc(var(--fall,600px)*.85)) rotate(35deg)}
  100%{opacity:0; transform:translate(110px,var(--fall,600px)) rotate(50deg)}
}

#dvd-text{position:fixed; z-index:99; pointer-events:none; opacity:0;
  font-family:"Outfit","Poppins",sans-serif; font-weight:800; font-size:22px; letter-spacing:6px;
  color:rgba(255,255,255,.15); text-shadow:0 4px 10px rgba(0,0,0,.8); transition:opacity 1s ease-in-out}

html.has-cursor, html.has-cursor *{cursor:none !important}
#custom-cursor{position:fixed; left:0; top:0; width:32px; height:32px; z-index:99999; pointer-events:none;
  image-rendering:pixelated; transition:filter .3s ease; will-change:transform}
#custom-cursor.clicking{filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #a78bfa) drop-shadow(0 0 32px #7c3aed)}

.cursor-feather{position:fixed; width:12px; height:auto; z-index:99998; pointer-events:none; opacity:0;
  animation:cursorFeatherFade var(--fd,.9s) ease-out forwards}
@keyframes cursorFeatherFade{
  0%{opacity:.85; transform:translate(0,0) rotate(var(--fstart)) scale(1)}
  100%{opacity:0; transform:translate(var(--fx),var(--fy)) rotate(var(--fend)) scale(.3)}
}
@media (prefers-reduced-motion:reduce){
  .amb-dot{animation:none; opacity:.15}
  .floating-feather,.cursor-feather{display:none}
}


.entry-screen{
  position:fixed; inset:0; z-index:100000; display:grid; place-items:center;
  background:#050506; color:rgba(255,255,255,.78);
  cursor:pointer; opacity:1; transition:opacity .65s ease, visibility .65s ease;
}
.entry-label{
  font-family:"Share Tech Mono",monospace; font-size:clamp(12px,2.8vw,15px);
  letter-spacing:.32em; padding-left:.32em;
  animation:entryPulse 2s ease-in-out infinite;
}
.entry-screen:focus-visible{outline:1px solid rgba(255,255,255,.55); outline-offset:-12px}
.entry-screen.leaving{opacity:0; visibility:hidden; pointer-events:none}
@keyframes entryPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.entry-label{animation:none}.entry-screen{transition:none}}