@font-face{
    font-family:'CloisterBlack';
    src:url('https://thecryptcrew.com/CloisterBlack.ttf');
    font-weight:normal;
    font-style:normal;
  }

  #curtain{
    position:fixed;
    inset:0; 
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000000;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .85s ease, visibility .85s ease, background-color .18s ease;
    overflow:hidden;
  }

  #curtain::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:url("https://assets.guns.lol/guns_dot.png");
    opacity:.12;
    mix-blend-mode:screen;
    animation:curtainStatic .18s steps(2) infinite;
  }
#curtain::after{
  display:none;
}

  #curtain.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  #curtain.skip-loader{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:none;
  }

.loader-sigil-img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
  opacity:1;
  filter:none;
  animation:none;
  transition:
    opacity .05s linear,
    filter .05s linear,
    transform .05s linear;
}

.loader-sigil{
  width:min(750px, 92vw);
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

  body.is-loading{
    overflow:hidden;
  }

  .shell{
    opacity:0;
    transform:translateY(18px) scale(.99);
    transition:opacity .9s ease, transform .9s ease;
  }

  .shell.loaded{
    opacity:1;
    transform:translateY(0) scale(1);
  }

  .video-bg{
    opacity:0;
    transform:scale(1.012);
    transition:opacity 1.1s ease, transform 1.6s ease;
  }

  .video-bg.loaded{
    opacity:1;
    transform:scale(1);
  }

  .meta-chip,
  .icon-link{
    opacity:0;
    transform:translateY(12px);
  }

  @keyframes fadeInUp{
    0%{
      opacity:0;
      transform:translateY(12px);
    }
    100%{
      opacity:1;
      transform:translateY(0);
    }
  }

  @keyframes loaderSigilPulse{
    0%{
      opacity:0;
      transform:scale(.78);
      text-shadow:
        0 0 0 rgba(255,255,255,0),
        0 0 0 rgba(255,255,255,0),
        0 0 0 rgba(255,255,255,0);
    }
    38%{
      opacity:1;
      transform:scale(1);
      text-shadow:
        0 0 14px rgba(255,255,255,.26),
        0 0 30px rgba(255,255,255,.16),
        0 0 54px rgba(255,255,255,.10);
    }
    62%{
      opacity:1;
      transform:scale(1.06);
      text-shadow:
        0 0 16px rgba(255,255,255,.30),
        0 0 36px rgba(255,255,255,.18),
        0 0 64px rgba(255,255,255,.12);
    }
    100%{
      opacity:.96;
      transform:scale(1);
      text-shadow:
        0 0 10px rgba(255,255,255,.18),
        0 0 24px rgba(255,255,255,.10),
        0 0 44px rgba(255,255,255,.06);
    }
  }

  @keyframes loaderRingPulse{
    0%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.72);
    }
    45%{
      opacity:.85;
      transform:translate(-50%,-50%) scale(1);
    }
    100%{
      opacity:0;
      transform:translate(-50%,-50%) scale(1.26);
    }
  }
  

/* ===== Split from original inline CSS ===== */
  :root{
    --bg:#000000;
    --panel:rgba(0,0,0,.72);
    --panel-strong:rgba(0,0,0,.88);
    --panel-deep:rgba(0,0,0,.94);
    --line:rgba(255,255,255,.12);
    --line-soft:rgba(255,255,255,.08);
    --text:#f5f5f5;
    --muted:rgba(255,255,255,.58);
    --muted-soft:rgba(255,255,255,.42);
    --shadow:0 30px 80px rgba(0,0,0,.68);
    --radius-xl:30px;
    --radius-lg:24px;
    --radius-md:18px;
    --radius-sm:14px;
  }

