@font-face { font-family: "UnifrakturCook"; src: url("/assets/UnifrakturCook-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
:root { color-scheme: dark; font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif; --text-feedback-positive: #83d89b; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #050505; color: #f7f7f7; }
body { min-height: 100svh; overflow: hidden; isolation: isolate; }
#particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; }
.ambient { position: fixed; inset: -15%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 35% 32% at 51% 47%, rgba(105,105,105,.18), transparent 72%), radial-gradient(ellipse 24% 28% at 50% 54%, rgba(255,255,255,.035), transparent 80%); filter: blur(42px); }
button { color: inherit; font: inherit; }
.sound { position: fixed; top: 18px; left: 18px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.055); border-radius: 15px; background: rgba(12,12,12,.56); color: white; cursor: pointer; z-index: 2; }
.sound:hover { background: rgba(35,35,35,.75); }
.sound-icon { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sound-icon .sound-wave { fill: none; transition: opacity .18s; }
.sound.muted .sound-wave { opacity: 0; }
.intro { position: fixed; inset: 0; display: grid; place-items: center; border: 0; background: rgba(0,0,0,.15); cursor: pointer; z-index: 3; transition: opacity .7s ease, visibility .7s; }
.intro span { font-size: clamp(19px, 2vw, 28px); font-weight: 700; letter-spacing: -.04em; text-shadow: 0 2px 22px #000; }
.intro:hover span { opacity: .7; }
.intro.dismissed { opacity: 0; visibility: hidden; pointer-events: none; }
.profile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 42px 22px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .65s ease, transform .65s ease; pointer-events: none; }
.profile.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.profile-content { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: min(620px, calc(100vw - 36px)); min-height: 410px; padding: 38px 34px; }
.profile-content::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 6px; background: radial-gradient(ellipse at 42% 46%, rgba(220,220,220,.09), rgba(48,48,48,.13) 48%, rgba(10,10,10,.06) 100%); -webkit-mask-image: radial-gradient(ellipse 78% 76% at 50% 48%, #000 35%, rgba(0,0,0,.78) 64%, transparent 100%); mask-image: radial-gradient(ellipse 78% 76% at 50% 48%, #000 35%, rgba(0,0,0,.78) 64%, transparent 100%); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.profile-glow { position: absolute; z-index: -2; width: min(680px, 96vw); height: min(580px, 80vh); background: radial-gradient(ellipse, rgba(210,210,210,.18), rgba(70,70,70,.08) 42%, transparent 72%); filter: blur(36px); pointer-events: none; }
.avatar-frame { position: relative; flex: 0 0 112px; width: 112px; height: 112px; }
.avatar { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid rgba(191,216,255,.82); box-shadow: 0 0 16px rgba(126,177,255,.65), 0 0 42px rgba(120,167,255,.20); background: #18151e; }
.avatar-decoration { position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; }
.discord-status-badge { --status-color: #80848e; position: absolute; right: 1px; bottom: 1px; z-index: 3; display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border: 5px solid #080808; border-radius: 50%; background: var(--status-color); color: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.42); }
.discord-status-badge.status-online { --status-color: #23a55a; }
.discord-status-badge.status-idle { --status-color: #f0b232; }
.discord-status-badge.status-dnd { --status-color: #ed4245; }
.discord-status-badge.status-offline, .discord-status-badge.status-invisible { --status-color: #80848e; }
.discord-status-badge svg { display: block; width: 100%; height: 100%; fill: #fff; }
.discord-status-badge.status-idle svg { fill: #111; }
.discord-status-badge.status-offline svg circle, .discord-status-badge.status-invisible svg circle { fill: #111; }
.avatar[hidden], .avatar-decoration[hidden] { display: none; }
h1 { margin: 11px 0 0; font-family: "UnifrakturCook", "Old English Text MT", serif; font-size: clamp(46px, 4.2vw, 56px); line-height: .94; letter-spacing: 0; font-weight: 700; text-shadow: 0 0 16px rgba(255,255,255,.24); }
.tagline { margin: 19px 0 0; font-family: "UnifrakturCook", "Old English Text MT", serif; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: 0; color: #f0f0f0; text-shadow: 0 0 13px rgba(255,255,255,.12); }
.location { display: flex; align-items: center; gap: 7px; margin: 22px 0 20px; font-family: Inter, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700; color: #e3e3e3; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.location-time { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-left: 5px; color: #d8d8d8; font-size: .92em; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; }
.location-time svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
.clock-tooltip { left: 50%; bottom: calc(100% + 8px); }
.location-time:hover .clock-tooltip, .location-time:focus .clock-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.pin { width: 17px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(190,210,255,.52)); }
.discord-presence { width: min(450px, 92vw); margin: 0 0 3px; }
.discord-presence[hidden] { display: none; }
.presence-list { display: flex; flex-direction: column; gap: 9px; }
.presence-card { min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(30,30,30,.72); box-shadow: 0 8px 24px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align: left; }
.presence-heading { display: block; overflow: hidden; color: #f0f0f0; font-size: 12px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.presence-main { display: flex; align-items: center; gap: 14px; min-width: 0; margin-top: 9px; }
.presence-image-wrap { position: relative; display: grid; flex: 0 0 64px; width: 64px; height: 64px; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; }
.presence-image-wrap::after { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 15px; background: var(--presence-glow, rgba(150,150,255,.24)); filter: blur(12px); opacity: .5; pointer-events: none; }
.presence-card.is-music .presence-image-wrap { flex-basis: 84px; width: 84px; height: 84px; border-radius: 10px; }
.presence-large-wrap { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; }
.presence-image { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.presence-image[hidden] { display: none; }
.presence-fallback { font-size: 24px; line-height: 1; }
.presence-fallback[hidden] { display: none; }
.presence-small-wrap { position: absolute; right: -5px; bottom: -5px; z-index: 2; display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid rgba(20,20,20,.96); border-radius: 50%; background: #242424; box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: help; }
.presence-small-image { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.presence-tooltip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 8; width: max-content; max-width: 220px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(18,18,18,.96); box-shadow: 0 6px 24px rgba(0,0,0,.38); color: #f7f7f7; font-size: 11px; line-height: 1.3; text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .16s ease, transform .16s ease, visibility .16s; pointer-events: none; }
.presence-large-wrap:hover .presence-tooltip-large, .presence-large-wrap:focus-within .presence-tooltip-large { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.presence-tooltip-small { left: auto; right: -5px; transform: translateY(4px); }
.presence-small-wrap:hover .presence-tooltip-small, .presence-small-wrap:focus .presence-tooltip-small { opacity: 1; visibility: visible; transform: translateY(0); }
.presence-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.presence-details { overflow: hidden; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.presence-state, .presence-album { overflow: hidden; color: #c7c7c7; font-size: 12px; font-weight: 500; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.presence-album { color: #e2e2e2; }
.presence-state:empty { display: none; }
.presence-time-row { display: grid; grid-template-columns: auto minmax(28px, 1fr) auto; align-items: center; gap: 10px; width: 100%; margin-top: 2px; color: #ededed; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1; }
.presence-time-row.is-game { display: flex; width: max-content; gap: 5px; color: #83d89b; font-weight: 650; }
.presence-gamepad { display: inline-grid; width: 14px; height: 14px; place-items: center; color: var(--text-feedback-positive); filter: drop-shadow(0 0 4px rgba(89,226,126,.42)); }
.presence-gamepad svg { display: block; width: 100%; height: 100%; fill: var(--text-feedback-positive); }
.presence-time-row[hidden], .presence-total[hidden] { display: none; }
.presence-progress-track { height: 3px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.18); }
.presence-progress-track[hidden] { display: none; }
.presence-progress { width: 0; height: 100%; border-radius: inherit; background: #f2f2f2; box-shadow: 0 0 7px rgba(255,255,255,.28); transition: width .8s linear; }
.socials { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.social-link { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; color: white; text-decoration: none; font-weight: 800; font-size: 17px; background: transparent; text-shadow: 0 0 13px rgba(255,255,255,.75); cursor: pointer; transition: transform .2s, background .2s; }
.social-link:hover { transform: translateY(-4px) scale(1.05); background: rgba(255,255,255,.08); }
.social-tooltip { left: 50%; bottom: calc(100% + 8px); }
.social-link:hover .social-tooltip, .social-link:focus-visible .social-tooltip, .social-link:focus .social-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.social-link[data-icon="roblox"] .social-tooltip { top: calc(100% + 8px); right: auto; bottom: auto; left: 50%; width: max-content; max-width: min(220px, calc(100vw - 24px)); text-align: center; word-break: normal; overflow-wrap: normal; transform: translate(-50%, 4px); }
.social-tooltip-url { display: block; margin-top: 2px; font-weight: 600; }
.social-link[data-icon="roblox"]:hover .social-tooltip, .social-link[data-icon="roblox"]:focus-visible .social-tooltip, .social-link[data-icon="roblox"]:focus .social-tooltip { transform: translate(-50%, 0); }
.social-link svg { display: block; width: 25px; height: 25px; fill: currentColor; filter: drop-shadow(0 0 7px currentColor); }
.social-link img.brand-icon { display: block; width: 25px; height: 25px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(255,255,255,.72)); }
.social-link svg.outline-icon { fill: none; }
.social-link[data-icon="namemc"] { position: relative; isolation: isolate; filter: none; }
.social-link[data-icon="namemc"]::before { content: ""; position: absolute; z-index: -1; inset: 10px; border-radius: 5px; background: rgba(155,190,255,.8); filter: blur(7px); opacity: .55; pointer-events: none; }
.social-link[data-icon="namemc"] svg { border-radius: 5px; clip-path: inset(0 round 5px); color: #e6efff; filter: drop-shadow(0 0 2px rgba(205,225,255,.42)); }
.social-link .wordmark { font-size: 25px; line-height: 1; }
.music-player { position: fixed; left: 50%; bottom: 24px; z-index: 4; display: flex; align-items: center; gap: 14px; width: min(420px, calc(100vw - 28px)); min-height: 88px; padding: 11px 14px 11px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 20px; background: rgba(24,24,24,.84); box-shadow: 0 14px 48px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translate(-50%, 14px); transition: opacity .35s ease, transform .35s ease, visibility .35s; }
.music-player.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.music-cover { --cover-glow: rgba(160,145,255,.27); position: relative; display: grid; flex: 0 0 64px; width: 64px; height: 64px; place-items: center; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 30% 25%, #6e5b8b, #2c2635 55%, #151418); box-shadow: 0 0 10px 1px var(--cover-glow), 0 0 22px var(--cover-glow); color: rgba(255,255,255,.88); font-size: 32px; transition: box-shadow .35s ease; }
.music-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; text-align: left; }
.music-title, .music-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-title { color: #fff; font-size: 14px; line-height: 1.25; font-weight: 650; letter-spacing: .01em; text-shadow: 0 0 10px rgba(255,255,255,.34), 0 0 18px rgba(255,255,255,.13); }
.music-artist { color: #bcbcbc; font-size: 12px; line-height: 1.25; font-weight: 400; letter-spacing: .015em; text-shadow: 0 0 8px rgba(255,255,255,.23), 0 0 15px rgba(255,255,255,.08); }
.music-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.music-controls button { display: grid; place-items: center; border: 0; color: #f5f5f5; cursor: pointer; }
.music-controls button:disabled { cursor: default; opacity: .62; }
.track-button:disabled { filter: drop-shadow(0 0 6px rgba(255,255,255,.62)); }
.track-button { width: 30px; height: 34px; padding: 5px; background: transparent; filter: drop-shadow(0 0 5px rgba(255,255,255,.48)); transition: filter .18s, transform .18s; }
.track-button:hover:not(:disabled) { filter: drop-shadow(0 0 8px rgba(255,255,255,.85)); transform: scale(1.08); }
.play-button { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: 0 0 12px rgba(255,255,255,.16), inset 0 1px rgba(255,255,255,.08); filter: drop-shadow(0 0 6px rgba(255,255,255,.34)); transition: background .18s, transform .18s, box-shadow .18s, filter .18s; }
.play-button:hover:not(:disabled) { background: rgba(255,255,255,.22); box-shadow: 0 0 18px rgba(255,255,255,.30); filter: drop-shadow(0 0 9px rgba(255,255,255,.70)); transform: scale(1.05); }
.music-controls svg { width: 100%; height: 100%; fill: currentColor; }
.music-controls .pause-symbol { display: none; }
.play-button.is-playing .play-symbol { display: none; }
.play-button.is-playing .pause-symbol { display: block; }
.music-player audio { display: none; }
.toast { position: fixed; left: 50%; bottom: 124px; z-index: 5; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(25,25,25,.94); box-shadow: 0 12px 42px rgba(0,0,0,.48); color: #f7f7f7; font-size: 14px; font-weight: 500; text-align: center; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; backdrop-filter: blur(14px); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 600px) { .profile { padding: 28px 16px; } .profile-content { width: min(100%, 440px); min-height: 360px; padding: 30px 20px; } .profile-content::before { border-radius: 16px; } .avatar { width: 94px; height: 94px; } h1 { font-size: 46px; } .tagline { max-width: 90vw; font-size: 18px; } .location { margin: 18px 0 12px; } .discord-presence { width: min(450px, 100%); } .socials { gap: 7px; margin-top: 10px; } .social-link { width: 39px; height: 39px; } }
@media (max-width: 600px) { .avatar-frame { flex-basis: 94px; width: 94px; height: 94px; } }
@media (max-width: 430px) { .presence-card { padding: 10px; } .presence-main { gap: 11px; } .presence-card.is-music .presence-image-wrap { flex-basis: 76px; width: 76px; height: 76px; } .presence-time-row { gap: 7px; font-size: 10px; } .music-player { gap: 10px; padding-right: 10px; } .music-cover { flex-basis: 54px; width: 54px; height: 54px; } .track-button { width: 25px; } .music-controls { gap: 4px; } }
@media (max-width: 600px) {
  .profile { position: fixed; inset: 0; display: block; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: max(16px, env(safe-area-inset-top)) 12px calc(130px + env(safe-area-inset-bottom)); scrollbar-width: none; }
  .profile::-webkit-scrollbar { display: none; }
  .profile-content { width: min(100%, 440px); min-height: 0; margin: 0 auto; padding: 22px 16px; }
  .profile-content .socials { order: 1; margin: 10px 0 12px; }
  .profile-content .discord-presence { order: 2; }
  .profile-content.has-dual-activity { padding: 14px 10px; }
  .profile-content.has-dual-activity .avatar-frame { flex-basis: 76px; width: 76px; height: 76px; }
  .profile-content.has-dual-activity .avatar { width: 76px; height: 76px; }
  .profile-content.has-dual-activity h1 { margin-top: 8px; font-size: 40px; }
  .profile-content.has-dual-activity .tagline { max-width: 94vw; margin-top: 10px; font-size: 16px; }
  .profile-content.has-dual-activity .location { margin: 10px 0 9px; font-size: 12px; }
  .profile-content.has-dual-activity .discord-presence { width: 100%; }
  .discord-presence.has-dual-activity .presence-list { gap: 6px; }
  .discord-presence.has-dual-activity .presence-card { padding: 8px 9px; border-radius: 12px; }
  .discord-presence.has-dual-activity .presence-heading { font-size: 10px; }
  .discord-presence.has-dual-activity .presence-main { gap: 8px; margin-top: 5px; }
  .discord-presence.has-dual-activity .presence-image-wrap,
  .discord-presence.has-dual-activity .presence-card.is-music .presence-image-wrap { flex-basis: 52px; width: 52px; height: 52px; border-radius: 9px; }
  .discord-presence.has-dual-activity .presence-details { font-size: 12px; }
  .discord-presence.has-dual-activity .presence-state,
  .discord-presence.has-dual-activity .presence-album { font-size: 10px; }
  .discord-presence.has-dual-activity .presence-time-row { gap: 6px; margin-top: 1px; font-size: 10px; }
  .profile-content.has-dual-activity .socials { gap: 5px; margin-top: 8px; }
  .profile-content.has-dual-activity .social-link { width: 36px; height: 36px; }
  .music-player { bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }