*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--text);background:#000;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
body.cur-none,body.cur-none *{cursor:none!important}

/* Background */
.bg{position:fixed;inset:-40px;z-index:0;background:var(--bg-color);transition:transform .25s ease-out}
.bg-gradient .bg{background:linear-gradient(var(--bg-angle),var(--bg-g1),var(--bg-g2))}
.bg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;filter:blur(var(--bg-blur));transform:scale(1.04)}
.bg-dim{position:absolute;inset:0;background:#000;opacity:var(--bg-dim)}
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* Click to enter */
.enter{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(var(--enter-blur,18px));-webkit-backdrop-filter:blur(var(--enter-blur,18px));transition:opacity .6s ease,visibility .6s}
.enter span{font-size:clamp(1rem,3vw,1.35rem);letter-spacing:.06em;text-transform:lowercase;opacity:.92;animation:breathe 2.4s ease-in-out infinite}
.enter-glitch span{animation:glitchtxt 2.6s infinite steps(1)}
.enter-blur{background:rgba(0,0,0,.25);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.enter.gone{opacity:0;visibility:hidden}
@keyframes breathe{50%{opacity:.45}}

/* Layout */
.wrap{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(16px,5vw,48px) 16px 96px}
.card{position:relative;width:100%;max-width:var(--card-w,540px);padding:34px 30px 26px;border-radius:var(--radius);background:rgba(var(--card-rgb),var(--card-a));border:var(--border-w,1px) solid rgba(var(--border-rgb),var(--border-a));backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transform-style:preserve-3d;will-change:transform;transition:transform .15s ease-out}
.card{box-shadow:0 30px 80px -30px rgba(0,0,0,calc(var(--shadow-a,.6) * 1.3))}
.glow .card{box-shadow:0 0 60px -18px rgba(var(--accent-rgb),calc(var(--shadow-a,.6) * .9)),0 30px 80px -30px rgba(0,0,0,calc(var(--shadow-a,.6) * 1.3))}
.layout-wide .card{max-width:max(780px,var(--card-w))}
.layout-minimal .card{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.layout-split .card{max-width:720px;display:grid;grid-template-columns:auto 1fr;column-gap:26px;text-align:left;align-items:start}
.layout-split .card>.av-wrap{grid-row:1/span 8}
.layout-split .card>*:not(.av-wrap){grid-column:2;justify-self:start}
.align-left .card{align-items:flex-start;text-align:left}
body.locked .wrap{visibility:hidden}

/* Entrance animations */
.anim-fade .card{animation:fadein .9s ease both}
.anim-rise .card{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.anim-zoom .card{animation:zoom .8s cubic-bezier(.2,.8,.2,1) both}
body.locked .card{animation:none}
@keyframes fadein{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes zoom{from{opacity:0;transform:scale(.92)}}

/* Avatar */
.av-wrap{position:relative;width:var(--av-size,112px);height:var(--av-size,112px);margin-bottom:6px;flex:none}
.av{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;background:#111}
.av-rounded .av,.av-rounded .av-wrap::before{border-radius:24%}
.av-square .av,.av-square .av-wrap::before{border-radius:10px}
.av-glow .av{box-shadow:0 0 34px -4px rgba(var(--accent-rgb),.7)}
.avd-ring .av-wrap::before,.avd-pulse .av-wrap::before,.avd-spin .av-wrap::before{content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-1}
.avd-ring .av-wrap::before{background:linear-gradient(135deg,var(--accent),rgba(var(--accent-rgb),.15))}
.avd-pulse .av-wrap::before{background:var(--accent);animation:pulse 2.2s ease-in-out infinite}
.avd-spin .av-wrap::before{background:conic-gradient(from 0deg,var(--accent),transparent 30%,var(--accent) 60%,transparent 85%,var(--accent));animation:spin 3.5s linear infinite}
@keyframes pulse{50%{inset:-10px;opacity:.35}}
@keyframes spin{to{transform:rotate(1turn)}}

/* Name */
.name{position:relative;color:var(--n1,var(--text));font-size:calc(clamp(1.7rem,6vw,2.3rem) * var(--name-size,1));font-weight:800;line-height:1.1;letter-spacing:-.01em;word-break:break-word}
.name-glow .name{text-shadow:0 0 18px rgba(var(--accent-rgb),.85),0 0 2px #fff}
.name-gradient .name{background:linear-gradient(90deg,var(--n1),var(--n2));-webkit-background-clip:text;background-clip:text;color:transparent}
.name-rainbow .name{background:linear-gradient(90deg,#ff4d4d,#ffb84d,#f9ff4d,#4dff88,#4dc3ff,#9d4dff,#ff4d4d);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow 4s linear infinite}
.name-shimmer .name{background:linear-gradient(110deg,var(--n1) 40%,#fff 50%,var(--n1) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.8s linear infinite}
@keyframes rainbow{to{background-position:300% 0}}
@keyframes shimmer{from{background-position:150% 0}to{background-position:-100% 0}}
.name-glitch .name::before,.name-glitch .name::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden}
.name-glitch .name::before{color:#0ff;transform:translate(-2px,0);clip-path:inset(0 0 55% 0);animation:gl1 2.5s infinite steps(1);mix-blend-mode:screen}
.name-glitch .name::after{color:#f0f;transform:translate(2px,0);clip-path:inset(55% 0 0 0);animation:gl2 2s infinite steps(1);mix-blend-mode:screen}
@keyframes gl1{0%,90%{transform:translate(0)}92%{transform:translate(-3px,1px)}95%{transform:translate(3px,-1px)}}
@keyframes gl2{0%,88%{transform:translate(0)}90%{transform:translate(3px,1px)}94%{transform:translate(-3px,0)}}
@keyframes glitchtxt{0%,90%{transform:none;text-shadow:none}92%{transform:translate(-2px,1px);text-shadow:2px 0 #0ff,-2px 0 #f0f}96%{transform:translate(2px,-1px)}}
.spark{position:absolute;width:10px;height:10px;pointer-events:none;animation:spark .9s ease-out forwards}
.spark::before{content:"";position:absolute;inset:0;background:var(--accent);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes spark{from{transform:scale(0) rotate(0)}50%{transform:scale(1) rotate(90deg)}to{transform:scale(0) rotate(180deg);opacity:0}}
.handle{color:var(--muted);font-size:.95rem;margin-top:-4px}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:2px}
.align-left .badges,.layout-split .badges{justify-content:flex-start}
.badge{position:relative;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--b);outline:none}
.bd-ic{width:17px;height:17px;filter:drop-shadow(0 0 6px var(--b))}
.badge-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);white-space:nowrap;background:#0d0d0f;border:1px solid #2a2a2e;color:#fff;font-size:.75rem;font-weight:600;padding:6px 9px;border-radius:8px;opacity:0;visibility:hidden;transition:.15s;z-index:5;text-align:center}
.badge-tip small{display:block;font-weight:400;color:#aaa;font-size:.7rem;margin-top:2px}
.badge:hover .badge-tip,.badge:focus .badge-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* Bio */
.bio{min-height:1.5em;color:var(--muted);font-size:1rem;line-height:1.5;max-width:44ch;white-space:pre-line}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bio.static .caret{display:none}
.bio-t.fade{transition:opacity .4s}

/* Discord card */
.discord{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.dc-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:calc(var(--radius) * .6);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.06);text-align:left}
.dc-av{position:relative;flex:none;width:46px;height:46px}
.dc-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.dc-dot{position:absolute;right:-1px;bottom:-1px;width:15px;height:15px;border-radius:50%;border:3px solid #111;background:#747f8d}
.dc-online{background:#23a55a}.dc-idle{background:#f0b232}.dc-dnd{background:#f23f43}
.dc-txt{min-width:0;flex:1}
.dc-name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-sub{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-art{flex:none;width:46px;height:46px;border-radius:8px;object-fit:cover;background:#222}
.dc-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:6px;overflow:hidden}
.dc-bar i{display:block;height:100%;background:var(--accent);width:0}
.dc-server .dc-av img{border-radius:14px}
.dc-join{flex:none;font-size:.8rem;font-weight:700;padding:7px 12px;border-radius:8px;background:#23a55a;color:#fff}

/* Links */
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;width:100%}
.align-left .links,.layout-split .links{justify-content:flex-start}
.li{display:flex;align-items:center;gap:10px;transition:transform .18s ease,filter .18s ease,background .18s}
.li-ic{width:var(--icon-size,26px);height:var(--icon-size,26px);fill:currentColor;flex:none}
.ic-white .li{color:var(--text)}
.ic-accent .li{color:var(--accent)}
.ic-brand .li{color:var(--brand,var(--text))}
.ic-custom .li{color:var(--icon-hex)}
.ic-glow .li-ic{filter:drop-shadow(0 0 7px currentColor)}
.li:hover{transform:translateY(-3px) scale(1.06)}
.links-buttons{flex-direction:column}
.li-buttons{width:100%;padding:12px 16px;border-radius:calc(var(--radius) * .6);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);justify-content:center;font-weight:600}
.li-buttons:hover{background:rgba(var(--accent-rgb),.18);transform:translateY(-2px)}
.li-buttons .li-ic{width:20px;height:20px}
.li-pills{padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:.88rem;font-weight:600}
.li-pills .li-ic{width:18px;height:18px}
.li-t{color:var(--text)}

/* Meta */
.meta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;color:var(--muted);font-size:.82rem;margin-top:10px}
.align-left .meta,.layout-split .meta{justify-content:flex-start}
.meta span{display:inline-flex;align-items:center;gap:5px}
.m-ic{width:14px;height:14px}

/* Audio player */
.player{position:fixed;z-index:20;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:999px;background:rgba(10,10,12,.62);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-width:calc(100vw - 32px)}
.player-full{left:50%;transform:translateX(-50%);border-radius:16px;padding:10px 14px;width:min(420px,calc(100vw - 32px));flex-wrap:wrap}
.pl-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;transition:background .15s}
.pl-btn:hover{background:rgba(255,255,255,.1)}
.pl-btn svg{width:17px;height:17px}
.pl-main{background:var(--accent);color:#fff}
.pl-main:hover{background:var(--accent);filter:brightness(1.15)}
.pl-title{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.player-full .pl-title{flex:1;max-width:none}
.pl-vol{width:70px;accent-color:var(--accent)}
.pl-prog{flex-basis:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;cursor:pointer}
.pl-prog i{display:block;height:100%;width:0;background:var(--accent)}
.player-mini .pl-skip,.player-mini .pl-prog,.player-mini .pl-vol{display:none}

/* Watermark + report */
.wm{position:fixed;right:14px;bottom:12px;z-index:10;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .2s}
.wm:hover{color:#fff}
.report-btn{position:fixed;right:12px;top:12px;z-index:10;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.4);transition:color .2s,background .2s}
.report-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.r-ic{width:16px;height:16px}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:16px}
.modal form{width:100%;max-width:380px;background:#101012;border:1px solid #26262b;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;color:#eee;font-family:system-ui,sans-serif}
.modal h2{font-size:1.05rem}
.modal select,.modal textarea{width:100%;background:#18181b;border:1px solid #2c2c31;color:#eee;border-radius:8px;padding:9px;font:inherit;font-size:.9rem}
.modal textarea{min-height:80px;resize:vertical}
.modal .row{display:flex;gap:8px;justify-content:flex-end}
.modal .row button{padding:8px 14px;border-radius:8px;background:#222;font-size:.9rem}
.modal .row button[type=submit]{background:#e8261f;color:#fff;font-weight:600}
.modal p{font-size:.85rem;color:#aaa}

@media (max-width:560px){
  .card{padding:28px 18px 22px}
  .layout-split .card{display:flex;text-align:center;align-items:center}
  .layout-split .card>*:not(.av-wrap){justify-self:auto}
  .layout-split .badges,.layout-split .links,.layout-split .meta{justify-content:center}
  .player:not(.player-full){bottom:12px;left:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Banner, pronouns, copy links, mono badges, letter effects */
.banner{width:calc(100% + 60px);margin:-34px -30px -46px;height:150px;border-radius:var(--radius) var(--radius) 0 0;background-size:cover;background-position:center;mask-image:linear-gradient(#000 55%,transparent);-webkit-mask-image:linear-gradient(#000 55%,transparent)}
.has-banner .av-wrap{margin-top:0}
.layout-split .card>.banner{grid-column:1/-1;grid-row:1;justify-self:stretch;width:calc(100% + 60px);margin-bottom:8px}
.layout-split .card.has-banner>.av-wrap{grid-row:2/span 8}
.layout-minimal .banner{border-radius:var(--radius)}
.pronouns{margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem}
.li-copy{cursor:copy}
.li-copy.copied::after{content:"copied";position:absolute;transform:translateY(-130%);font-size:.7rem;font-weight:700;background:var(--accent);color:#fff;padding:3px 7px;border-radius:6px}
.li{position:relative}
.badges-mono .badge{color:var(--text)}
.badges-mono .bd-ic{filter:none}
.name .ch{display:inline-block;white-space:pre}
.name-wave .name .ch{animation:wave 1.6s ease-in-out infinite}
.name-bounce .name .ch{animation:bounce 1.2s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes wave{0%,100%{transform:translateY(0)}25%{transform:translateY(-6px)}75%{transform:translateY(3px)}}
@keyframes bounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px)}55%{transform:translateY(0)}}
@media (max-width:560px){.banner{width:calc(100% + 36px);margin:-28px -18px -40px;height:120px}}

.has-player-full .wm{bottom:auto;top:16px;left:16px;right:auto}
.dc-server .dc-sub{white-space:normal}

/* Discord avatar decoration */
.av-deco{position:absolute;left:50%;top:50%;width:122%;height:122%;transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.has-deco.avd-discord .av-wrap::before{display:none}

/* Text shadow */
.tshadow .name,.tshadow .handle,.tshadow .bio,.tshadow .meta{text-shadow:0 2px 10px rgba(0,0,0,.85)}

/* Aurora background */
.aurora{position:absolute;inset:0;overflow:hidden;filter:blur(70px) saturate(140%)}
.aurora i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;opacity:.55;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:var(--accent);left:-10%;top:-20%}
.aurora i:nth-child(2){background:var(--bg-g1);right:-15%;top:10%;animation-duration:28s;animation-delay:-6s}
.aurora i:nth-child(3){background:var(--n2,#5865f2);left:20%;bottom:-30%;animation-duration:32s;animation-delay:-12s}
.aurora i:nth-child(4){background:var(--bg-g2);right:10%;bottom:-20%;animation-duration:25s;animation-delay:-3s;opacity:.4}
.bg-aurora .bg{background:var(--bg-color)}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,8vh) scale(1.15)}100%{transform:translate(-8vw,14vh) scale(.9)}}

/* Overlays */
.bg::after{content:"";position:absolute;inset:0;pointer-events:none}
.ov-grain .bg::after{opacity:.16;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(4) infinite}
.ov-scanlines .bg::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.ov-vignette .bg::after{background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%)}
.ov-dots .bg::after{background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:14px 14px}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* Enter screen extras */
.enter-s{font-size:.82rem;opacity:.6;letter-spacing:.04em}
.enter-typewriter .enter-t::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;background:currentColor;animation:blink 1s steps(1) infinite}

/* More entrance animations */
.anim-flip .card{animation:flipin 1s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
@keyframes flipin{from{opacity:0;transform:perspective(900px) rotateX(-35deg) translateY(20px)}}
.anim-stagger .card>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.anim-stagger .card>*:nth-child(1){animation-delay:.05s}.anim-stagger .card>*:nth-child(2){animation-delay:.12s}
.anim-stagger .card>*:nth-child(3){animation-delay:.19s}.anim-stagger .card>*:nth-child(4){animation-delay:.26s}
.anim-stagger .card>*:nth-child(5){animation-delay:.33s}.anim-stagger .card>*:nth-child(6){animation-delay:.4s}
.anim-stagger .card>*:nth-child(7){animation-delay:.47s}.anim-stagger .card>*:nth-child(8){animation-delay:.54s}
.anim-stagger .card>*:nth-child(n+9){animation-delay:.6s}
body.locked .card>*{animation:none}

/* Widgets */
.widgets{width:100%;display:grid;gap:10px;margin-top:6px}
.wg{border-radius:calc(var(--radius) * .6);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.06);overflow:hidden;text-align:left}
.wg iframe{display:block;width:100%;border:0}
.wg-video iframe{aspect-ratio:16/9;height:auto}
.wg-spotify iframe{height:80px}
.wg-spotify.tall iframe{height:152px}
.wg-clock,.wg-text{padding:12px 14px}
.wg-t{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.wg-time{font-size:1.6rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wg-text p{color:var(--text);line-height:1.5;white-space:pre-line;word-break:break-word}

/* Likes */
.like{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:inherit;padding:2px 6px;margin:-2px -6px;border-radius:6px;transition:color .15s,background .15s}
.like:hover{background:rgba(255,255,255,.06);color:var(--text)}
.like.on{color:#ff4d6d}
.like.on .m-ic{fill:currentColor}
.like.pop .m-ic{animation:likepop .45s ease}
@keyframes likepop{40%{transform:scale(1.45)}}

/* Player positions + visualiser */
.player.pos-bottom{left:50%;right:auto;transform:translateX(-50%)}
.player.pos-top-left{top:16px;bottom:auto}
.player.pos-top-right{top:16px;bottom:auto;left:auto;right:56px}
.player-full.pos-bottom-left{left:16px;transform:none}
.player-full.pos-top-left{left:16px;transform:none}
.player-full.pos-top-right{left:auto;transform:none}
.pl-vis{width:46px;height:22px;flex:none;opacity:.9}
.player-full .pl-vis{width:60px}