@keyframes curtainStatic{
  0%{
    transform:translate(0,0);
  }
  25%{
    transform:translate(-8px,5px);
  }
  50%{
    transform:translate(6px,-6px);
  }
  75%{
    transform:translate(-4px,4px);
  }
  100%{
    transform:translate(0,0);
  }
}

  *{
    box-sizing:border-box;
    min-width:0;
  }

  html,
  body{
    margin:0;
    padding:0;
  }

  html{
    scroll-behavior:smooth;
  }

  body{
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:26px 16px;
    position:relative;
    cursor:url('https://r2.guns.lol/3f3ea1b6-9f63-49e6-9b7b-9c73534cc5b6.png'), auto;
  }

  #curtain::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:url("https://assets.guns.lol/guns_dot.png");
    opacity:.18;
    mix-blend-mode:multiply;
    animation:curtainStatic .12s steps(2) infinite;
  }
  a{
    color:inherit;
    text-decoration:none;
  }

  button,
  input{
    font:inherit;
  }

  .fraktur-title{
    font-family:'CloisterBlack', serif !important;
    font-weight:normal;
    letter-spacing:0;
    text-transform:none;
  }

  .video-bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-5;
    opacity:1;
    filter:none;
    transform:none;
    animation:none;
  }

  .old-tv{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-3;
    opacity:1;
    pointer-events:none;
    background:transparent url("https://assets.guns.lol/guns_dot.png") repeat 0 0;
  }

  .shell{
    width:min(700px, 100%);
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
  }

  .tilt-wrap{
    width:100%;
    max-width:100%;
    position:relative;
    display:flex;
    justify-content:center;
    flex-direction:column;
    gap:15px;
    z-index:1;
    transform-style:preserve-3d;
    will-change:transform;
    transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
    transition:transform 700ms ease;
  }

  .tilt-wrap:hover{
    transform-style:preserve-3d;
  }

  .profile-wrap{
    width:100%;
    border-radius:var(--radius-xl);
    border:1px solid rgba(220,220,220,.16);
    background:
      linear-gradient(to bottom, rgba(255,255,255,.024), rgba(255,255,255,.006) 18%, rgba(255,255,255,0) 34%),
      linear-gradient(to bottom, rgba(0,0,0,.34), rgba(0,0,0,.50)),
      rgba(0,0,0,.24);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow:
      0 18px 42px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.035),
      inset 0 0 0 1px rgba(255,255,255,.018);
    position:relative;
    overflow:hidden;
    isolation:isolate;
    transition:
      background .22s ease,
      border-color .22s ease,
      box-shadow .22s ease;
  }

.profile-wrap::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 50% -20%, rgba(255,255,255,.012), transparent 60%);
pointer-events:none;
z-index:0;
}

