:root{
  --ok:#31c48d;--idle:#f0b232;--dnd:#f23f43;--off:#80848e;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.22,1.4,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f,"Inter",system-ui,sans-serif);
  background:var(--bg);color:var(--text);
  min-height:100svh;display:grid;place-items:center;padding:32px 18px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body[data-locked="1"]{overflow:hidden;height:100svh}
img,video,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--accent);color:#fff}

.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg-media{
  position:absolute;inset:-3%;width:106%;height:106%;
  max-width:none;max-height:none;object-fit:cover;
  filter:blur(var(--bg-blur)) brightness(var(--bg-brightness));
  opacity:var(--bg-opacity);
  transition:transform .5s var(--ease);will-change:transform;
}
.bg-grad{background:linear-gradient(145deg,var(--grad-from),var(--grad-to))}
.bg-flat{background:var(--bg)}
.bg-veil{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,transparent 12%,rgba(0,0,0,.5) 100%)}
body.dots .bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--dot-color) 26%,transparent) 1px,transparent 1px);
  background-size:4px 4px;opacity:.5}

.fx{position:fixed;inset:0;z-index:1;pointer-events:none}

.splash{
  position:fixed;inset:0;z-index:60;cursor:pointer;
  display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;
  background:#000;
  transition:opacity .8s var(--ease),visibility .8s;
}
.splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.splash.fading .splash-btn,.splash.fading .splash-foot{
  opacity:0;transition:opacity .28s ease-in}
.splash-btn{
  background:none;border:0;color:var(--text);cursor:pointer;
  font-family:inherit;font-size:15px;letter-spacing:.34em;text-transform:uppercase;
  padding:18px 30px;opacity:.86;transition:.5s var(--ease);
  animation:breathe 3s ease-in-out infinite;
}
.splash-btn:hover{opacity:1;letter-spacing:.44em;text-shadow:0 0 30px var(--accent)}
@keyframes breathe{50%{opacity:.5}}

.ribbon{
  position:fixed;top:0;left:0;right:0;z-index:50;padding:9px 16px;text-align:center;
  background:rgba(240,178,50,.14);border-bottom:1px solid rgba(240,178,50,.34);
  color:#f6d38a;font-size:12.5px;letter-spacing:.03em;backdrop-filter:blur(10px);
}

.wrap{position:relative;z-index:10;width:100%;min-height:100%;
  display:grid;place-items:center;
  overflow:visible clip;overflow-clip-margin:200px}
.card{
  position:relative;
  width:100%;max-width:var(--card-width);
  background:color-mix(in srgb,var(--card) calc(var(--card-opacity) * 100%),transparent);
  border:var(--card-bw) solid var(--border);
  border-radius:var(--card-radius);
  backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));
  --pad-y:clamp(24px,4.4vw,40px);
  --pad-x:clamp(24px,4.4vw,40px);
  padding:var(--pad-y) var(--pad-x);
  display:grid;gap:18px;justify-items:center;text-align:center;
  transition:transform .32s var(--ease),box-shadow .5s;

  will-change:transform;
  box-shadow:0 26px 80px -34px rgba(0,0,0,.9);
}
body.glow .card{box-shadow:0 26px 80px -34px rgba(0,0,0,.9),0 0 84px -26px var(--glow)}
body.al-left .card{justify-items:start;text-align:left}

.banner{
  position:relative;width:calc(100% + 2 * clamp(24px,4.4vw,40px));
  margin:calc(-1 * clamp(24px,4.4vw,40px)) 0 0;
  height:0;padding-bottom:var(--banner-h,34%);
  overflow:hidden;
  border-radius:calc(var(--card-radius) - var(--card-bw)) calc(var(--card-radius) - var(--card-bw)) 0 0;
}
.banner img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:var(--banner-fit,cover);object-position:center}
body.bf-contain .banner{background:color-mix(in srgb,var(--card) 60%,#000)}
.banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,
    color-mix(in srgb,var(--card) 72%,transparent) 82%,
    color-mix(in srgb,var(--card) 96%,transparent) 100%);
}
.card.has-banner .av{margin-top:calc(-1 * var(--av-lift,.5) * var(--av-size))}
.av{position:relative;width:var(--av-size,clamp(88px,17vw,116px));aspect-ratio:1;
  z-index:2;--av-r:50%;--av-size:clamp(88px,17vw,116px)}
.av img:not(.av-deco){display:block;width:100%;height:100%;object-fit:cover;
  border:0;border-radius:var(--av-r);background:var(--card);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}

.av-circle{--av-r:50%}
.av-rounded{--av-r:22%}
.av-square{--av-r:5px}
.av-dot{position:absolute;right:4%;bottom:4%;width:17%;aspect-ratio:1;border-radius:50%;
  border:2.5px solid var(--card);background:var(--off);
  transition:background .4s,inset .3s var(--ease);z-index:5}
.av-dot.online{background:var(--ok)}
.av-dot.idle{background:var(--idle)}
.av-dot.dnd{background:var(--dnd)}
.av-deco{position:absolute;left:50%;top:50%;
  width:var(--deco-scale,100%);height:var(--deco-scale,100%);
  translate:calc(-50% + var(--deco-x,0%)) calc(-50% + var(--deco-y,0%));
  object-fit:contain;background:none;border:0;border-radius:0;
  box-shadow:none;pointer-events:none;z-index:4}

.av.has-deco img:not(.av-deco){position:absolute;left:50%;top:50%;
  width:var(--deco-fit,76%);height:var(--deco-fit,76%);
  translate:-50% -50%}
.av.has-deco .av-dot{
  --in:calc((100% - var(--deco-fit,76%)) / 2);
  right:calc(var(--in) + 4%);bottom:calc(var(--in) + 4%);
  width:calc(var(--deco-fit,76%) * .17)}

.name{font-family:var(--fn,var(--f));font-size:var(--name-size);
  font-weight:var(--name-w,700);letter-spacing:var(--track,-.022em);
  line-height:1.08;text-wrap:balance;
  word-break:break-word}

.fx-rainbow{
  background:linear-gradient(90deg,#ff4d4d,#ffa64d,#ffe14d,#5cff8f,
             #4dd2ff,#8b5cff,#ff4dcf,#ff4d4d);
  background-size:400% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:rainbowRun calc(var(--fx-t,4s) * 1.5) linear infinite;
}

@keyframes rainbowRun{
  from{background-position:400% 0}
  to{background-position:0% 0}
}

.fx-fuzzy{animation:fuzzyShiver calc(var(--fx-t,4s) * .55) steps(1) infinite}
@keyframes fuzzyShiver{
  0%,100%{filter:blur(0);text-shadow:none}
  18%{filter:blur(.7px);
      text-shadow:1px 0 0 color-mix(in srgb,var(--accent) 60%,transparent),
                  -1px 0 0 rgba(255,255,255,.28)}
  36%{filter:blur(1.5px);
      text-shadow:-2px 0 0 color-mix(in srgb,var(--accent) 52%,transparent),
                  2px 0 0 rgba(255,255,255,.22)}
  54%{filter:blur(.3px);text-shadow:1px 0 0 rgba(255,255,255,.32)}
  72%{filter:blur(1.1px);
      text-shadow:-1px 0 0 color-mix(in srgb,var(--accent) 58%,transparent)}
  86%{filter:blur(.2px);text-shadow:none}
}

.fx-wave i{display:inline-block;font-style:normal;
  animation:nameWave calc(var(--fx-t,4s) * .6) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .055s)}
