:root{
  --blue:#1f14ff;
  --wave:#8b83ff;
  --glow:rgba(31,20,255,.42);
  --fg:#f2f2ee;
  --fg2:rgba(242,242,238,.56);
  --fg3:rgba(242,242,238,.22);
  --bg:#050508;
  --line:rgba(242,242,238,.09);
  --serif:"Cinzel",serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.22,1.4,.28,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);overscroll-behavior:none}
body{
  min-height:100svh;overflow:hidden;background:var(--bg);color:var(--fg);
  font-family:var(--mono);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--blue);color:#fff}

.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.bg-v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:brightness(.34) saturate(.82) contrast(1.08);
  transform:scale(1.06);
}
.bg-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,8,.92) 0%,rgba(5,5,8,.34) 26%,rgba(5,5,8,.4) 68%,rgba(5,5,8,.95) 100%),
    radial-gradient(ellipse 68% 62% at 50% 52%,transparent 26%,rgba(0,0,0,.72) 100%);
}
.bg-grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.1;
  background:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:100% 3px;
}

.gate{
  position:fixed;inset:0;z-index:999;background:#000;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;overflow:hidden;
}
.gate-lock{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.gate-logo{display:grid;place-items:center;opacity:0}
.gate-logo img{
  width:clamp(96px,11vw,168px);height:auto;object-fit:contain;
  filter:drop-shadow(0 0 34px rgba(139,83,255,.36)) drop-shadow(0 18px 44px rgba(0,0,0,.85));
}
.mark-txt{
  font-family:var(--serif);font-weight:900;font-size:clamp(58px,8vw,110px);
  line-height:.82;letter-spacing:-.08em;
  background:linear-gradient(180deg,#fff 24%,rgba(242,242,238,.72) 58%,rgba(31,20,255,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mark-txt b{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.chrome{
  font-family:var(--serif);font-weight:700;letter-spacing:.01em;
  white-space:nowrap;
  background:linear-gradient(178deg,
    #ffffff 0%,
    #f6eeff 15%,
    #d3bced 32%,
    #9a76c9 47%,
    #f1e7fd 57%,
    #ffffff 65%,
    #bda0e0 81%,
    #6d5192 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.6))
         drop-shadow(0 12px 28px rgba(0,0,0,.72))
         drop-shadow(0 0 34px rgba(139,83,255,.2));
}
.gate-word{opacity:0;font-size:clamp(30px,4.2vw,62px)}

.gate-btn{
  position:absolute;left:0;right:0;bottom:22px;margin:0 auto;width:max-content;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:0;background:none;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px;font-weight:600;color:#fff;
  opacity:0;transition:transform .35s var(--ease);
}
.gate-btn svg{width:15px;height:15px;overflow:visible}
.gate-btn .mo{fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.gate-btn .mb{fill:currentColor;stroke:none}
.gate-btn.on{animation:blink 2.8s ease-in-out infinite}
.gate:hover .gate-btn.on{transform:translateY(-2px);animation:none}
@keyframes blink{50%{opacity:.5}}

.wave{
  position:absolute;left:0;top:50%;translate:0 -50%;
  width:100%;height:clamp(210px,38vh,420px);
  opacity:0;pointer-events:none;
}

.shutter{position:fixed;inset:0;z-index:1000;pointer-events:none}
.shutter-t,.shutter-b{
  position:absolute;left:0;right:0;height:0;display:block;background:#000;
  box-shadow:0 0 34px rgba(0,0,0,.9);
}
.shutter-t{top:0}
.shutter-b{bottom:0}

.snd{
  position:fixed;top:clamp(14px,2.2vh,22px);left:clamp(14px,2.2vw,22px);z-index:600;
  display:flex;align-items:center;
  height:44px;width:44px;
  --pill:#11111a;
  background:var(--pill);
  border:1px solid rgba(242,242,238,.12);
  border-radius:13px;
  overflow:hidden;opacity:0;
  transition:border-color .35s ease,background .35s ease;
}
.snd:hover,.snd:focus-within{
  --pill:#16161f;border-color:rgba(242,242,238,.24);
}
.snd.nojs{transition:width .5s cubic-bezier(.19,1,.22,1),
  border-color .35s ease,background .35s ease}
.snd.nojs:hover,.snd.nojs:focus-within{width:194px}
.snd-btn{
  position:relative;z-index:2;
  flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;
  background:var(--pill);
  color:#fff;transition:color .28s ease,background .35s 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(--wave)}
.snd[data-vol="off"] .snd-btn{color:rgba(242,242,238,.5)}
.snd-slot{
  position:relative;z-index:1;
  flex:1 0 auto;width:152px;display:flex;align-items:center;
  padding:0 18px 0 6px;opacity:0;
}
.snd.nojs .snd-slot{transition:opacity .3s ease .08s}
.snd.nojs:hover .snd-slot,.snd.nojs:focus-within .snd-slot{opacity: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(--wave) var(--p,34%),rgba(242,242,238,.2) 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:active::-webkit-slider-thumb{transform:scale(1.05)}
.snd-range::-moz-range-track{
  height:4px;border-radius:4px;border:0;background:rgba(242,242,238,.2);
}
.snd-range::-moz-range-progress{
  height:4px;border-radius:4px;background:var(--wave);
}
.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}

.title{
  position:fixed;top:clamp(30px,5.5vh,64px);left:0;right:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.5vw,22px);
  white-space:nowrap;pointer-events:none;opacity:0;margin:0;
}
.title .chrome{font-size:clamp(2.1rem,5.2vw,4.9rem);line-height:1;letter-spacing:.015em}

.stage{position:fixed;inset:0;z-index:10;display:grid;place-items:center;
  padding-top:clamp(56px,9vh,118px);
  perspective:2000px;perspective-origin:50% 50%}
.void{font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--fg3)}

.orbit{
  position:relative;width:min(1900px,98vw);height:clamp(320px,54vh,540px);
  transform-style:preserve-3d;touch-action:pan-y;cursor:grab;
}
.orbit.drag{cursor:grabbing}

.card{
  position:absolute;top:50%;left:50%;
  width:clamp(104px,9.2vw,168px);height:clamp(320px,54vh,540px);
  border-radius:24px;border:1px solid rgba(255,255,255,.13);
  background:rgba(8,8,12,.72);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  overflow:hidden;isolation:isolate;
  transform-style:preserve-3d;backface-visibility:hidden;
  opacity:0;
  transition:border-color .3s ease,box-shadow .4s ease;
}
.card.on{
  border-color:rgba(255,255,255,.4);
  box-shadow:0 60px 130px rgba(0,0,0,.78),0 0 70px rgba(31,20,255,.2);
}
.card-a{position:absolute;inset:0;display:block}

.card-bg{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.card-bg img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.44) saturate(.82) contrast(1.1);transform:scale(1.06)}

.card-bg video{width:100%;height:100%;object-fit:cover;
  filter:brightness(.44) saturate(.82) contrast(1.1);transform:scale(1.06)}

.card-art{position:absolute;inset:-10%;display:block;
  background-image:var(--art,none);background-size:cover;background-position:center;
  filter:blur(22px) saturate(1.5) brightness(.42);
  opacity:var(--art-on,0);transform:scale(1.18);transition:opacity .7s var(--ease)}
.card-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.26) 44%,rgba(0,0,0,.8)),
    radial-gradient(circle at 50% 30%,rgba(31,20,255,.2),transparent 34%);
}
.card-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 16%,rgba(255,255,255,.1) 44%,transparent 62%);
  transform:translateX(-84%);opacity:.34;
  transition:transform .7s var(--ease),opacity .4s ease}