.server-card{
  width:100%;
  margin:16px 0 6px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:22px;
  border:1px solid rgba(220,220,220,.15);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.022), rgba(255,255,255,.006) 18%, rgba(255,255,255,0) 34%),
    linear-gradient(to bottom, rgba(0,0,0,.66), rgba(0,0,0,.82)),
    rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    0 18px 38px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 0 1px rgba(255,255,255,.014);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

  .profile-wrap::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.04);
    pointer-events:none;
    opacity:.9;
    z-index:0;
  }

  .profile-inner{
    position:relative;
    z-index:2;
    padding:24px 24px 22px;
    transform:translate3d(0,0,40px);
    transform-style:preserve-3d;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
  }

    .hero,
  .hero * ,
  .icon-row,
  .icon-row * ,
  .music-card,
  .music-card * ,
  .avatar,
  .avatar-overlay,
  .name,
  .username,
  .bio,
  .meta-chip{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translateZ(0);
    will-change:transform;
  }

  .topbar{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
  }

  .views-pill{
    display:inline-flex;
    align-items:center;
    gap:.52rem;
    padding:.46rem .84rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.62);
    color:rgba(255,255,255,.64);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 8px 20px rgba(0,0,0,.24);
  }

  .hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    -webkit-font-smoothing:antialiased;
  }

  .avatar-wrap{
    position:relative;
    width:144px;
    height:144px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
  }

  .avatar{
  width:115px;
  height:115px;
  border-radius:50%;
  object-fit:cover;
  object-position:center center;
  display:block;
  position:relative;
  z-index:1;
  border:1px solid rgba(255,255,255,.16);
  filter:grayscale(90%) contrast(138%) brightness(1.08);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    filter .28s ease;

  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  image-rendering:auto;
}

  .avatar-overlay{
    position:absolute;
    inset:0;
    width:147px;
    height:147px;
    z-index:2;
    pointer-events:none;
    background:url('https://i.imgur.com/a9KHsiS.png') center/contain no-repeat;
    transition:
      transform .28s ease,
      filter .28s ease,
      opacity .28s ease;
  }

  .avatar-status{
  position:absolute;
  right:15px;
  bottom:10px;
  width:32px;
  height:32px;
  border-radius:50%;
  z-index:5;
  pointer-events:none;
  background-position:center;
  background-repeat:no-repeat;
  background-size:20px 20px;
  background-color:#000000;
  border:3px solid #000000;
  transform-origin:center;
}

  .avatar-status-online{
    background-image:url('https://i.imgur.com/GZKxmrA.png');
  }

  .avatar-status-idle{
    background-image:url('https://i.imgur.com/RqtxM2T.png');
  }

  .avatar-status-dnd{
    background-image:url('https://i.imgur.com/Rjea73w.png');
  }

  .avatar-status-offline{
    background-image:url('https://i.imgur.com/coS3DUp.png');
    opacity:1;
  }

    .avatar-wrap{
    transition:transform .28s ease;
  }

  .avatar-wrap:hover{
    transform:translateY(-3px);
  }

  .avatar-wrap:hover::before{
    opacity:.75;
  }

  .avatar-wrap:hover .avatar-overlay{
    transform:none;
    opacity:.95;
  }

  .name{
    margin:0;
    font-size:clamp(3rem, 8vw, 4.6rem);
    line-height:.86;
    color:#ffffff;
    letter-spacing:0;
    text-shadow:
      0 0 12px rgba(255,255,255,.03),
      0 0 24px rgba(255,255,255,.015);
    transition:
      letter-spacing .35s ease,
      text-shadow .35s ease,
      transform .35s ease;
  }

  .hero:hover .name{
    letter-spacing:.03em;
    text-shadow:
      0 0 16px rgba(255,255,255,.05),
      0 0 30px rgba(255,255,255,.02);
    transform:none;
  }

  .username-row{
    margin-top:.62rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    flex-wrap:wrap;
  }

  .username{
    color:rgba(255,255,255,.50);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
  }

  .guild-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.30rem;
    padding:.16rem .46rem;
    border-radius:7px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.68);
    color:rgba(255,255,255,.76);
    font-size:.58rem;
    font-weight:800;
    letter-spacing:.12em;
    line-height:1;
    text-transform:uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 8px 18px rgba(0,0,0,.22);
  }

  .guild-rose{
    width:13px;
    height:13px;
    display:block;
    object-fit:contain;
    filter:grayscale(100%) contrast(115%) brightness(1.08);
  }

.bio{
  max-width:460px;
  margin:1.85rem auto 1.2rem;
  font-size:.54rem;
  letter-spacing:.20em;
  text-transform:uppercase;
  font-style:italic;
  line-height:1.9;
  color:rgba(255,255,255,.72);
  text-shadow:
    0 0 6px rgba(255,255,255,.06),
    0 0 14px rgba(255,255,255,.025);
  transition:
    opacity .35s ease,
    transform .35s ease,
    color .35s ease,
    text-shadow .35s ease;
  animation:bioBreath 9s ease-in-out infinite;
  position:relative;
  display:inline-block;
}

.bio:hover{
  opacity:.90;
  transform:none;
}

.bio::before{
  content:"";
  margin-right:0;
}

