@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#05060a;--sidebar:#080a10;--panel:#0c1018;--panel2:#0a0d14;
  --line:#1d2330;--line2:#2a3140;--text:#f2f4f8;--muted:#8e97a7;
  --purple:#9a4dff;--green:#23d77b;--idle:#f0b44c;--dnd:#f05b68;--offline:#6f7784;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.icon{width:18px;height:18px;display:block;fill:currentColor;flex:none}
#code-rain{position:fixed;inset:0;width:100%;height:100%;z-index:-3;opacity:.10;pointer-events:none}
.bg-grid{position:fixed;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(circle at 70% 20%,rgba(117,54,210,.13),transparent 26%),radial-gradient(circle at 40% 80%,rgba(100,74,200,.06),transparent 28%)}
.cursor-glow{position:fixed;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(154,77,255,.07),transparent 70%);transform:translate(-50%,-50%);pointer-events:none;z-index:-1}

.sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;border-right:1px solid var(--line);background:rgba(5,7,12,.92);backdrop-filter:blur(12px);display:flex;flex-direction:column;padding:28px 20px 22px;z-index:50}
.brand{display:flex;align-items:center;gap:12px;font-size:1.05rem;font-weight:800;margin:0 10px 34px}
.brand-mark{color:var(--purple);font:700 1.1rem "JetBrains Mono",monospace}
.side-nav{display:flex;flex-direction:column;gap:8px}
.side-nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;color:#a7afbc;font-size:.92rem;border:1px solid transparent;transition:.2s}
.side-nav a:hover{background:#0d111a;color:#fff}.side-nav a.active{color:#c999ff;background:linear-gradient(90deg,rgba(112,47,214,.20),rgba(112,47,214,.05));border-color:rgba(154,77,255,.10)}
.side-icon{width:20px;display:grid;place-items:center;color:var(--purple)}
.side-icon .icon{width:17px;height:17px}

.admin-edit-button{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 4px 0;padding:11px 12px;border-radius:9px;border:1px solid rgba(154,77,255,.25);background:rgba(128,55,230,.10);color:#c98cff;font-size:.8rem;font-weight:700}
.admin-edit-button:hover{background:rgba(128,55,230,.18);border-color:rgba(154,77,255,.4)}

.side-bottom{margin-top:auto}
.side-socials{display:flex;gap:9px;padding:0 8px 22px}.side-socials a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:#a960ff;background:#0a0d13}.side-socials a:hover{border-color:var(--line2);color:#fff}.social-icon{width:17px;height:17px;fill:currentColor}
.side-footer{padding:14px 8px 0;border-top:1px solid var(--line);color:#5f6876;font-size:.72rem;line-height:1.6}
.mobile-top{display:none}
.main{margin-left:245px;width:calc(100% - 245px)}.container{width:min(1120px,calc(100% - 54px));margin:0 auto;padding:44px 0 70px}

.panel{background:linear-gradient(180deg,rgba(14,18,27,.94),rgba(8,11,17,.94));border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.profile-panel{overflow:hidden;margin-bottom:18px}.profile-banner{height:210px;position:relative;background:radial-gradient(circle at 80% 25%,rgba(154,77,255,.28),transparent 26%),radial-gradient(circle at 20% 80%,rgba(82,59,194,.24),transparent 24%),linear-gradient(120deg,#101421,#090c14)}
.profile-banner::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:22px 22px}
.profile-content{display:grid;grid-template-columns:240px 1fr 1fr;gap:24px;padding:0 24px 24px}
.avatar-block{position:relative;margin-top:-64px}.avatar-ring{width:132px;height:132px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#b357ff,#6a2ce0)}
.avatar-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:5px solid #0a0d13;background:#131823}
.status-bubble{position:absolute;left:101px;top:96px;width:25px;height:25px;border-radius:50%;border:5px solid #0a0d13;background:var(--offline)}
.status-bubble.online,.status-mini.online{background:var(--green)}.status-bubble.idle,.status-mini.idle{background:var(--idle)}.status-bubble.dnd,.status-mini.dnd{background:var(--dnd)}.status-bubble.offline,.status-mini.offline{background:var(--offline)}
.profile-name{margin-top:12px}.profile-name h1{margin:0;font-size:1.8rem;letter-spacing:-.04em}.profile-name p{margin:5px 0 0;color:#b56cff;font-size:.9rem}.profile-bio{margin-top:12px;color:#a6aeba;line-height:1.55;font-size:.84rem}
.status-card,.activity-card,.spotify-card{border:1px solid var(--line);background:#0a0e15;border-radius:10px}.status-card{margin-top:20px;padding:14px 15px}.status-line{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:700}.status-mini{width:9px;height:9px;border-radius:50%;background:var(--offline)}.status-sub{margin-top:7px;color:#8e97a5;font-size:.77rem}
.activity-card{margin-top:10px;padding:14px}.label{color:#b26dff;font:600 .68rem "JetBrains Mono",monospace;letter-spacing:.05em}.label-with-icon{display:flex;align-items:center;gap:7px}.label-with-icon .icon{width:14px;height:14px}.spotify-label{color:#37d67a}
.activity-main{display:flex;align-items:center;gap:12px;margin-top:10px}.activity-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid var(--line2);border-radius:8px;color:#a767ff;background:#0d1119;overflow:hidden}.activity-icon img{width:100%;height:100%;object-fit:cover}.activity-icon .icon{width:18px;height:18px}
.activity-copy{min-width:0}.activity-copy strong,.activity-copy span,.activity-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-copy strong{font-size:.84rem}.activity-copy span{margin-top:3px;color:#a1a9b5;font-size:.76rem}.activity-copy small{margin-top:2px;color:#697280;font-size:.68rem}
.spotify-card{margin-top:20px;padding:14px}.spotify-main{display:flex;align-items:center;gap:12px;margin-top:10px}.spotify-main img{width:48px;height:48px;border-radius:8px;object-fit:cover}.spotify-text{min-width:0}.spotify-text strong,.spotify-text span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-text strong{font-size:.82rem}.spotify-text span{margin-top:4px;color:#8f98a6;font-size:.74rem}

.typing-panel{display:grid;grid-template-columns:115px 1fr 54px;align-items:center;gap:18px;min-height:150px;padding:22px 24px;margin-bottom:18px}.typing-side{color:#9c53f2;font:500 .72rem "JetBrains Mono",monospace}.typing-main{border-left:1px solid rgba(154,77,255,.45);padding-left:20px}.typing-text{min-height:54px;color:#d6d9df;font:500 1rem/1.7 "JetBrains Mono",monospace}.caret{color:#a251ff;animation:blink .8s step-end infinite}.quote-mark{color:#9745ff;font-size:3.4rem;font-weight:800;line-height:1;text-align:center}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.info-panel{padding:22px;min-height:250px}.info-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}.info-title span{display:grid;place-items:center;color:#9e50f2}.info-title h2{margin:0;font-size:1.45rem;letter-spacing:-.03em}.info-panel p{color:#9ea6b3;line-height:1.75;font-size:.84rem}.mini-quote{margin-top:20px;padding:14px 16px;border:1px solid rgba(154,77,255,.15);border-radius:10px;background:rgba(101,41,191,.07);color:#c78cff;font:500 .77rem/1.7 "JetBrains Mono",monospace}
.server-row{margin-top:16px;border:1px solid var(--line);border-radius:10px;background:#0a0e15;padding:14px}.server-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.server-head strong{font-size:.9rem}.server-desc{margin-top:9px;color:#8f98a5;font-size:.76rem;line-height:1.6}


.role-badge{--role-color:#fb0509;position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;color:var(--role-color);background:color-mix(in srgb,var(--role-color) 11%,transparent);border:1px solid color-mix(in srgb,var(--role-color) 38%,transparent);box-shadow:0 0 13px color-mix(in srgb,var(--role-color) 15%,transparent);font:700 .68rem "JetBrains Mono",monospace;overflow:visible;isolation:isolate}
.role-emoji{font-size:.82rem;filter:drop-shadow(0 0 4px var(--role-color))}
.particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--role-color);box-shadow:0 0 7px var(--role-color);pointer-events:none;z-index:2}
.p1{left:-4px;top:15%;animation:orbit1 2.3s ease-in-out infinite}.p2{left:25%;top:-5px;animation:orbit2 2.7s ease-in-out infinite .2s}.p3{right:20%;top:-4px;animation:orbit3 2.4s ease-in-out infinite .5s}.p4{right:-5px;top:30%;animation:orbit4 2.6s ease-in-out infinite .8s}.p5{right:-4px;bottom:15%;animation:orbit5 2.5s ease-in-out infinite .9s}.p6{right:25%;bottom:-5px;animation:orbit6 2.8s ease-in-out infinite .3s}.p7{left:20%;bottom:-4px;animation:orbit7 2.4s ease-in-out infinite .6s}.p8{left:-5px;bottom:28%;animation:orbit8 2.6s ease-in-out infinite 1s}
@keyframes orbit1{50%{transform:translate(-5px,-5px) scale(1.2);opacity:.4}}@keyframes orbit2{50%{transform:translate(5px,-5px) scale(.7);opacity:.45}}@keyframes orbit3{50%{transform:translate(6px,3px) scale(1.2);opacity:.5}}@keyframes orbit4{50%{transform:translate(5px,5px) scale(.7);opacity:.45}}@keyframes orbit5{50%{transform:translate(4px,-4px) scale(1.2);opacity:.4}}@keyframes orbit6{50%{transform:translate(-4px,5px) scale(.7);opacity:.5}}@keyframes orbit7{50%{transform:translate(-6px,-2px) scale(1.1);opacity:.45}}@keyframes orbit8{50%{transform:translate(-5px,4px) scale(.75);opacity:.4}}

.page-hero{padding:48px 0 26px}.page-hero .small{color:#9952e8;font:600 .7rem "JetBrains Mono",monospace}.page-hero h1{margin:8px 0 0;font-size:2.8rem;letter-spacing:-.055em}.page-hero p{max-width:720px;margin-top:14px;color:#919aa8;line-height:1.7;font-size:.9rem}
.content-panel{padding:24px;margin-bottom:18px}.section-title{margin:0 0 18px;font-size:1.8rem;letter-spacing:-.04em}.tech-list,.now-list{display:flex;flex-wrap:wrap;gap:8px}.tech-chip,.now-item{padding:9px 11px;border-radius:8px;border:1px solid var(--line);background:#0a0d14;color:#b9c0ca;font:500 .72rem "JetBrains Mono",monospace}
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.item-card{padding:18px;border:1px solid var(--line);border-radius:10px;background:#0a0d14}.item-card h3{margin:0 0 8px;font-size:1rem}.item-card p{margin:0;color:#8e97a4;line-height:1.6;font-size:.8rem}.item-card .meta{margin-top:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;color:#6f7885;font:500 .68rem "JetBrains Mono",monospace}
.contact-links{display:flex;flex-direction:column;gap:10px}.contact-link{display:flex;justify-content:space-between;gap:15px;padding:13px 14px;border-radius:9px;border:1px solid var(--line);background:#0a0d14}.contact-name{display:flex;align-items:center;gap:9px}.contact-name .icon{width:16px;height:16px;color:#a95dff}.contact-link span:first-child{color:#8d95a2;font-size:.78rem}.contact-link span:last-child{font:500 .72rem "JetBrains Mono",monospace;color:#d2d6dc}

.reveal{opacity:0;transform:translateY(15px);transition:.5s ease}.reveal.visible{opacity:1;transform:none}
@keyframes blink{50%{opacity:0}}

@media(max-width:980px){.profile-content{grid-template-columns:190px 1fr}.profile-content>:last-child{grid-column:2}}
@media(max-width:760px){.sidebar{display:none}.mobile-top{display:flex;position:sticky;top:0;z-index:50;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(5,7,12,.94);backdrop-filter:blur(12px)}.mobile-top nav{display:flex;gap:6px}.mobile-top a{font-size:.72rem;color:#9aa3b0}.main{margin-left:0;width:100%}.container{width:min(100% - 24px,760px);padding-top:22px}.profile-content{grid-template-columns:1fr}.profile-content>:last-child{grid-column:auto}.avatar-block{margin-top:-54px}.home-grid{grid-template-columns:1fr}.typing-panel{grid-template-columns:1fr}.typing-side,.quote-mark{display:none}.typing-main{border-left:0;padding-left:0}.cards-grid{grid-template-columns:1fr}}

.typing-icon{
  display:grid;
  place-items:center;
  color:#a650ff;
}
.typing-icon .icon{
  width:22px;
  height:22px;
  filter:drop-shadow(0 0 7px rgba(166,80,255,.35));
}
.typing-icon.muted{opacity:.45}
.activity-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:7px;
}

.servers-subtitle{
  margin:-8px 0 20px;
  color:#747e8c;
  font-size:.76rem;
}
.server-card{
  padding:18px;
}
.server-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.server-card-top h3{margin:0 0 7px}
.server-card-top p{margin:0}
.server-separator{
  height:1px;
  margin:17px 0 13px;
  background:linear-gradient(90deg,#242b38,rgba(36,43,56,.25));
}
.server-links-title{
  margin-bottom:9px;
  color:#8992a0;
  font:600 .68rem "JetBrains Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.server-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.server-link{
  padding:8px 10px;
  border:1px solid #252d3a;
  border-radius:8px;
  background:#0c1017;
  color:#c3c9d2;
  font:500 .7rem "JetBrains Mono",monospace;
  transition:.18s ease;
}
.server-link:hover{
  color:#fff;
  border-color:#404a5c;
  transform:translateY(-1px);
}
.contact-extra-links{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #1d2330;
}
.contact-extra-title{
  margin-bottom:10px;
  color:#798392;
  font:600 .68rem "JetBrains Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.07em;
}

/* v11: rotating server preview on the home page */
.server-rotator{margin-top:16px;min-height:91px;position:relative}
.server-rotator .server-row{margin-top:0;position:absolute;inset:0;transition:opacity .45s ease,transform .45s ease,filter .45s ease}
.server-rotator .server-row.server-enter{opacity:0;transform:translateY(10px) scale(.985);filter:blur(3px)}
.server-rotator .server-row.server-show{opacity:1;transform:none;filter:none}
.server-rotator .server-row.server-leave{opacity:0;transform:translateY(-10px) scale(.985);filter:blur(3px)}
@media(max-width:760px){.profile-banner{height:165px}}