.card.on .card-sheen{transform:translateX(84%);opacity:.7}
.card-edge{position:absolute;top:0;left:16%;right:16%;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(31,20,255,.55),transparent);opacity:.75}

.card-av{
  position:absolute;left:50%;top:29%;z-index:5;display:block;
  width:clamp(62px,5.6vw,98px);aspect-ratio:1;translate:-50% -50%;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.6));
  transition:width .48s var(--spring),top .48s var(--spring);
}
.card.on .card-av{top:25%;width:clamp(86px,7.8vw,122px)}
.card-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.26);background:#111;
  opacity:0;transition:opacity .4s ease}
.card-av img.in{opacity:1}
.dot{position:absolute;right:2%;bottom:4%;width:19%;aspect-ratio:1;border-radius:50%;
  background:#80848e;border:2px solid #07070c;
  transition:background .35s,box-shadow .35s}
.dot.online{background:#23a55a;box-shadow:0 0 10px rgba(35,165,90,.6)}
.dot.idle{background:#f0b232;box-shadow:0 0 10px rgba(240,178,50,.5)}
.dot.dnd{background:#f23f43;box-shadow:0 0 10px rgba(242,63,67,.5)}

.card-id{
  position:absolute;left:14px;right:14px;bottom:72px;z-index:5;
  display:grid;gap:5px;text-shadow:0 8px 20px rgba(0,0,0,.75);
  transition:left .46s var(--ease),right .46s var(--ease),bottom .46s var(--ease);
}
.card.on .card-id{left:20px;right:20px;bottom:44%;text-align:center}
.card-id strong{font-family:var(--serif);font-weight:700;
  font-size:clamp(.92rem,1.35vw,1.35rem);line-height:.98;letter-spacing:-.03em;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:font-size .38s var(--ease)}
.card.on .card-id strong{font-size:clamp(1.16rem,1.78vw,1.78rem)}
.card-id em{font-size:10.5px;font-style:normal;letter-spacing:.02em;
  color:rgba(255,255,255,.74);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:font-size .38s var(--ease),color .38s ease}
.card-id em i{font-style:normal;color:rgba(255,255,255,.36);margin-right:1px}
.card.on .card-id em{font-size:12px;color:rgba(255,255,255,.86)}

.card-live{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:7;display:grid;gap:0;
  min-height:72px;border-radius:15px;padding:4px 13px;
  background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.1);
  transform:translateY(116%);opacity:0;
  transition:transform .48s var(--ease),opacity .3s ease;
}
.card.on .card-live{transform:none;opacity:1}
.card-live > *{padding:9px 0;min-width:0}
.card-live > * + *{border-top:1px solid rgba(255,255,255,.13)}
.lv-wrap{display:grid;gap:8px;min-width:0}
.lv-head{display:flex;align-items:center;gap:6px;
  font-size:9px;letter-spacing:.11em;color:rgba(255,255,255,.62);white-space:nowrap}
.lv-sp{width:13px;height:13px;flex:0 0 auto;fill:#1db954;stroke:none}
.lv{display:flex;align-items:center;gap:11px;min-width:0}
.lv-art{flex:0 0 auto;width:46px;height:46px;border-radius:5px;object-fit:cover;
  border:1px solid rgba(255,255,255,.12)}
.lv-txt{min-width:0;flex:1;display:grid;gap:1px}
.lv-n{font-size:11px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-s{font-size:10px;color:rgba(255,255,255,.56);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-time{display:flex;align-items:center;gap:7px;margin-top:5px;min-width:0}
.lv-time b{flex:0 0 auto;font-size:8.5px;font-weight:400;
  color:rgba(255,255,255,.48);font-variant-numeric:tabular-nums}
.lv-bar{flex:1;min-width:0;height:3px;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.16)}
.lv-bar i{display:block;height:100%;width:0;border-radius:3px;background:#fff}
.lv-k{display:flex;align-items:center;gap:5px;font-size:7px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.34);margin-bottom:4px}
.lv-none{font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.3);padding:2px 0}
.lv-note{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:10px;line-height:1.4;text-align:center;
  color:rgba(255,255,255,.72);overflow:hidden;min-width:0}
.lv-note span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-note img{width:14px;height:14px;flex:0 0 auto;border-radius:3px}
.lv-note b{font-style:normal;font-weight:400;flex:0 0 auto}

@media (max-width:760px){
  .card{width:clamp(96px,26vw,140px);height:clamp(280px,48vh,400px)}
  .card.on{width:clamp(200px,58vw,270px)}
  .hud{padding:16px 18px}
  .title{top:clamp(38px,7vh,64px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}