.bio::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:transparent;
  background-image:linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 47%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,0) 53%,
    rgba(255,255,255,0) 100%
  );
  background-size:200% 100%;
  background-position:140% 0;
  -webkit-background-clip:text;
  background-clip:text;
  pointer-events:none;
  animation:bioLetterShimmer 3.6s linear infinite;
}

  .meta{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.54rem;
    margin-top:1.05rem;
  }

  .meta-chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.58rem .84rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.54);
    color:rgba(255,255,255,.76);
    font-size:.64rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 8px 18px rgba(0,0,0,.18);
  }

  .ornament{
    width:360px;
    max-width:82vw;
    height:18px;
    margin:1rem auto .55rem;
    position:relative;
    opacity:.92;
  }

  .ornament::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    transform:translateY(-50%);
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.16) 4%,
        rgba(255,255,255,.48) 10%,
        rgba(255,255,255,.48) 46.5%,
        transparent 46.5%,
        transparent 53.5%,
        rgba(255,255,255,.48) 53.5%,
        rgba(255,255,255,.48) 90%,
        rgba(255,255,255,.16) 96%,
        transparent 100%
      );
  }

  .ornament::after{
    content:"♱";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-53%);
    font-size:.92rem;
    font-weight:700;
    line-height:1;
    color:rgba(255,255,255,.86);
    text-shadow:
      0 0 5px rgba(255,255,255,.10),
      0 0 12px rgba(255,255,255,.05);
    pointer-events:none;
  }

  .ornament span{
    display:none;
  }

  .muted-line{
    margin-top:.15rem;
    color:rgba(255,255,255,.34);
    font-size:.69rem;
    font-weight:700;
    letter-spacing:.24em;
    text-transform:uppercase;
  }

  .icon-row{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:10px;
    margin-top:14px;
  }

  .icon-link{
    position:relative;
    height:52px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.90);
    background:rgba(0,0,0,.72);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      0 10px 20px rgba(0,0,0,.22);
  font-size:1.5rem;
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      color .18s ease,
      background .18s ease;
    overflow:hidden;
    isolation:isolate;
  }

  .icon-link::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 28%, transparent 72%, rgba(255,255,255,.01));
    pointer-events:none;
  }

  .icon-link::after{
    content:"";
    position:absolute;
    top:-140%;
    left:-55%;
    width:42%;
    height:320%;
    border-radius:999px;
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0) 15%,
      rgba(255,255,255,.16) 50%,
      rgba(255,255,255,0) 85%,
      transparent 100%
    );
    transform:rotate(24deg) translateX(0);
    opacity:0;
    pointer-events:none;
    z-index:1;
  }

  .icon-link:hover::after{
    opacity:1;
    animation:iconSheen .7s ease;
  }

  @keyframes iconSheen{
    0%{
      transform:rotate(24deg) translateX(-140px);
    }
    100%{
      transform:rotate(24deg) translateX(260px);
    }
  }

@keyframes bioLetterShimmer{
  0%{
    background-position:140% 0;
  }
  100%{
    background-position:-40% 0;
  }
}

@keyframes bioSheenSoft{
  0%{
    background-position:160% 0;
  }
  40%{
    background-position:160% 0;
  }
  70%{
    background-position:-60% 0;
  }
  100%{
    background-position:-60% 0;
  }
}

  @keyframes bioBreath{
  0%{
    opacity:.78;
    text-shadow:
      0 0 4px rgba(255,255,255,.015),
      0 0 10px rgba(255,255,255,.008);
    transform:translateY(0);
  }
  50%{
    opacity:.90;
    text-shadow:
      0 0 8px rgba(255,255,255,.03),
      0 0 18px rgba(255,255,255,.015);
    transform:translateY(-1px);
  }
  100%{
    opacity:.78;
    text-shadow:
      0 0 4px rgba(255,255,255,.015),
      0 0 10px rgba(255,255,255,.008);
    transform:translateY(0);
  }
}

  .icon-link:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.12);
    color:#ffffff;
    background:rgba(0,0,0,.80);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 14px 24px rgba(0,0,0,.28);
  }

