:root { color-scheme: dark; --accent:#9b63ff; --secondary:#ff8954; --text:#fbf8ff; --card:#13101f; --opacity:65%; --blur:16px; --radius:24px; --name-size:44px; }
* { box-sizing:border-box; }
html { min-height:100%; background:#080711; }
body { min-height:100vh; margin:0; color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body, button, input { font-family:var(--font,Inter,ui-sans-serif,system-ui,sans-serif); }
button, a { color:inherit; -webkit-tap-highlight-color:transparent; }
a { text-decoration:none; }
button { font:inherit; cursor:pointer; }
.scene { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:radial-gradient(ellipse at 20% 20%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 55%),radial-gradient(ellipse at 82% 35%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 48%),var(--background,#080711); }
.backdrop { position:absolute; inset:-24px; width:calc(100% + 48px); height:calc(100% + 48px); object-fit:cover; filter:blur(var(--background-blur,0px)); }
.shade { position:absolute; inset:0; background:rgba(0,0,0,var(--dim,.5)); }
.topbar { position:relative; z-index:2; width:min(800px,calc(100% - 36px)); height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:ui-sans-serif,system-ui,sans-serif; font-size:.8rem; font-weight:800; letter-spacing:.3em; }
.brand img { object-fit:contain; flex-shrink:0; }
.icon-button { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(10,8,18,.65); }
.icon-button svg { width:18px; height:18px; }
.page { position:relative; z-index:1; width:min(640px,calc(100% - 32px)); margin:28px auto; padding-bottom:35px; }
.profile-card { padding:38px 32px 30px; border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:var(--radius); background:color-mix(in srgb,var(--card) var(--opacity),transparent); backdrop-filter:blur(var(--blur)); box-shadow:0 28px 85px rgba(0,0,0,.3); transition:transform .18s; transform-style:preserve-3d; }
.identity { text-align:center; }
.avatar { width:110px; height:110px; object-fit:cover; border:2px solid color-mix(in srgb,var(--accent) 60%,white); border-radius:30px; background:var(--card); box-shadow:0 15px 38px color-mix(in srgb,var(--accent) 24%,transparent); }
.avatar[data-shape="circle"] { border-radius:50%; }
.avatar[data-shape="square"] { border-radius:4px; }
h1 { margin:24px 0 5px; font-size:clamp(24px,9vw,var(--name-size)); line-height:1.1; letter-spacing:-.04em; overflow-wrap:anywhere; }
.name-glow { text-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent); }
.handle { margin:0; opacity:.65; font-size:.9rem; }
.bio { margin:20px auto 0; max-width:490px; font-size:1rem; line-height:1.7; overflow-wrap:anywhere; white-space:pre-line; }
.location { margin:10px 0 0; opacity:.55; font-size:.82rem; }
.socials { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:23px; }
.social { width:43px; height:43px; display:grid; place-items:center; font-family:ui-sans-serif,system-ui,sans-serif; font-size:1.25rem; color:var(--icon,var(--accent)); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:13px; transition:.2s; }
.social:hover { transform:translateY(-3px); background:rgba(255,255,255,.12); }
.gradient-card { background:linear-gradient(135deg,color-mix(in srgb,var(--card) var(--opacity),transparent),color-mix(in srgb,var(--accent) 22%,transparent)); }
.social-glow .social { filter:drop-shadow(0 0 8px var(--icon,var(--accent))); }
.decorated-avatar { animation:avatar-pulse 3s ease-in-out infinite; }
.compact-play { border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); border-radius:10px; background:rgba(255,255,255,.04); padding:10px 15px; color:var(--text); font-size:.8rem; }
.links { display:grid; gap:10px; margin-top:27px; }
.link-card { min-height:69px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:16px 19px; border:1px solid rgba(255,255,255,.12); border-radius:calc(var(--radius) * .55); background:rgba(255,255,255,.04); transition:.2s; }
.link-card:hover { transform:translateY(-2px); border-color:var(--accent); }
.link-copy { display:grid; gap:5px; min-width:0; }
.link-copy strong { font-size:.93rem; overflow-wrap:anywhere; }
.link-copy span { opacity:.6; font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; }
.open { color:var(--accent); }
.music { margin:24px 0 0; padding:17px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.035); }
.music-title { font-size:.85rem; margin:0 0 10px; }
.music audio { display:block; width:100%; height:38px; }
.music-error { font-size:.8rem; color:#ffb4b4; margin:8px 0 0; }
.skills { display:grid; gap:15px; margin-top:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }
.skills h2 { font-size:.9rem; margin:0 0 2px; opacity:.65; }
.skill-label { display:flex; justify-content:space-between; gap:15px; font-size:.83rem; margin-bottom:7px; }
.skill-label span:last-child { opacity:.6; }
.skill-track { height:5px; border-radius:6px; overflow:hidden; background:rgba(255,255,255,.1); }
.skill-track i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--secondary)); border-radius:6px; }
.profile-footer { margin-top:25px; text-align:center; font-size:.72rem; line-height:2; opacity:.55; }
.profile-footer a { opacity:1; }
.loading,.empty { padding:65px 16px; text-align:center; }
.empty h1 { font-size:42px; }
.empty p { opacity:.65; line-height:1.6; }
.enter-gate { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:22px; border:0; background:rgba(7,5,13,.85); backdrop-filter:blur(18px); }
.enter-gate span { display:grid; gap:14px; text-align:center; }
.enter-gate strong { font-size:clamp(24px,6vw,38px); text-shadow:0 0 25px var(--accent); }
.enter-gate small { opacity:.55; letter-spacing:.15em; font-size:.65rem; text-transform:uppercase; }
.effects { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.particle { position:absolute; left:var(--x); top:-20px; background:var(--text); opacity:.4; width:4px; height:4px; border-radius:50%; animation:fall var(--duration) linear infinite; animation-delay:var(--delay); }
.rain .particle { width:1px; height:30px; background:linear-gradient(transparent,var(--text)); opacity:.25; }
.stars .particle { top:var(--y); width:2px; height:2px; animation:twinkle var(--duration) ease-in-out infinite; }
.cursor-glow { position:fixed; z-index:15; pointer-events:none; width:16px; height:16px; border:1px solid var(--accent); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 22px var(--accent); opacity:0; }
.cursor-glow img { width:32px; height:32px; object-fit:contain; transform:translate(-8px,-8px); }
.toast { position:fixed; z-index:30; left:50%; bottom:24px; transform:translateX(-50%); padding:12px 17px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:#171222; font-size:.8rem; }
.preview-label { position:relative; z-index:3; text-align:center; padding:8px; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; opacity:.5; }
body.preview .topbar { display:none; }
body.preview .page { width:calc(100% - 24px); margin:18px auto; padding-bottom:10px; }
body.preview .profile-card { padding:28px 19px; }
body.preview .enter-gate { position:absolute; min-height:100vh; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@keyframes fall { to { transform:translate(40px,110vh); } }
@keyframes twinkle { 50% { opacity:.1; transform:scale(.5); } }
@keyframes avatar-pulse { 50% { box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 25%,transparent),0 0 25px color-mix(in srgb,var(--accent) 40%,transparent); } }
@media(max-width:560px) { .profile-card { padding:28px 20px; } .page { margin-top:15px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } .particle { display:none; } }