:root {
  color-scheme: dark;
  font-family: var(--font-family, Inter), system-ui, sans-serif;
  font-size: var(--font-size, 16px);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  background: #050608;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #050608; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text, #f5f6f8); background: #050608; }
a { color: inherit; }
.skip { position: fixed; z-index: 20; top: -64px; left: 12px; padding: 12px 16px; border-radius: 8px; color: #08090b; background: #fff; }
.skip:focus { top: 12px; }

.universe { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: var(--background-fill, #050608); background-size: cover; background-position: center; }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .88; }
.ambient-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.page { position: relative; z-index: 1; display: flex; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; padding: 28px 18px 20px; }
.bio-card { width: min(100%, var(--card-width, 470px)); padding: var(--card-padding, 34px); overflow: hidden; border: var(--border-width, 1px) solid var(--border-color, #ffffff20); border-radius: var(--radius, 24px); background: color-mix(in srgb, var(--card-bg, #0b0d10) var(--card-alpha, 96%), transparent); box-shadow: 0 24px 72px #0008, inset 0 1px #ffffff08; animation: card-enter .42s ease-out both; }
.profile-banner { height: 150px; margin: calc(-1 * var(--card-padding, 34px)) calc(-1 * var(--card-padding, 34px)) 0; overflow: hidden; background: #15171a; }
.profile-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-banner + .profile-top { margin-top: -45px; }
.profile-banner + .profile-top .avatar { border: 3px solid #0b0d10; border-radius: 50%; }
.profile-top { position: relative; display: flex; align-items: center; gap: 15px; }
.avatar-wrap { position: relative; flex: none; }
.avatar { display: grid; width: 64px; height: 64px; border: 1px solid #ffffff24; border-radius: 19px; object-fit: cover; }
.avatar-fallback { place-items: center; color: #e5e7eb; background: #17191d; font-size: 24px; font-weight: 650; }
.status-dot { position: absolute; right: -3px; bottom: 0; width: 13px; height: 13px; border: 3px solid #0b0d10; border-radius: 50%; background: #8b929c; }
.identity { min-width: 0; }
.identity h1 { margin: 0 0 4px; font-size: clamp(22px, 6vw, 28px); line-height: 1.15; letter-spacing: -.035em; font-weight: 650; }
.username { color: var(--muted, #9ca3af); font-size: 13px; }
.status-pill { display: flex; align-items: center; gap: 7px; margin-left: auto; padding: 7px 10px; border: 1px solid #ffffff14; border-radius: 99px; color: #c4c8ce; background: #ffffff05; font-size: 10px; white-space: nowrap; }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: #a3a9b1; }
.bio { margin: 22px 0 18px; color: #d4d7dc; font-size: .94em; line-height: 1.68; }
.bio[data-bio-animation="typewriter"] { white-space: pre-line; }
.bio[data-bio-animation="fade"] { animation: bio-fade .8s ease both; }
.bio[data-bio-animation="slide"] { animation: bio-slide .65s ease both; }
@keyframes bio-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bio-slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.presence { margin: -7px 0 16px; text-align: center; color: var(--muted, #9ca3af); font-size: 11px; }
.presence::before { content: "Discord · "; }
.voice-presence { margin: -7px 0 16px; text-align: center; color: var(--muted, #9ca3af); font-size: 11px; }
.voice-presence[hidden] { display: none; }
.details { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 21px; }
.details span { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #ffffff10; border-radius: 9px; color: #c4c8ce; background: #ffffff04; font-size: 11px; }
.details b { color: #8c929b; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.links { display: grid; gap: 9px; }
.link-card { --link-color: var(--accent, #e5e7eb); position: relative; display: flex; min-height: 64px; align-items: center; gap: 13px; padding: 11px 13px; overflow: hidden; border: 1px solid #ffffff14; border-radius: 14px; color: inherit; background: #ffffff05; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background-color .2s ease; animation: link-enter .35s ease-out both; animation-delay: var(--delay, 0ms); }
.link-card:hover, .link-card:focus-visible { transform: translateY(-2px); border-color: #ffffff45; background: #ffffff0a; }
.link-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border: 1px solid #ffffff12; border-radius: 11px; color: #d7dbe0; background: #ffffff07; }
.link-icon svg { width: 19px; height: 19px; }
.link-icon img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.music-card { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 11px; border: 1px solid #ffffff1b; border-radius: 14px; background: #ffffff05; }
.music-card[hidden], .presence[hidden] { display: none; }
.music-card img { width: 48px; height: 48px; flex: none; border-radius: 9px; object-fit: cover; }
.music-card span { display: grid; min-width: 0; gap: 2px; }
.music-card small { color: #9399a2; font-size: 10px; }
.music-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.music-card em { overflow: hidden; color: #b6bac0; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.music-card a { margin-left: auto; text-decoration: none; }
.music-card .music-info { flex: 1; }
.music-card .music-progress { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: #9ca3af; font-size: 10px; font-variant-numeric: tabular-nums; }
.music-card .music-progress[hidden] { display: none; }
.music-card .music-track { display: block; flex: 1; height: 3px; overflow: hidden; border-radius: 4px; background: #ffffff25; }
.music-track i { display: block; width: 0; height: 100%; background: #d8dce1; }
.link-copy { display: grid; gap: 3px; }
.link-copy strong { font-size: 13px; font-weight: 600; }
.link-copy small { color: var(--muted, #9ca3af); font-size: 11px; }
.arrow { width: 19px; height: 19px; margin-left: auto; fill: none; stroke: #9298a1; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.discord-link-status { flex: none; max-width: 40%; margin-left: auto; overflow: hidden; color: #aab0b8; font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.discord-link-status[hidden] { display: none; }
.discord-link-status:not([hidden]) + .arrow { margin-left: 0; }
.link-card:hover .arrow, .link-card:focus-visible .arrow { transform: translateX(3px); }
.socials { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; padding-top: 17px; border-top: 1px solid #ffffff12; }
.socials a { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #ffffff14; border-radius: 12px; color: #c4c8ce; background: #ffffff04; transition: transform .2s ease, border-color .2s ease, color .2s ease; }
.socials a:hover, .socials a:focus-visible { transform: translateY(-2px); border-color: #ffffff50; color: #fff; }
.socials svg { width: 17px; height: 17px; }
.footer { width: min(100%, var(--card-width, 470px)); padding: 13px 4px 0; color: #8c929b; font-size: 10px; }
:focus-visible { outline: 2px solid #e5e7eb; outline-offset: 3px; }

@keyframes card-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes link-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Centered profile identity: avatar first, nickname directly underneath. */
.profile-top { flex-direction: column; justify-content: center; gap: 12px; text-align: center; }
.avatar-wrap { display: grid; place-items: center; }
.avatar { width: 92px; height: 92px; border-radius: 24px; }
.identity { width: 100%; }
.identity h1 { margin-bottom: 5px; }
.username { font-size: 14px; }
.link-icon img, .socials img { display: block; width: 19px; height: 19px; object-fit: contain; }
.link-icon img.link-photo, .link-icon img[src*="telesco.pe"], .link-icon img[src*="jtvnw.net/"], .link-icon img[src*="discordapp.com/avatars/"], .link-icon img[src*="discordapp.com/icons/"] { width: 100%; height: 100%; object-fit: cover; }
.socials img { width: 18px; height: 18px; }
.link-divider { height: 14px; display: flex; align-items: center; justify-content: center; }
.link-divider::before { content: ""; width: min(72%, 260px); border-top: 1px solid #ffffff26; }
.link-divider.dashed::before { border-top-style: dashed; }
.link-divider.dotted::before { border-top-style: dotted; }

@media (max-width: 520px) {
  .page { padding: 22px 14px 16px; }
  .bio-card { padding: 24px 20px; border-radius: min(var(--radius, 24px), 22px); }
  .profile-banner { margin: -24px -20px 0; }
  .avatar { width: 80px; height: 80px; border-radius: 21px; }
  .status-pill { padding: 6px 8px; font-size: 9px; }
  .details { gap: 6px; }
  .details span { padding: 6px 8px; font-size: 10px; }
}
@media (max-width: 370px) {
  .profile-top { gap: 10px; }
  .status-pill { display: none; }
  .bio-card { padding: 20px 17px; }
  .profile-banner { margin: -20px -17px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bio-card { animation: none; }
}

/* Use the canvas stars; remove legacy CSS star/grid overlays. */
body::before,
.universe::before { display: none !important; }