.server-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,.62)),
    linear-gradient(to bottom, rgba(255,255,255,.018), rgba(255,255,255,0) 16%, transparent 30%),
    radial-gradient(circle at top left, rgba(255,255,255,.014), transparent 40%),
    url('https://i.imgur.com/NKgJ7No.png') center center / cover no-repeat;
  opacity:.20;
  filter:grayscale(100%) contrast(110%) brightness(.42);
  z-index:0;
}

  .server-card::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.012);
    pointer-events:none;
    opacity:.9;
    z-index:0;
  }

  .server-card > *{
    position:relative;
    z-index:2;
    transform:translate3d(0,0,30px);
    transform-style:preserve-3d;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
  }

.server-left{
  display:flex;
  align-items:center;
  gap:12px;
  }

.server-icon{
  width:56px;
  height:56px;
  border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.92);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 12px 24px rgba(0,0,0,.24);
    overflow:hidden;
  }

  .server-icon img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:inherit;
  }

  .server-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .server-kicker{
    color:rgba(255,255,255,.38);
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.20em;
    text-transform:uppercase;
  }

.server-name{
  color:#fff;
  font-size:1rem;
    font-weight:800;
    line-height:1.08;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .server-blurb{
    margin-top:4px;
    color:rgba(255,255,255,.54);
    font-size:.68rem;
    line-height:1.45;
    letter-spacing:.04em;
    max-width:360px;
  }

  .server-stats{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    margin-top:8px;
  }

  .server-stat{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:rgba(255,255,255,.62);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.02em;
  }

  .server-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#43b581;
    box-shadow:0 0 8px rgba(67,181,129,.35);
    flex:0 0 auto;
  }

