@font-face{font-family:"Space Mono";src:url(/assets/fonts/SpaceMono-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/assets/fonts/SpaceMono-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:#050505}
html,body{min-height:100%;margin:0}
body{background:#050505;color:#e9e9e9;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden}

.page{
  --accent:#fff;
  --font:"Space Mono",ui-monospace,monospace;
  position:relative;
  min-height:100svh;
  overflow:hidden;
  color:#e9e9e9;
  font-family:var(--font);
  cursor:default;
}
.page .bg{position:absolute;inset:-4%;z-index:0;background:
  radial-gradient(ellipse 18% 12% at 72% 14%,rgba(255,196,120,.55),transparent 70%),
  radial-gradient(ellipse 45% 35% at 72% 18%,rgba(180,120,60,.22),transparent 70%),
  radial-gradient(ellipse 80% 40% at 30% 105%,rgba(40,48,58,.9),transparent 70%),
  linear-gradient(180deg,#0d0f12 0%,#14161a 45%,#0a0a0b 100%);
  filter:saturate(.85)}
.page .bg img,.page .bg video{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.9) contrast(1.05)}
.page .shade{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(0,0,0,.1) 0%,rgba(0,0,0,.6) 100%);pointer-events:none}
.page .grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

.page .enter{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  width:100%;height:100%;border:0;background:#000;color:#cfcfcf;
  font:14px/1.4 var(--font);letter-spacing:.02em;cursor:pointer;
  transition:opacity .7s;
}
.page .enter.gone{opacity:0;pointer-events:none}

.page .wrap{
  position:relative;z-index:3;min-height:100svh;width:100%;
  display:grid;place-items:center;padding:24px 18px;
  perspective:900px;opacity:0;transition:opacity 1s .15s;
}
.page .wrap.on{opacity:1}
.page .card{
  position:relative;width:100%;max-width:360px;padding:26px 20px 34px;text-align:center;
  background:rgba(10,10,10,.28);border:1px solid rgba(255,255,255,.09);border-radius:14px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform-style:preserve-3d;transition:transform .15s ease-out;
}
.page .avatar{width:80px;height:80px;border-radius:50%;border:2px solid rgba(255,255,255,.75);object-fit:cover;background:#111}
.page .nameline{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;min-width:0}
.page h1{
  margin:0;min-width:0;font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.01em;
  color:#fff;text-shadow:0 0 12px var(--accent),0 0 2px var(--accent);
  overflow-wrap:anywhere;
}
.page .badges{display:flex;gap:4px;flex:none}
.page .badges svg{width:17px;height:17px;filter:drop-shadow(0 0 4px rgba(255,255,255,.35))}
.page .bio{margin:6px 0 0;font-size:13px;color:#bdbdbd;min-height:1.4em}
.page .bio p{margin:0}
.page .cur{margin-left:1px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.page .presence{
  display:flex;align-items:center;gap:11px;margin:18px 0 4px;padding:10px 12px;text-align:left;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.07);border-radius:10px;
}
.page .pav{position:relative;flex:none}
.page .pav img{width:44px;height:44px;border-radius:50%;display:block;object-fit:cover;background:#111}
.page .pav i{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;border:3px solid #141415;background:#80848e}
.page .pav i.online{background:#23a55a}
.page .pav i.idle{background:#f0b232}
.page .pav i.dnd{background:#f23f43}
.page .pav i.offline{background:#80848e}
.page .ptxt{display:flex;flex-direction:column;min-width:0}
.page .ptxt b{font-size:13px;font-weight:700;color:#f1f1f1}
.page .ptxt span{font-size:11px;color:#8d8d8d;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.page .socials{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:16px 0 6px}
.page .socials:empty{display:none;margin:0}
.page .socials a{color:#e6e6e6;display:block;transition:filter .2s,transform .2s}
.page .socials svg{width:25px;height:25px;display:block;fill:currentColor}
.page .socials a:hover{filter:drop-shadow(0 0 6px var(--accent));transform:translateY(-2px)}
.page .views{position:absolute;left:12px;bottom:10px;font-size:11px;color:#9a9a9a;display:flex;gap:5px;align-items:center}
.page .views svg{width:14px;height:14px;stroke:#9a9a9a;fill:none;stroke-width:1.7}
.page audio{position:absolute;width:0;height:0;opacity:0;pointer-events:none}

.stage .page{min-height:0;height:auto}
.stage .wrap{min-height:0;transition:none;opacity:1}
.stage .card{transition:none}

@media (max-width:380px){
  .page h1{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .page .grain,.page .cur{animation:none}
  .page .wrap,.page .enter,.page .card{transition:none}
}