@keyframes nameWave{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-.2em)}
}

.fx-typewriter i.cur,.fx-shuffle i.cur{
  font-style:normal;font-weight:400;opacity:.85;
  animation:nameCaret .9s steps(1) infinite}
@keyframes nameCaret{0%,49%{opacity:.9}50%,100%{opacity:0}}

.fx-glow{
  animation:glowBreathe calc(var(--fx-t,4s) * .8) ease-in-out infinite;
  text-shadow:0 0 22px var(--name-glow),
              0 0 56px color-mix(in srgb,var(--name-glow) 55%,transparent);
}
@keyframes glowBreathe{
  0%,100%{text-shadow:0 0 12px var(--name-glow),
                      0 0 30px color-mix(in srgb,var(--name-glow) 38%,transparent)}
  50%{text-shadow:0 0 30px var(--name-glow),
                  0 0 74px color-mix(in srgb,var(--name-glow) 72%,transparent),
                  0 0 128px color-mix(in srgb,var(--name-glow) 32%,transparent)}
}
.fx-gradient{background:linear-gradient(100deg,var(--grad-from),var(--grad-to),var(--grad-from));
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:slide var(--fx-t,4s) linear infinite}
@keyframes slide{to{background-position:220% 0}}
.fx-chroma{background:linear-gradient(90deg,#ff4d4d,#ffd24d,#4dff88,#4dd2ff,#b84dff,#ff4d4d);
  background-size:600% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:slide calc(var(--fx-t,4s) * 1.6) linear infinite}
.fx-sparkle{position:relative}

.fx-sparkle::after{content:"";position:absolute;inset:-14% -8%;pointer-events:none;
  background:radial-gradient(2px 2px at 18% 32%,#fff,transparent),
             radial-gradient(2px 2px at 72% 20%,#fff,transparent),
             radial-gradient(1.6px 1.6px at 44% 78%,#fff,transparent),
             radial-gradient(1.6px 1.6px at 88% 66%,#fff,transparent),
             radial-gradient(1.8px 1.8px at 8% 70%,#fff,transparent),
             radial-gradient(1.4px 1.4px at 58% 46%,#fff,transparent),
             radial-gradient(2.2px 2.2px at 33% 12%,#fff,transparent),
             radial-gradient(1.5px 1.5px at 95% 34%,#fff,transparent);
  background-size:170% 170%;
  animation:twinkle calc(var(--fx-t,4s) * .55) ease-in-out infinite,
            sparkDrift calc(var(--fx-t,4s) * 2.6) linear infinite}
@keyframes sparkDrift{
  0%{background-position:0% 0%}
  100%{background-position:170% 130%}
}
@keyframes twinkle{0%,100%{opacity:.18}35%{opacity:.95}55%{opacity:.4}75%{opacity:1}}
.fx-glitch{position:relative}
.fx-glitch::before,.fx-glitch::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;clip-path:inset(0 0 0 0)}
.fx-glitch{animation:glShift calc(var(--fx-t,4s) * .55) steps(1) infinite}
.fx-glitch::before{color:#ff2d55;animation:gl1 calc(var(--fx-t,4s) * .42) steps(1) infinite}
.fx-glitch::after{color:#2dd4ff;animation:gl2 calc(var(--fx-t,4s) * .37) steps(1) infinite}

@keyframes gl1{
  0%,100%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
  6%{clip-path:inset(6% 0 76% 0);transform:translate(-4px,0)}
  13%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
  31%{clip-path:inset(50% 0 32% 0);transform:translate(5px,1px)}
  38%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
  57%{clip-path:inset(26% 0 58% 0);transform:translate(-6px,-1px)}
  64%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
  83%{clip-path:inset(72% 0 10% 0);transform:translate(3px,0)}
  89%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
}
@keyframes gl2{
  0%,100%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
  9%{clip-path:inset(64% 0 16% 0);transform:translate(5px,-1px)}
  17%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
  36%{clip-path:inset(18% 0 66% 0);transform:translate(-5px,1px)}
  44%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
  66%{clip-path:inset(42% 0 40% 0);transform:translate(6px,0)}
  73%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
  91%{clip-path:inset(84% 0 4% 0);transform:translate(-3px,-1px)}
  96%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}
}

@keyframes glShift{
  0%,44%,100%{transform:translate(0,0)}
  45%{transform:translate(-2px,1px)}
  46%{transform:translate(3px,-1px)}
  47%{transform:translate(-1px,0)}
  48%{transform:translate(0,0)}
  78%{transform:translate(0,0)}
  79%{transform:translate(2px,1px)}
  80%{transform:translate(-2px,0)}
  81%{transform:translate(0,0)}
}

.bio{color:var(--muted);font-size:14.5px;line-height:1.62;max-width:46ch;
  white-space:pre-wrap;text-wrap:pretty;letter-spacing:.002em}
.cur{display:inline-block;width:2px;height:1.05em;border-radius:1px;
  background:var(--accent);margin-left:3px;vertical-align:-2px;
  box-shadow:0 0 9px color-mix(in srgb,var(--accent) 70%,transparent);
  animation:blink 1.05s steps(2) infinite}
.bio.erasing .cur{animation:none;opacity:1}
@keyframes blink{50%{opacity:0}}

.links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.links{row-gap:var(--gap-y,8px);column-gap:var(--gap-x,8px);
  transform:translate(var(--link-x,0px),var(--link-y,0px))}
body.al-left .links{justify-content:flex-start}
.link{display:inline-flex;align-items:center;gap:9px;color:var(--text);
  transition:transform .3s var(--spring),color .3s,border-color .3s,background .3s}
.link svg{width:21px;height:21px;flex:0 0 auto;fill:currentColor;stroke:none}
.links-icons .link{width:42px;height:42px;justify-content:center;border-radius:50%;
  border:1px solid var(--border);background:color-mix(in srgb,var(--text) 5%,transparent)}
.links-icons .link span{display:none}
.links-buttons .link,.links-both .link{padding:10px 17px;border-radius:11px;
  border:1px solid var(--border);background:color-mix(in srgb,var(--text) 5%,transparent);
  font-size:13.5px;font-weight:500}
.links-buttons .link svg{display:none}
.link:hover{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
body.lh-lift .link:hover{transform:translateY(-3px);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
body.lh-glow .link:hover{box-shadow:0 0 24px -4px var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
body.lh-fill .link:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
body.lh-none .link:hover{background:transparent}

.presence{width:100%}
.presence-in{display:grid;gap:0;
  border:1px solid var(--border);border-radius:13px;overflow:hidden;
  background:color-mix(in srgb,var(--text) 4%,transparent)}
.presence-in > * + *{border-top:1px solid var(--border)}
.pr{display:flex;align-items:center;gap:11px;text-align:left;padding:11px 13px;min-width:0}
.pr-art{position:relative;flex:0 0 auto;width:46px;height:46px}
.pr-art img{width:100%;height:100%;border-radius:9px;object-fit:cover;
  background:color-mix(in srgb,var(--text) 8%,transparent)}
.pr-art .sm{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;
  border-radius:50%;border:2px solid var(--card)}
.pr-txt{min-width:0;flex:1;display:grid;gap:2px;overflow:hidden}
.pr-top{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.pr-sp{width:15px;height:15px;flex:0 0 auto;fill:#1db954;stroke:none}
.pr-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-times{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);
  font-variant-numeric:tabular-nums;margin-top:3px}
.pr-bar{height:3px;border-radius:3px;margin-top:5px;overflow:hidden;
  background:color-mix(in srgb,var(--text) 15%,transparent)}
.pr-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--ok)}
.pr-empty{font-size:12px;color:var(--muted);padding:11px 13px;letter-spacing:.03em}
.pr-note{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;line-height:1.5;text-align:center;
  color:var(--muted);padding:11px 13px;min-width:0}
.pr-note img{width:16px;height:16px;flex:0 0 auto;border-radius:4px}
.pr-note b{font-weight:400;flex:0 0 auto}
.pr-note span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.guild{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:1px solid var(--border);border-radius:13px;padding:10px 13px;
  background:color-mix(in srgb,var(--text) 4%,transparent);transition:.3s var(--ease)}
.guild:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-2px)}
.guild-ico{width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  background:color-mix(in srgb,var(--text) 8%,transparent)}
.guild-txt{display:grid;gap:2px;min-width:0}
.guild-txt strong{font-size:13.5px;font-weight:600}
.guild-txt em{font-style:normal;font-size:11.5px;color:var(--muted);
  display:flex;align-items:center;gap:5px}
.gd{width:7px;height:7px;border-radius:50%;background:var(--off);display:inline-block}
.gd.on{background:var(--ok)}

.player{width:100%;position:relative;border:1px solid var(--border);border-radius:13px;
  padding:11px 13px;background:color-mix(in srgb,var(--text) 4%,transparent);overflow:hidden}
.viz{position:absolute;inset:0;width:100%;height:100%;opacity:.34;pointer-events:none}
.player-row{position:relative;display:flex;align-items:center;gap:11px;text-align:left}
.player-art{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.player-btn{width:36px;height:36px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:color-mix(in srgb,var(--text) 8%,transparent);
  color:var(--text);display:grid;place-items:center;transition:.3s var(--ease)}
.player-btn svg{width:15px;height:15px;fill:currentColor;stroke:none}
.player-btn.sm{width:30px;height:30px}
.player-btn.sm svg{width:13px;height:13px}
.player-btn:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.06)}
.player-meta{min-width:0;flex:1;display:grid;gap:1px}
.player-meta strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-meta em{font-style:normal;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-vol{width:66px;flex:0 0 auto;accent-color:var(--accent);height:3px;cursor:pointer}
.player-bar{position:relative;height:3px;border-radius:3px;margin-top:9px;cursor:pointer;
  background:color-mix(in srgb,var(--text) 15%,transparent)}
.player-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent)}

.meta{display:flex;gap:16px;justify-content:center;width:100%;
  color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
body.al-left .meta{justify-content:flex-start}
.meta-i{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.meta-i svg{width:14px;height:14px}

.ctrail{position:fixed;inset:0;z-index:5;pointer-events:none;max-width:none}

@media (max-width:520px){
  .card{--pad-y:22px;--pad-x:18px;gap:15px}
  .player-vol{display:none}
}

@media (prefers-reduced-motion:reduce){
  body:not(.motion-on) *:not(.sh-t):not(.sh-b):not(.sf-mark):not(.sf-logo):not(.sf-word):not(.sf-cta),
  body:not(.motion-on) *::before,
  body:not(.motion-on) *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

.shutter{position:fixed;inset:0;z-index:120;pointer-events:none;contain:layout paint}
.shutter i{position:absolute;left:0;right:0;height:51%;display:block;background:#000;
  will-change:transform;backface-visibility:hidden}
.shutter .sh-t{top:0;transform:translate3d(0,-100%,0)}
.shutter .sh-b{bottom:0;transform:translate3d(0,100%,0)}

.shutter.closed i{transform:translate3d(0,0,0)}
.shutter.open .sh-t{animation:shTout 1.25s cubic-bezier(.62,0,.2,1) forwards}
.shutter.open .sh-b{animation:shBout 1.25s cubic-bezier(.62,0,.2,1) forwards}

@keyframes shTout{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-100%,0)}}
@keyframes shBout{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,100%,0)}}

.splash-foot{padding:0 20px clamp(30px,6vh,66px);pointer-events:none;--sf-recenter:44px}
.sf-stage{position:relative;display:grid;place-items:center;
  min-height:clamp(40px,4.6vw,54px);min-width:min(90vw,240px)}
.sf-mark,.sf-cta{grid-area:1/1;display:flex;align-items:center;justify-content:center}

.sf-mark{gap:clamp(7px,.9vw,11px);opacity:0;will-change:transform,opacity;
  animation:sfMark 5.6s cubic-bezier(.33,0,.2,1) forwards}

.sf-logo{position:relative;z-index:2;display:grid;place-items:center;flex:0 0 auto}
.sf-logo img{width:clamp(27px,3vw,38px);height:auto}

.sf-wrap{position:relative;z-index:1;flex:0 0 auto;overflow:hidden;
  padding:4px 2px 4px 0;margin:-4px 0}

.sf-word{
  display:block;
  font-family:"Cinzel",Georgia,serif;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;text-transform:uppercase;
  font-size:clamp(13px,1.5vw,19px);line-height:1.15;
  background:linear-gradient(176deg,#fbf7ff 2%,#e6d6ff 20%,#b491e8 40%,
    #8b5cf6 52%,#e9dcff 62%,#fff 70%,#a97fe0 86%,#5b3a8c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  will-change:transform;
  animation:sfWord 5.6s cubic-bezier(.33,0,.2,1) forwards;
}

.sf-cta{gap:9px;opacity:0;color:rgba(255,255,255,.72);
  font-size:12.5px;font-weight:500;letter-spacing:.02em;white-space:nowrap;
  animation:sfCta 5.6s cubic-bezier(.33,0,.2,1) forwards}
.sf-cta svg{width:14px;height:14px;overflow:visible;flex:0 0 auto}
.sf-cta .mo{fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sf-cta .mb{fill:currentColor;stroke:none}
.splash:hover .sf-cta{color:#fff}

@keyframes sfMark{
  0%{opacity:0;transform:translate3d(0,4px,0)}
  7%,34%{opacity:1;transform:translate3d(0,0,0)}
  54%,66%{opacity:1;transform:translate3d(var(--sf-recenter),0,0)}
  82%,100%{opacity:0;transform:translate3d(var(--sf-recenter),-11px,0)}
}
@keyframes sfWord{
  0%,34%{transform:translate3d(0,0,0)}
  54%,100%{transform:translate3d(-102%,0,0)}
}
@keyframes sfCta{
  0%,84%{opacity:0;transform:translate3d(0,8px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

.fx-shine{
  background:linear-gradient(100deg,var(--text) 0%,var(--text) 38%,#fff 48%,
    var(--accent) 54%,var(--text) 64%,var(--text) 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:shine var(--fx-t,4s) linear infinite}
@keyframes shine{to{background-position:280% 0}}

.fx-neon{color:var(--text);animation:neon calc(var(--fx-t,4s) * .85) ease-in-out infinite}
@keyframes neon{
  0%,100%{text-shadow:0 0 6px var(--name-glow),0 0 22px var(--name-glow),0 0 46px var(--name-glow)}
  43%{text-shadow:0 0 4px var(--name-glow),0 0 12px var(--name-glow),0 0 26px var(--name-glow)}
  46%{text-shadow:none}
  48%{text-shadow:0 0 6px var(--name-glow),0 0 24px var(--name-glow)}
  51%{text-shadow:none}
  54%{text-shadow:0 0 7px var(--name-glow),0 0 26px var(--name-glow),0 0 52px var(--name-glow)}
}

.fx-pulse{animation:npulse calc(var(--fx-t,4s) * .7) ease-in-out infinite}
@keyframes npulse{
  0%,100%{text-shadow:0 0 14px color-mix(in srgb,var(--name-glow) 55%,transparent);
    transform:scale(1)}
  50%{text-shadow:0 0 34px var(--name-glow),0 0 70px color-mix(in srgb,var(--name-glow) 45%,transparent);
    transform:scale(1.035)}
}

.fx-float{animation:nfloat calc(var(--fx-t,4s) * 1.05) ease-in-out infinite}
@keyframes nfloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

body.lay-saito .card{background:none;border:0;box-shadow:none;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;gap:13px;max-width:min(92vw,540px);
  justify-items:center;text-align:center}
body.lay-saito .banner,body.lay-saito .guilds{display:none}
body.lay-saito .presence .pr:not(.pr-spotify){display:none}
body.lay-saito .presence:not(:has(.pr-spotify)){display:none}
body.lay-saito .av{--av-size:clamp(96px,18vw,124px)}
body.lay-saito .bio{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;
  letter-spacing:.16em;color:var(--muted);min-height:1.5em}
body.lay-saito .meta{border-top:0;padding-top:2px;justify-content:center}
body.lay-saito .presence,body.lay-saito .player{margin-top:10px}
body.lay-saito{--dock:calc(var(--link-size,42px) + clamp(46px,10vh,96px))}
body.lay-saito{padding:0;min-height:100svh;height:100svh;overflow:hidden}
body.lay-saito .wrap{padding:clamp(18px,4vh,40px) 18px var(--dock);
  height:100svh;align-content:center}
body.lay-saito .links{position:fixed;left:0;right:0;bottom:clamp(20px,4.5vh,46px);
  z-index:4;justify-content:center;padding:0 18px;pointer-events:none}
body.lay-saito .links .link{pointer-events:auto}

body.lay-compact{--avw:clamp(68px,10vw,88px)}
body.lay-compact .card{
  grid-template-columns:var(--avw) minmax(0,1fr);
  align-items:center;column-gap:clamp(12px,1.4vw,18px);row-gap:10px;
  justify-items:start;text-align:left;
  max-width:min(100%,var(--card-width))}
body.lay-compact .banner{grid-column:1/-1}
body.lay-compact .av{grid-column:1;align-self:center;--av-size:var(--avw)}
body.lay-compact .idw{display:flex;flex-direction:column;gap:0;
  grid-column:2;align-self:center;min-width:0;justify-self:start;
  margin-top:var(--name-gap,0px)}
body.lay-compact .name{line-height:1.05}
body.lay-compact .dtag{margin-top:1px}
body.lay-compact .bio{grid-column:1/-1;justify-self:start;margin-top:0}
body.lay-compact .links,body.lay-compact .presence,body.lay-compact .guilds,
body.lay-compact .player,body.lay-compact .meta{grid-column:1/-1;width:100%}
body.lay-compact .links,body.lay-compact .meta{justify-content:flex-start}

@media (max-width:520px){
  body.lay-compact .card{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  body.lay-compact .idw{align-items:center;text-align:center;grid-column:1}
  body.lay-compact .bio,body.lay-compact .links,
  body.lay-compact .presence,body.lay-compact .guilds,body.lay-compact .player,
  body.lay-compact .meta{grid-column:1}
  body.lay-compact .links,body.lay-compact .meta{justify-content:center}
}

body.lay-minimal .av{display:none}
body.lay-minimal .card{gap:14px}

body.lay-wide .card{max-width:min(calc(var(--card-width) * 1.5),860px)}
body.lay-wide .links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));width:100%}
body.lay-wide .links-icons .link{width:auto;border-radius:11px;gap:9px}
body.lay-wide .links-icons .link span{display:inline}

body.lay-split .card{
  max-width:min(calc(var(--card-width) * 1.66),980px);
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  grid-auto-flow:row dense;
  align-items:start;column-gap:clamp(16px,2.4vw,30px);row-gap:14px;
  justify-items:stretch;
}
body.lay-split .banner{grid-column:1/-1}

body.lay-split .pane{grid-column:1;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:13px;min-width:0;align-self:start}
body.lay-split .idw{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:3px;min-width:0;width:100%}
body.lay-split .bio{max-width:100%}
body.lay-split .links{justify-content:center;width:100%}
body.lay-split .meta{justify-content:center;width:100%}

body.lay-split .mods{grid-column:2;align-self:start;
  display:flex;flex-direction:column;gap:12px;min-width:0;width:100%}

@media (max-width:720px){
  body.lay-split .card{grid-template-columns:minmax(0,1fr)}
  body.lay-split .pane,body.lay-split .mods{grid-column:1}
}

.link{--brand:var(--text)}
.link[data-pf="discord"]{--brand:#5865f2}
.link[data-pf="x"],.link[data-pf="threads"]{--brand:#f5f5f5}
.link[data-pf="twitter"]{--brand:#1d9bf0}
.link[data-pf="instagram"]{--brand:#e1306c}
.link[data-pf="facebook"]{--brand:#1877f2}
.link[data-pf="snapchat"]{--brand:#fffc00}
.link[data-pf="tiktok"]{--brand:#25f4ee}
.link[data-pf="reddit"]{--brand:#ff4500}
.link[data-pf="bluesky"]{--brand:#0085ff}
.link[data-pf="youtube"]{--brand:#ff0033}
.link[data-pf="twitch"]{--brand:#9146ff}
.link[data-pf="kick"]{--brand:#53fc18}
.link[data-pf="spotify"]{--brand:#1db954}
.link[data-pf="soundcloud"]{--brand:#ff5500}
.link[data-pf="applemusic"]{--brand:#fa233b}
.link[data-pf="lastfm"]{--brand:#d51007}
.link[data-pf="steam"]{--brand:#66c0f4}
.link[data-pf="roblox"]{--brand:#e2231a}
.link[data-pf="epicgames"]{--brand:#f5f5f5}
.link[data-pf="playstation"]{--brand:#0070d1}
.link[data-pf="xbox"]{--brand:#107c10}
.link[data-pf="github"],.link[data-pf="instrument"]{--brand:#f0f6fc}
.link[data-pf="gitlab"]{--brand:#fc6d26}
.link[data-pf="telegram"]{--brand:#2aabee}
.link[data-pf="whatsapp"]{--brand:#25d366}
.link[data-pf="pinterest"]{--brand:#e60023}
.link[data-pf="linkedin"]{--brand:#0a66c2}
.link[data-pf="behance"]{--brand:#1769ff}
.link[data-pf="patreon"]{--brand:#f96854}
.link[data-pf="kofi"]{--brand:#ff5e5b}
.link[data-pf="paypal"]{--brand:#00457c}
.link[data-pf="cashapp"]{--brand:#00d632}
.link[data-pf="bitcoin"]{--brand:#f7931a}
.link[data-pf="osu"]{--brand:#ff66aa}
.link[data-pf="email"]{--brand:#eab308}
.link[data-pf="website"]{--brand:#38bdf8}

body.lk-brand .link{color:var(--brand)}
body.lk-accent .link{color:var(--accent)}
body.lk-brand .links-icons .link,
body.lk-accent .links-icons .link{
  border-color:color-mix(in srgb,currentColor 34%,transparent);
  background:color-mix(in srgb,currentColor 11%,transparent)}
body.lk-glow .links-icons .link{
  box-shadow:0 0 20px -4px color-mix(in srgb,currentColor 70%,transparent),
             inset 0 0 14px -8px currentColor}
body.lk-glow .links-icons .link:hover{
  box-shadow:0 0 30px -2px currentColor,inset 0 0 18px -6px currentColor}
body.lk-glow .link svg{filter:drop-shadow(0 0 6px color-mix(in srgb,currentColor 65%,transparent))}
.links-icons .link{width:var(--link-size,42px);height:var(--link-size,42px)}
.links-icons .link svg{width:calc(var(--link-size,42px) * .5);height:calc(var(--link-size,42px) * .5)}

body.cs-glass .card{
  background:color-mix(in srgb,var(--card) calc(var(--card-opacity) * 62%),transparent);
  border:var(--card-bw) solid color-mix(in srgb,var(--text) 14%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent),
             0 24px 70px -28px rgba(0,0,0,calc(var(--card-shadow,.34) * 2))}
body.cs-outline .card{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:var(--card-bw) solid var(--border);
  box-shadow:0 24px 70px -30px rgba(0,0,0,calc(var(--card-shadow,.34) * 2))}
body.cs-none .card{background:none;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
body.cs-solid .card{
  box-shadow:0 24px 70px -28px rgba(0,0,0,calc(var(--card-shadow,.34) * 2))}

.pr-spotify{display:block;padding:12px 13px 11px}
.pr-head{display:flex;align-items:center;gap:7px;margin-bottom:10px;
  font-size:9.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted)}
.pr-head .pr-sp{width:21px;height:21px;flex:0 0 auto;fill:#1db954;stroke:none;
  filter:drop-shadow(0 0 3px rgba(29,185,84,.45));
  animation:prLive 2.4s ease-in-out infinite}
@keyframes prLive{50%{opacity:.6}}
.pr-body{display:flex;align-items:center;gap:11px;min-width:0}
.pr-spotify .pr-art{width:52px;height:52px}
.pr-spotify .pr-txt{gap:3px}
.pr-spotify .pr-name{white-space:normal;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr-spotify .pr-bar{margin-top:11px}
.pr-spotify .pr-times{margin-top:5px}

.links-icons .link{border:0;background:none;box-shadow:none}
body.lk-brand .links-icons .link,
body.lk-accent .links-icons .link{border:0;background:none}
body.lk-glow .links-icons .link{box-shadow:none}
body.lk-glow .links-icons .link:hover{box-shadow:none}
body.lk-glow .link svg{
  filter:drop-shadow(0 0 calc(4px * var(--lglow,.45))
           color-mix(in srgb,currentColor calc(var(--lglow,.45) * 90%),transparent))
         drop-shadow(0 0 calc(13px * var(--lglow,.45))
           color-mix(in srgb,currentColor calc(var(--lglow,.45) * 55%),transparent));
  transition:filter .28s var(--ease)}
body.lk-glow .link:hover svg{
  filter:drop-shadow(0 0 calc(6px * var(--lglow,.45)) currentColor)
         drop-shadow(0 0 calc(20px * var(--lglow,.45))
           color-mix(in srgb,currentColor calc(var(--lglow,.45) * 70%),transparent))}
.links-icons .link svg{width:calc(var(--link-size,42px) * .62);
  height:calc(var(--link-size,42px) * .62)}

body.lay-saito .card{background:none!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;
  transform:none!important;filter:none!important;perspective:none!important;
  will-change:auto!important;transform-style:flat!important;contain:none!important}
body.lay-saito .wrap{transform:none!important;filter:none!important;
  will-change:auto!important;transform-style:flat!important}
body.lay-saito .av{filter:none}
body.lay-saito .meta{border-top:0}
body.lay-saito .links{bottom:clamp(20px,4.5vh,46px)}

body.vs-pill .meta-i{padding:6px 13px;border-radius:999px;
  background:color-mix(in srgb,var(--text) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  transition:border-color .3s,background .3s}
body.vs-pill .meta-i:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
body.vs-outline .meta-i{padding:6px 13px;border-radius:999px;background:none;
  border:1px solid color-mix(in srgb,var(--text) 20%,transparent)}
body.vs-outline .meta-i:hover{border-color:var(--accent);color:var(--text)}
body.vs-plain .meta-i{padding:0;border:0;background:none}

.cur-block{width:.55em;height:1.02em;border-radius:2px;background:var(--accent);
  vertical-align:-3px;opacity:.85}
.cur-underscore{width:.62em;height:2px;border-radius:2px;background:var(--accent);
  vertical-align:1px;box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}
.cur-none{display:none}

.bgwave{position:fixed;left:0;right:0;top:50%;translate:0 -50%;
  width:100%;height:var(--wave-h,26vh);z-index:1;pointer-events:none;opacity:.7}

.cur,.cur-block,.cur-underscore{background:var(--cur-color,var(--accent))}
.cur{box-shadow:0 0 9px color-mix(in srgb,var(--cur-color,var(--accent)) 70%,transparent)}
.cur-underscore{box-shadow:0 0 8px color-mix(in srgb,var(--cur-color,var(--accent)) 70%,transparent)}

.name{margin-top:var(--name-gap,0px)}

.guilds{display:grid;gap:9px;width:100%}
.guilds:not(:has(.guild:not([hidden]))){display:none}

.idw{display:contents}

.dtag{font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  letter-spacing:.1em;color:var(--muted);min-height:1.3em}
.dt-at{opacity:.55}
.dt-name{color:var(--text);opacity:.86}
.dtag .cur{height:.95em}

.snd{
  position:fixed;z-index:60;display:flex;align-items:center;
  height:44px;width:44px;--pill:color-mix(in srgb,var(--card) 88%,#000);
  background:var(--pill);border:1px solid var(--border);border-radius:13px;
  overflow:hidden;
  transition:width .44s cubic-bezier(.65,0,.35,1),
             border-color .35s ease,background .35s ease;
}
.snd.sp-tl{top:clamp(14px,2.2vh,22px);left:clamp(14px,2.2vw,22px)}
.snd.sp-tr{top:clamp(14px,2.2vh,22px);right:clamp(14px,2.2vw,22px)}
.snd.sp-bl{bottom:clamp(14px,2.2vh,22px);left:clamp(14px,2.2vw,22px)}
.snd.sp-br{bottom:clamp(14px,2.2vh,22px);right:clamp(14px,2.2vw,22px)}
.snd.open{width:194px;transition-duration:.62s;
  transition-timing-function:cubic-bezier(.16,1,.3,1);
  border-color:color-mix(in srgb,var(--snd,var(--accent)) 45%,var(--border))}
.snd-btn{position:relative;z-index:2;flex:0 0 44px;width:44px;height:44px;
  display:grid;place-items:center;cursor:pointer;border:0;
  background:var(--pill);color:var(--text);transition:color .28s ease}
.snd-btn svg{width:22px;height:22px;overflow:visible}
.snd-btn .bd{fill:currentColor;stroke:none}
.snd-btn .w1,.snd-btn .w2,.snd-btn .x1,.snd-btn .x2{
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .22s ease}
.snd[data-vol="lo"] .w1{opacity:1}
.snd[data-vol="hi"] .w1,.snd[data-vol="hi"] .w2{opacity:1}
.snd[data-vol="off"] .x1,.snd[data-vol="off"] .x2{opacity:1}
.snd-btn:hover{color:var(--snd,var(--accent))}
.snd[data-vol="off"] .snd-btn{color:var(--muted)}
.snd-slot{position:relative;z-index:1;flex:1 0 auto;width:152px;
  display:flex;align-items:center;padding:0 18px 0 6px;
  transform:translateX(-150px);
  transition:transform .42s cubic-bezier(.65,0,.35,1)}
.snd.open .snd-slot{transform:none;
  transition-duration:.68s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
.snd-range{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  margin:0;padding:0;background:transparent;border:0;outline:none;
  cursor:pointer;touch-action:none}
.snd-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;border:0;
  background:linear-gradient(90deg,var(--snd,var(--accent)) var(--p,34%),
    color-mix(in srgb,var(--text) 20%,transparent) var(--p,34%))}
.snd-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  margin-top:-5px;width:14px;height:14px;border-radius:50%;background:#fff;
  border:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.55);
  transition:transform .18s var(--ease)}
.snd-range:hover::-webkit-slider-thumb{transform:scale(1.15)}
.snd-range::-moz-range-track{height:4px;border-radius:4px;border:0;
  background:color-mix(in srgb,var(--text) 20%,transparent)}
.snd-range::-moz-range-progress{height:4px;border-radius:4px;background:var(--snd,var(--accent))}
.snd-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.55)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.player.pb-cover,.player.pb-blur{position:relative;isolation:isolate}
.player-bgi{display:none}
.player.pb-cover .player-bgi,.player.pb-blur .player-bgi{display:block;
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  object-fit:cover;opacity:.4}
.player.pb-blur .player-bgi{filter:blur(18px) saturate(1.25);opacity:.55;scale:1.15}
.player.pb-cover::after,.player.pb-blur::after{content:"";position:absolute;inset:0;
  z-index:-1;background:linear-gradient(180deg,
    color-mix(in srgb,var(--card) 55%,transparent),
    color-mix(in srgb,var(--card) 88%,transparent))}

.player.ps-minimal{padding:11px 13px 13px}
.player.ps-minimal .player-row{gap:12px}
.player.ps-minimal .player-art{width:46px;height:46px}
.player.ps-minimal .player-meta strong{font-size:13px}
.player.ps-minimal .player-bar{height:3px;margin-top:7px}
.player.ps-minimal .player-times{margin-top:4px;font-size:10px}

.player.ps-structured{padding:14px}
.player.ps-structured .player-row{gap:15px}
.player.ps-structured .player-art{width:64px;height:64px;border-radius:11px}
.player.ps-structured .player-meta strong{font-size:15px}
.player.ps-structured .player-bar{height:6px;border-radius:6px;margin-top:12px}
.player.ps-structured .player-times{margin-top:6px;font-size:11px}

.player.ps-songtext .player-art{display:none}
.player.ps-songtext .player-row{gap:12px}
.player.ps-songtext .player-meta strong{font-size:13.5px}
.player.ps-songtext .player-bar{margin-top:10px}

.dtag.done .cur{opacity:0;animation:none;transition:opacity .4s ease}

.card,.card > *{min-width:0}
.guild,.pr,.pr-body,.player-row{min-width:0}
.guild-txt,.pr-txt,.player-meta{min-width:0;overflow:hidden}
.guild-txt strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.guild-txt em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-note span,.pr-name,.pr-sub{min-width:0}
.presence,.guilds,.player,.links,.meta{max-width:100%}
.bio{max-width:100%;overflow-wrap:anywhere}
.name{overflow-wrap:anywhere}
.dtag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.idw{min-width:0;max-width:100%}

.player{position:relative;overflow:hidden}
.player-row{display:flex;align-items:center;gap:14px;min-width:0}
.player-art{width:56px;height:56px;border-radius:9px;object-fit:cover;flex:0 0 auto;
  background:color-mix(in srgb,var(--text) 8%,transparent)}
.player-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  align-items:stretch;gap:1px;width:100%}

.player-meta strong{font-size:15px;font-weight:700;letter-spacing:-.01em;
  line-height:1.25;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-meta em{font-style:normal;font-size:11.5px;font-weight:500;
  letter-spacing:.01em;line-height:1.35;
  color:color-mix(in srgb,var(--muted) 88%,transparent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-bar{position:relative;width:100%;height:4px;border-radius:4px;margin-top:9px;cursor:pointer;
  background:color-mix(in srgb,var(--text) 16%,transparent)}
.player-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);
  transition:width .18s linear}
.player-times{display:flex;justify-content:space-between;width:100%;margin-top:5px;
  font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.player-times span{flex:0 0 auto}
.player-keys{display:flex;align-items:center;gap:6px;flex:0 0 auto}

body.lay-compact .banner,body.lay-split .banner,body.lay-wide .banner{
  width:calc(100% + 2 * clamp(24px,4.4vw,40px));
  margin-left:calc(-1 * clamp(24px,4.4vw,40px));
  margin-right:calc(-1 * clamp(24px,4.4vw,40px))}
body.lay-saito .banner,body.lay-minimal .banner{display:none}

body.lay-compact .card.has-banner .av,
body.lay-split .card.has-banner .av,
body.lay-wide .card.has-banner .av,
body.lay-stacked .card.has-banner .av{
  margin-top:calc(-1 * var(--av-lift,.5) * var(--av-size))}
.banner{background:color-mix(in srgb,var(--card) 55%,#000)}

.player-keys{display:none}
.player-row{gap:14px}

.pane,.mods{display:contents}
.mods:empty{display:none}
body.lay-compact .pane,body.lay-compact .mods,
body.lay-wide .pane,body.lay-wide .mods,
body.lay-stacked .pane,body.lay-stacked .mods,
body.lay-minimal .pane,body.lay-minimal .mods,
body.lay-saito .pane,body.lay-saito .mods{display:contents}

.fx-metal{
  background:linear-gradient(100deg,
    #6b6b78 0%,#9c9cae 18%,#e9e9f2 32%,
    #ffffff 42%,#e9e9f2 50%,#9c9cae 64%,#6b6b78 82%,#9c9cae 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep var(--fx-t,4s) linear infinite;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))}

.fx-gold{
  background:linear-gradient(100deg,
    #7a5a12 0%,#c99b2e 16%,#f5d879 30%,
    #fffbe8 42%,#f5d879 52%,#c99b2e 66%,#7a5a12 84%,#c99b2e 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep var(--fx-t,4s) linear infinite;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}

.fx-holo{
  background:linear-gradient(100deg,
    #ff5ec4,#8b5cf6,#38bdf8,#4ade80,#facc15,#ff5ec4);
  background-size:320% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep calc(var(--fx-t,4s) * 1.6) linear infinite;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 40%,transparent))}

.fx-fire{
  background:linear-gradient(0deg,#7f1d1d 0%,#dc2626 26%,#f97316 52%,#fbbf24 76%,#fff7cf 100%);
  background-size:100% 260%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rise calc(var(--fx-t,4s) * .6) linear infinite;
  filter:drop-shadow(0 0 16px rgba(249,115,22,.45))}

.fx-ice{
  background:linear-gradient(100deg,
    #0e4f6e 0%,#38bdf8 22%,#bae6fd 38%,#ffffff 48%,#bae6fd 58%,#38bdf8 76%,#0e4f6e 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep var(--fx-t,4s) linear infinite;
  filter:drop-shadow(0 0 15px rgba(56,189,248,.42))}

.fx-outline{
  color:transparent;-webkit-text-stroke:1.6px var(--accent);
  animation:pulseStroke calc(var(--fx-t,4s) * .7) ease-in-out infinite}
@keyframes pulseStroke{
  0%,100%{-webkit-text-stroke-color:var(--accent);
    filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 45%,transparent))}
  50%{-webkit-text-stroke-color:var(--text);
    filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 70%,transparent))}
}

.fx-emboss{color:var(--text);
  animation:embossBreathe calc(var(--fx-t,4s) * 1.1) linear infinite}
@keyframes embossBreathe{
  0%,100%{text-shadow:-1px -1px 0 rgba(0,0,0,.8),
                      1px 1px 0 color-mix(in srgb,var(--text) 50%,transparent),
                      0 3px 7px rgba(0,0,0,.6)}
  25%{text-shadow:1px -1px 0 rgba(0,0,0,.8),
                  -1px 1px 0 color-mix(in srgb,var(--text) 50%,transparent),
                  0 3px 7px rgba(0,0,0,.6)}
  50%{text-shadow:1px 1px 0 rgba(0,0,0,.8),
                  -1px -1px 0 color-mix(in srgb,var(--text) 50%,transparent),
                  0 3px 7px rgba(0,0,0,.6)}
  75%{text-shadow:-1px 1px 0 rgba(0,0,0,.8),
                  1px -1px 0 color-mix(in srgb,var(--text) 50%,transparent),
                  0 3px 7px rgba(0,0,0,.6)}
}

.fx-scan{position:relative;color:var(--text);overflow:hidden}

.fx-scan::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,
    rgba(255,255,255,.9) 50%,transparent 60%);
  background-size:250% 100%;
  animation:sweep calc(var(--fx-t,4s) * .85) linear infinite}
.fx-scan::before{content:"";position:absolute;left:-8%;right:-8%;height:2px;
  pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--accent) 92%,#fff),transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 75%,transparent);
  animation:scanBar calc(var(--fx-t,4s) * .95) linear infinite}
@keyframes scanBar{
  0%{top:-10%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{top:106%;opacity:0}
}

@keyframes sweep{to{background-position:260% 0}}
@keyframes rise{to{background-position:0 -260%}}

body.has-views .card .meta{
  font-size:var(--views-size,11px);opacity:var(--views-op,1);
  margin:0;border-top:0;gap:10px;
}
body.has-views .meta-i svg{
  width:calc(var(--views-size,11px) + 3px);
  height:calc(var(--views-size,11px) + 3px);
}

body.has-views:not(.lay-saito) .card{
  --views-inset:clamp(8px,1vw,12px);
  padding-bottom:calc(var(--pad-y) + var(--views-size,11px) + 12px);
}
body.has-views:not(.lay-saito) .card .meta{
  grid-column:auto;grid-row:auto;
  position:absolute;z-index:2;width:auto;padding:0;
  bottom:var(--views-inset);
  max-width:calc(100% - 2 * var(--views-inset));
}
body.has-views:not(.lay-saito).vp-bottom-right .card .meta{
  right:var(--views-inset);left:auto;justify-content:flex-end;
}
body.has-views:not(.lay-saito).vp-bottom-left .card .meta{
  left:var(--views-inset);right:auto;justify-content:flex-start;
}

body.has-views.lay-saito .card .meta{
  position:static;order:99;width:100%;padding:2px 0 0;justify-content:center;
}

body:not(.lay-saito):not(.lay-minimal) .card .banner{
  --bleed:var(--pad-x,clamp(24px,4.4vw,40px));
  width:calc(100% + 2 * var(--bleed));
  margin-top:calc(-1 * var(--bleed));
  margin-left:calc(-1 * var(--bleed));
  margin-right:calc(-1 * var(--bleed));
  margin-bottom:0;
  border-radius:calc(var(--card-radius) - var(--card-bw))
                calc(var(--card-radius) - var(--card-bw)) 0 0;
}

body.lay-wide .mods{
  display:grid;grid-column:1/-1;width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,16px);align-items:start;
}
body.lay-wide .mods > .guilds{display:contents}
body.lay-wide .mods .mod-span{grid-column:1/-1}
body.lay-wide .mods > *,body.lay-wide .mods .guild{margin:0;width:100%}

@media (max-width:640px){
  body.lay-wide .mods{grid-template-columns:minmax(0,1fr)}
}

.link .link-ico{width:21px;height:21px;flex:0 0 auto;object-fit:contain}
.links-icons .link .link-ico{
  width:calc(var(--link-size,42px) * .62);
  height:calc(var(--link-size,42px) * .62);
}
.links-buttons .link .link-ico{display:none}
body.lk-glow .link .link-ico{
  filter:drop-shadow(0 0 6px color-mix(in srgb,currentColor 65%,transparent))}

.ltip{
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;

  height:var(--tip-h,26px);
  display:flex;align-items:center;
  max-width:min(78vw,320px);
  padding:0 var(--tip-pad,12px);
  font-size:var(--tip-size,11px);font-weight:var(--tip-weight,500);line-height:1;
  letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  border:var(--tip-bw,1px) solid transparent;
  border-radius:var(--tip-radius,999px);
  color:var(--tip-fg,#fff);
  box-sizing:border-box;
  opacity:0;transform:translateY(4px) scale(.97);
  transition:opacity .18s ease,transform .24s cubic-bezier(.22,.61,.36,1);
}
.ltip.on{opacity:1;transform:none}
body.tpp-bottom .ltip{transform:translateY(-4px) scale(.97)}
body.tpp-bottom .ltip.on{transform:none}

body.tp-pill .ltip{
  background:var(--tip-bg,#14141c);
  border-color:var(--tip-bd,#8b5cf6);
  box-shadow:0 10px 30px -12px #000,
             0 0 calc(26px * var(--tip-glow,.4))
               color-mix(in srgb,var(--tip-bd,#8b5cf6) calc(var(--tip-glow,.4) * 80%),transparent);
}
body.tp-glass .ltip{
  background:color-mix(in srgb,var(--tip-bg,#14141c) 58%,transparent);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-color:color-mix(in srgb,var(--tip-bd,#8b5cf6) 60%,transparent);
  box-shadow:0 14px 36px -16px #000,
             0 0 calc(24px * var(--tip-glow,.4))
               color-mix(in srgb,var(--accent) calc(var(--tip-glow,.4) * 70%),transparent);
}
body.tp-outline .ltip{
  background:transparent;
  border-color:var(--tip-bd,#8b5cf6);
  box-shadow:0 0 calc(24px * var(--tip-glow,.4))
             color-mix(in srgb,var(--tip-bd,#8b5cf6) calc(var(--tip-glow,.4) * 70%),transparent),
             inset 0 0 calc(16px * var(--tip-glow,.4))
             color-mix(in srgb,var(--tip-bd,#8b5cf6) calc(var(--tip-glow,.4) * 30%),transparent);
  text-shadow:0 0 calc(10px * var(--tip-glow,.4)) var(--tip-bd,#8b5cf6);
}
body.tp-plain .ltip{
  background:none;border-color:transparent;padding:0 4px;
  text-shadow:0 1px 10px #000,
              0 0 calc(14px * var(--tip-glow,.4))
                color-mix(in srgb,var(--accent) 70%,transparent);
}

@media (prefers-reduced-motion:reduce){
  .ltip{transition:opacity .12s linear}
}

body.mod-grid:not(.lay-saito):not(.lay-wide) .mods{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,16px);
  align-items:start;
  width:100%;
}

body.mod-grid:not(.lay-saito):not(.lay-wide):not(.lay-split) .mods{grid-column:1/-1}

body.mod-grid:not(.lay-saito):not(.lay-wide) .mods > *{grid-column:auto;margin:0;width:100%}
body.mod-grid:not(.lay-saito):not(.lay-wide) .mods > .guilds{display:contents}
body.mod-grid:not(.lay-saito):not(.lay-wide) .mods .guild{margin:0;width:100%}
body.mod-grid:not(.lay-saito):not(.lay-wide) .mods .mod-span{grid-column:1/-1}

body.mod-grid:not(.lay-saito) .mods.mods-off,
body.lay-wide .mods.mods-off{display:none}

@media (max-width:640px){
  body.mod-grid:not(.lay-saito):not(.lay-wide) .mods{grid-template-columns:minmax(0,1fr)}
}

body.pl-full:not(.lay-saito) .mods > .player{grid-column:1/-1;width:100%}
body.gd-full:not(.lay-saito) .mods .guild{grid-column:1/-1;width:100%}

body.gs-pill .guild{border-radius:999px;padding-left:10px;padding-right:20px}
body.gs-pill .guild-ico{border-radius:50%}
body.gs-soft .guild{border-radius:8px}
body.gs-soft .guild-ico{border-radius:7px}
body.gs-square .guild{border-radius:0}
body.gs-square .guild-ico{border-radius:0}

.card::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(
    380px circle at var(--gx,50%) var(--gy,50%),
    color-mix(in srgb,#fff 16%,transparent),
    color-mix(in srgb,#fff 5%,transparent) 38%,
    transparent 68%);
  opacity:0;
  transition:opacity .32s ease;

  z-index:-1;
}
.card.tilting::after{opacity:1}

body.lay-saito .card::after{display:none}

@media (prefers-reduced-motion:reduce){
  body:not(.motion-on) .card::after{display:none}
}

.player.pb-dim{position:relative;isolation:isolate}
.player.pb-dim .player-bgi{display:block;position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.85)}
.player.pb-dim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--card) 55%,transparent),
    color-mix(in srgb,var(--card) 88%,transparent));
  pointer-events:none}

.player.pb-gradient{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 26%,transparent),
    color-mix(in srgb,var(--accent) 6%,transparent) 52%,
    transparent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent);
}

.player.pb-glass{
  background:color-mix(in srgb,var(--text) 7%,transparent);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-color:color-mix(in srgb,var(--text) 14%,transparent);
}

.bgwave.bgw-pulse,
.bgwave.bgw-aurora,
.bgwave.bgw-ripple{
  top:0;translate:none;height:100svh;
}

.bgwave.bgw-aurora{
  left:-28px;top:-28px;
  width:calc(100% + 56px);height:calc(100svh + 56px);

  max-width:none;
}

.bgwave.bgw-aurora{filter:blur(9px) saturate(1.2) brightness(1.05);opacity:.9}
.bgwave.bgw-pulse{opacity:.85}

.fx-aurora{z-index:1;max-width:none;
  filter:blur(9px) saturate(1.2) brightness(1.05);opacity:.9}

.dbadges{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--badge-gap,6px);line-height:0}
.dbadges img{width:var(--badge-size,18px);height:var(--badge-size,18px);
  object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 0 var(--badge-glow,0px) rgba(255,255,255,.55))}
.nameline{display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(var(--badge-gap,6px) + 4px);min-width:0;
  margin-top:var(--name-gap,0px)}
.nameline .name{margin-top:0}
.al-center .dbadges,.al-center .nameline{justify-content:center}
.al-right .dbadges,.al-right .nameline{justify-content:flex-end}

.dsvtag{display:inline-flex;align-items:center;line-height:0}
.dpill{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  height:calc(var(--badge-size,18px) + 4px);padding:0 7px 0 4px;
  border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.09);line-height:1}
.dpill img{width:var(--badge-size,18px);height:var(--badge-size,18px);
  object-fit:contain;filter:none}
.dpill b{font-family:var(--mono,ui-monospace,monospace);
  font-size:calc(var(--badge-size,18px) * .62);font-weight:700;
  letter-spacing:.04em;color:var(--text)}