.server-join{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:80px;
  padding:.62rem .85rem;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.94);
    color:#f7f7f7;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 12px 24px rgba(0,0,0,.24);
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease;
    flex:0 0 auto;
    position:relative;
    overflow:hidden;
  }

  .server-join::after{
    content:"";
    position:absolute;
    top:-140%;
    left:-55%;
    width:42%;
    height:320%;
    border-radius:999px;
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0) 15%,
      rgba(255,255,255,.14) 50%,
      rgba(255,255,255,0) 85%,
      transparent 100%
    );
    transform:rotate(24deg) translateX(0);
    opacity:0;
    pointer-events:none;
  }

  .server-join:hover::after{
    opacity:1;
    animation:serverJoinSheen .75s ease;
  }

  @keyframes serverJoinSheen{
    0%{
      transform:rotate(24deg) translateX(-140px);
    }
    100%{
      transform:rotate(24deg) translateX(260px);
    }
  }

  .server-join:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.10);
    background:rgba(0,0,0,.98);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 16px 28px rgba(0,0,0,.28);
  }

  .feature-card{
    margin-top:20px;
  }

  .feature-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid rgba(255,255,255,.05);
    background:rgba(0,0,0,.52);
  }

  .feature-kicker{
    display:flex;
    align-items:center;
    gap:.55rem;
    color:rgba(255,255,255,.54);
    font-size:.64rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  .feature-kicker i{
    font-size:.82rem;
    color:rgba(255,255,255,.70);
  }

  .feature-pill{
    padding:.36rem .62rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.42);
    color:rgba(255,255,255,.60);
    font-size:.56rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .feature-body{
    display:grid;
    grid-template-columns:64px 1fr auto;
    gap:16px;
    align-items:center;
    padding:18px 16px 17px;
  }

  .feature-icon{
    width:64px;
    height:64px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.86);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 12px 24px rgba(0,0,0,.22);
    font-size:1.36rem;
    color:rgba(255,255,255,.92);
  }

  .feature-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .feature-title{
    margin:0;
    font-size:1.46rem;
    line-height:1.02;
    color:#ffffff;
  }

  .feature-sub{
    margin:.45rem 0 0;
    color:rgba(255,255,255,.62);
    font-size:.84rem;
    line-height:1.5;
  }

  .feature-side{
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }

  .join-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:92px;
    padding:.74rem 1.08rem;
    border-radius:13px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.88);
    color:#f6f6f6;
    font-size:.83rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 10px 22px rgba(0,0,0,.24);
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease;
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }

  .join-btn::after{
    content:"";
    position:absolute;
    top:-140%;
    left:-55%;
    width:42%;
    height:320%;
    border-radius:999px;
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0) 15%,
      rgba(255,255,255,.14) 50%,
      rgba(255,255,255,0) 85%,
      transparent 100%
    );
    transform:rotate(24deg) translateX(0);
    opacity:0;
    pointer-events:none;
    z-index:1;
  }

  .join-btn:hover::after{
    opacity:1;
    animation:joinSheen .75s ease;
  }

  @keyframes joinSheen{
    0%{
      transform:rotate(24deg) translateX(-140px);
    }
    100%{
      transform:rotate(24deg) translateX(260px);
    }
  }

  .join-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.18);
    background:rgba(0,0,0,.94);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 14px 26px rgba(0,0,0,.28);
  }

  .join-btn:active{
    transform:translateY(0);
  }

  .join-btn:focus-visible{
    outline:2px solid rgba(255,255,255,.18);
    outline-offset:3px;
  }

  .music-card{
    width:100%;
    padding:10px 12px;
    border-radius:20px;
    border:1px solid rgba(220,220,220,.15);
    background:
      linear-gradient(to bottom, rgba(255,255,255,.018), rgba(255,255,255,.004) 18%, rgba(255,255,255,0) 34%),
      linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.82)),
      rgba(0,0,0,.70);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:
      0 18px 42px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.028),
      inset 0 0 0 1px rgba(255,255,255,.014);
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }

  .music-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.34)),
      linear-gradient(to bottom, rgba(255,255,255,.012), rgba(255,255,255,0) 16%, transparent 30%),
      radial-gradient(circle at top left, rgba(255,255,255,.010), transparent 40%),
      url('https://i.pinimg.com/1200x/cc/90/55/cc9055f9a7d78707ab145a89da2d187e.jpg') center center / cover no-repeat;
    opacity:.10;
    filter:grayscale(100%) contrast(116%) brightness(.42);
    z-index:0;
  }

  .music-card::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.04);
    pointer-events:none;
    opacity:.9;
    z-index:0;
  }

  .music-card > *{
    position:relative;
    z-index:1;
  }

  .music-body{
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    gap:12px;
    align-items:center;
  }

  .cover{
    width:56px;
    height:56px;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 8px 16px rgba(0,0,0,.20);
    background:#000;
  }

  .cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(100%) contrast(115%);
  }

  .music-meta{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .track-title{
    margin:0;
    font-size:1rem;
    line-height:1;
    color:#ffffff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .track-sub{
    margin:0;
    color:rgba(255,255,255,.52);
    font-size:.70rem;
    line-height:1.1;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .player-row{
    display:grid;
    grid-template-columns:30px 34px minmax(0,1fr) 34px;
    align-items:center;
    gap:.5rem;
    width:100%;
  }

  .icon-btn{
    width:30px;
    height:30px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    appearance:none;
    -webkit-appearance:none;
    background:rgba(0,0,0,.88);
    color:#fff;
    cursor:pointer;
    padding:0;
    line-height:1;
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      opacity .18s ease,
      background .18s ease;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 6px 12px rgba(0,0,0,.16);
    flex:0 0 auto;
  }

  .icon-btn i{
    font-size:.76rem;
    line-height:1;
    display:block;
    transform:translateX(1px);
  }

  .icon-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.14);
    background:rgba(0,0,0,.94);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 10px 16px rgba(0,0,0,.22);
  }

  .time{
    color:rgba(255,255,255,.50);
    font-size:.60rem;
    font-weight:700;
    letter-spacing:.10em;
    white-space:nowrap;
    text-align:center;
  }

  .seek-wrap{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
  }

  .seek{
    -webkit-appearance:none;
    appearance:none;
    display:block;
    width:100%;
    margin:0;
    border:none;
    outline:none;
    background:transparent;
    cursor:pointer;
  }

  .seek::-webkit-slider-runnable-track{
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
  }

  .seek::-moz-range-track{
    height:2px;
    border:none;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
  }

  .seek::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:9px;
    height:9px;
    border-radius:50%;
    margin-top:-3.5px;
    background:#ffffff;
    border:none;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05),
      0 0 8px rgba(255,255,255,.06);
  }

  .seek::-moz-range-thumb{
    width:9px;
    height:9px;
    border:none;
    border-radius:50%;
    background:#ffffff;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05),
      0 0 8px rgba(255,255,255,.06);
  }

  .reveal{
    opacity:1;
    transform:none;
    transition:
      opacity 1s ease,
      transform 1.05s cubic-bezier(.16,1,.3,1);
  }

  .js-enabled .reveal{
    opacity:0;
    transform:translateY(26px) scale(.985);
  }

  .js-enabled .reveal.active{
    opacity:1;
    transform:translateY(0) scale(1);
  }

  .hero,
  .meta,
  .ornament,
  .muted-line,
  .icon-row,
  .server-card,
  .music-card{
    opacity:1;
    transform:none;
    transition:
      opacity .9s ease,
      transform 1s cubic-bezier(.16,1,.3,1);
    will-change:transform, opacity;
  }

  .js-enabled .hero,
  .js-enabled .meta,
  .js-enabled .ornament,
  .js-enabled .muted-line,
  .js-enabled .icon-row,
  .js-enabled .server-card,
  .js-enabled .music-card{
    opacity:0;
  }

  .js-enabled .hero{
    transform:translateY(30px) scale(.985);
  }

  .js-enabled .meta{
    transform:translateY(24px);
  }

  .js-enabled .ornament,
  .js-enabled .muted-line{
    transform:translateY(18px);
  }

  .js-enabled .icon-row{
    transform:translateY(22px) scale(.985);
  }

  .js-enabled .server-card,
  .js-enabled .music-card{
    transform:translateY(30px) scale(.99);
  }

  .page-entered .hero,
  .page-entered .meta,
  .page-entered .ornament,
  .page-entered .muted-line,
  .page-entered .icon-row,
  .page-entered .server-card,
  .page-entered .music-card{
    opacity:1;
    transform:translateY(0) scale(1);
  }

  .page-entered .hero{
    transition-delay:.10s;
  }

  .page-entered .meta{
    transition-delay:.24s;
  }

  .page-entered .ornament{
    transition-delay:.34s;
  }

  .page-entered .muted-line{
    transition-delay:.42s;
  }

  .page-entered .icon-row{
    transition-delay:.52s;
  }

  .page-entered .server-card{
    transition-delay:.68s;
  }

  .page-entered .music-card{
    transition-delay:.84s;
  }

  .page-entered .icon-link{
    transition:
      transform .45s cubic-bezier(.16,1,.3,1),
      border-color .18s ease,
      box-shadow .18s ease,
      color .18s ease,
      background .18s ease;
  }

  @media (max-width:700px){
    .shell{
      width:min(100%, 620px);
    }
  }

  @media (max-width:560px){
    body{
      justify-content:flex-start;
      padding:18px 12px 26px;
    }

    .shell{
      width:100%;
    }

    .tilt-wrap{
      gap:14px;
    }

    .profile-inner{
      padding:18px 12px 16px;
    }

    .hero{
      text-align:center;
    }

    .avatar-wrap{
      width:128px;
      height:128px;
      margin-bottom:14px;
    }

    .avatar-overlay{
      width:128px;
      height:128px;
    }

    .avatar-status{
      right:10px;
      bottom:12px;
      width:30px;
      height:30px;
      background-size:20px 20px;
      border:3px solid #000000;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 3px 10px rgba(0,0,0,.55);
    }

    .avatar{
      width:108px;
      height:108px;
    }

    .name{
      font-size:clamp(2.45rem, 12vw, 3.2rem);
      line-height:.90;
    }

    .username{
      margin-top:.55rem;
      font-size:.72rem;
      letter-spacing:.18em;
    }

    .bio{
      max-width:100%;
      margin:1.35rem auto 1rem;
      font-size:.50rem;
      letter-spacing:.20em;
      line-height:1.9;
      padding:0 8px;
    }

    .meta{
      gap:.45rem;
      margin-top:.9rem;
    }

    .meta-chip{
      padding:.52rem .72rem;
      font-size:.58rem;
      letter-spacing:.10em;
    }

    .ornament{
      width:min(220px, 74vw);
      margin:.9rem auto .4rem;
    }

.icon-row{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:12px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}

    .icon-link{
      width:48px;
      min-width:48px;
      height:48px;
      border-radius:13px;
      font-size:1.28rem;
      flex:0 0 48px;
      background:rgba(0,0,0,.86);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 10px 20px rgba(0,0,0,.28);
    }

.server-card{
  margin:18px 0 4px;
  padding:14px;
  gap:14px;
  align-items:center;
  text-align:center;
  flex-direction:column;
  justify-content:center;
}

    .server-left{
      width:100%;
      flex-direction:column;
      justify-content:center;
      gap:12px;
    }

    .server-text{
      align-items:center;
      text-align:center;
    }

    .server-name{
      white-space:normal;
      overflow:visible;
      text-overflow:unset;
      font-size:1rem;
    }

    .server-blurb{
      max-width:100%;
      font-size:.64rem;
    }

    .server-stats{
      justify-content:center;
      gap:8px 12px;
    }

.server-join{
  width:100%;
  min-width:0;
  padding:.78rem 1rem;
  font-size:.72rem;
  letter-spacing:.14em;
  display:flex;
  justify-content:center;
}

    .music-card{
      padding:10px;
      border-radius:18px;
    }

    .music-body{
      grid-template-columns:44px minmax(0,1fr);
      gap:10px;
    }

    .cover{
      width:44px;
      height:44px;
      border-radius:11px;
    }

    .track-title{
      font-size:.88rem;
      line-height:1.05;
    }

    .track-sub{
      font-size:.60rem;
      letter-spacing:.07em;
    }

    .player-row{
      grid-template-columns:28px 28px minmax(0,1fr) 28px;
      gap:.35rem;
    }

    .icon-btn{
      width:28px;
      height:28px;
    }

    .icon-btn i{
      font-size:.70rem;
    }

    .time{
      font-size:.54rem;
      letter-spacing:.05em;
    }

    .site-footer{
      margin-top:26px;
      font-size:.52rem;
      letter-spacing:.10em;
      padding:0 8px;
    }
  }

  @media (max-width:390px){
    body{
      padding:16px 10px 24px;
    }

    .profile-inner{
      padding:16px 10px 14px;
    }

    .icon-row{
      gap:7px;
    }

    .icon-link{
      width:46px;
      min-width:46px;
      height:46px;
      font-size:1.18rem;
      flex:0 0 46px;
    }

    .meta-chip{
      font-size:.54rem;
      padding:.5rem .68rem;
    }

    .server-icon{
      width:52px;
      height:52px;
    }

    .server-name{
      font-size:.95rem;
    }
  }

  @media (hover:hover) and (pointer:fine){
    .profile-wrap:hover{
      border-color:rgba(235,235,235,.20);
      box-shadow:
        0 22px 52px rgba(0,0,0,.56),
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 0 0 1px rgba(255,255,255,.02);
    }
  }


  @media (max-width:390px){
    body{
      padding:16px 10px 24px;
    }

    .profile-inner{
      padding:16px 10px 14px;
    }

    .icon-row{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .icon-link{
      height:46px;
      font-size:1.18rem;
    }

    .meta-chip{
      font-size:.54rem;
      padding:.5rem .68rem;
    }

    .server-icon{
      width:52px;
      height:52px;
    }

    .server-name{
      font-size:.95rem;
    }
  }