.profile-page{--profile-accent:#c6adff;--profile-ground:#111019;--panel-alpha:.78;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;min-height:560px;padding:68px 24px;background:var(--profile-ground);color:#f8f7fc;overflow:hidden;font-family:"DM Sans",system-ui,sans-serif}
.profile-page .profile-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.profile-page .profile-shade{position:absolute;inset:0;background:rgba(5,4,13,var(--shade-alpha,.55));z-index:-2}
.profile-page .profile-atmosphere{position:absolute;inset:-12%;z-index:-1;pointer-events:none;opacity:.52}
.profile-page.effect-stars .profile-atmosphere{background-image:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 68% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 42% 74%,#fff 0 1px,transparent 2px),radial-gradient(circle at 84% 68%,#fff 0 1px,transparent 2px);background-size:160px 170px,210px 210px,185px 190px,260px 210px;animation:stars-drift 36s linear infinite}
.profile-page.effect-rain .profile-atmosphere{background-image:repeating-linear-gradient(104deg,transparent 0 22px,rgba(255,255,255,.15) 23px,transparent 24px 58px);background-size:180px 180px;animation:rain-drift 1.2s linear infinite}
@keyframes stars-drift{to{transform:translate3d(-35px,25px,0)}}@keyframes rain-drift{to{transform:translate3d(-40px,180px,0)}}
.profile-page .profile-panel{width:min(100%,490px);overflow:hidden;border:1px solid rgba(255,255,255,.24);border-radius:22px;background:rgba(20,18,29,var(--panel-alpha));box-shadow:0 28px 90px rgba(0,0,0,.32);backdrop-filter:blur(22px)}
.profile-page .profile-banner{display:block;width:100%;height:120px;object-fit:cover}
.profile-page .profile-inner{padding:30px 32px 31px}
.profile-page .profile-header{display:flex;align-items:center;gap:17px;min-width:0}
.profile-page .profile-avatar{position:relative;width:76px;height:76px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--profile-accent);color:var(--accent-ink);box-shadow:0 0 0 3px rgba(255,255,255,.11)}
.profile-page .profile-avatar>img:first-child{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-page .profile-avatar>span{font-size:30px;font-weight:700}
.profile-page .profile-avatar .profile-decoration{position:absolute;left:-11px;top:-11px;width:98px;height:98px;object-fit:contain}
.profile-page .profile-identity{min-width:0}.profile-page .profile-identity h1{font-size:27px;line-height:1.05;letter-spacing:-.045em;margin:0;overflow-wrap:anywhere}.profile-page .profile-handle{font-size:12px;color:#d2cfdb;margin:7px 0 0;overflow-wrap:anywhere}
.profile-page .profile-badges{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:17px 0 0}.profile-page .profile-badges span{font-size:11px;padding:5px 8px;border-radius:5px;background:rgba(255,255,255,.1);color:#eceaf1}.profile-page .profile-badges img{width:20px;height:20px;object-fit:contain}
.profile-page .profile-headline{font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.27;margin:22px 0 0}.profile-page .profile-bio{font-size:13px;line-height:1.55;color:#d5d2df;margin:11px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.profile-page .profile-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:26px 0 0}.profile-page .profile-links a{display:flex;align-items:center;gap:9px;min-width:0;padding:12px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#fff;text-decoration:none;font-size:13px;font-weight:600;transition:background .16s,border-color .16s,transform .16s}.profile-page .profile-links a:hover{border-color:var(--profile-accent);background:rgba(255,255,255,.15);transform:translateY(-2px)}.profile-page .profile-links a img{width:17px;height:17px;flex:none;filter:invert(1)}.profile-page .profile-links a>span:nth-last-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-page .link-arrow{margin-left:auto;color:var(--profile-accent)}.profile-page .empty-links{font-size:12px;color:#bab6c8;margin:0}
.profile-page .profile-music{position:absolute;left:22px;bottom:18px;max-width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 13px;background:rgba(18,17,25,.72);color:white;font-size:12px;backdrop-filter:blur(12px)}.profile-page .profile-music:hover{border-color:var(--profile-accent)}
.profile-page .profile-enter{position:absolute;z-index:10;inset:0;width:100%;height:100%;display:grid;place-items:center;border:0;background:rgba(8,7,14,.88);color:#fff;font-size:18px;font-weight:600;letter-spacing:-.015em}.profile-page .profile-enter:hover{color:var(--profile-accent)}
.profile-page.theme-poster .profile-panel{border-color:var(--profile-accent);border-width:2px;border-radius:4px;background:rgba(25,17,20,var(--panel-alpha));backdrop-filter:none}.profile-page.theme-poster .profile-identity h1{font-size:35px;text-transform:uppercase;font-weight:700}.profile-page.theme-poster .profile-links a{border-radius:3px;background:var(--profile-accent);color:var(--accent-ink);border-color:var(--profile-accent)}.profile-page.theme-poster .profile-links a img{filter:var(--accent-icon-filter)}.profile-page.theme-poster .link-arrow{color:var(--accent-ink)}
.profile-page.theme-night .profile-panel{border-color:rgba(255,255,255,.12);border-radius:12px;background:rgba(9,10,14,var(--panel-alpha));backdrop-filter:none}.profile-page.theme-night .profile-avatar{box-shadow:0 0 0 2px var(--profile-accent)}.profile-page.theme-night .profile-links a{background:#191a20;border-color:#33343b}
.profile-page.layout-center .profile-header{flex-direction:column;text-align:center}.profile-page.layout-center .profile-identity{text-align:center}.profile-page.layout-center .profile-badges{justify-content:center}.profile-page.layout-center .profile-headline,.profile-page.layout-center .profile-bio{text-align:center}
.profile-page.layout-stack .profile-links{grid-template-columns:1fr}.profile-page.layout-stack .profile-panel{width:min(100%,460px)}
.profile-page.layout-split .profile-panel{width:min(100%,760px)}.profile-page.layout-split .profile-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.82fr);column-gap:28px}.profile-page.layout-split .profile-header,.profile-page.layout-split .profile-badges,.profile-page.layout-split .profile-headline,.profile-page.layout-split .profile-bio{grid-column:1}.profile-page.layout-split .profile-links{grid-column:2;grid-row:1 / span 4;grid-template-columns:1fr;align-content:center;margin:0}.profile-page.layout-split .profile-header{align-self:end}.profile-page.layout-split .profile-bio{align-self:start}
.preview-stage{padding:0;overflow:hidden;background:#111019;min-height:560px}.preview-stage .profile-page{min-height:560px;padding:55px 20px}.preview-stage .profile-panel{max-width:440px}.preview-stage .layout-split .profile-panel{max-width:760px}.preview-stage .profile-page.layout-split .profile-panel{max-width:100%}
.public-view{display:block;min-height:100svh;padding:0;background:#111019}.public-view .profile-page{min-height:100svh}.public-view .public-brand,.public-view .public-end{position:absolute;z-index:5;color:#e4e1ec;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.01em;margin:0;width:auto}.public-view .public-brand{top:24px;left:26px}.public-view .public-end{right:26px;bottom:20px;color:#b9b5c5}.public-view .public-end a{color:#fff}
@media(max-width:700px){.profile-page{padding:72px 16px 66px}.profile-page .profile-inner{padding:26px 22px 28px}.profile-page .profile-panel{border-radius:16px}.profile-page .profile-identity h1{font-size:25px}.profile-page .profile-links{grid-template-columns:1fr}.profile-page.layout-split .profile-inner{display:block}.profile-page.layout-split .profile-links{margin-top:24px}.preview-stage .profile-page{min-height:500px;padding:40px 13px}.preview-stage .profile-page .profile-inner{padding:22px 18px}.public-view .public-brand{left:17px;top:16px}.public-view .public-end{right:17px;bottom:15px}}
@media(prefers-reduced-motion:reduce){.profile-page .profile-atmosphere{animation:none!important}.profile-page .profile-links a{transition:none}}
.profile-page .profile-badges:has(.profile-badge-icon){width:max-content;max-width:100%;gap:2px;padding:4px 6px;border-radius:8px;background:rgba(175,190,220,.32)}
.profile-page .profile-badges .profile-badge-icon,.profile-page .profile-badges .profile-badge-more{display:grid;place-items:center;min-width:22px;height:22px;padding:0 2px;background:transparent;color:#fff;font-size:18px;line-height:1}
.profile-page .profile-badges .profile-badge-more{font-size:12px}
.profile-page.font-serif{font-family:Georgia,"Times New Roman",serif}.profile-page.font-serif .profile-identity h1,.profile-page.font-serif .profile-headline{letter-spacing:-.025em}
.profile-page.font-mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.profile-page.font-mono .profile-identity h1,.profile-page.font-mono .profile-headline{letter-spacing:-.04em}
.profile-page.corner-square .profile-panel,.profile-page.corner-square .profile-links a{border-radius:2px}
.profile-page.corner-round .profile-panel{border-radius:30px}.profile-page.corner-round .profile-links a{border-radius:999px}
.profile-page.links-outline .profile-links a{background:transparent;border:1px solid var(--profile-accent);color:#fff}.profile-page.links-outline .profile-links a img{filter:invert(1)}
.profile-page.links-plain .profile-links a{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;padding-left:0;padding-right:0;color:#fff}.profile-page.links-plain .profile-links a img{filter:invert(1)}
.profile-page.link-display-icons .profile-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}.profile-page.link-display-icons .profile-links a{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:12px}.profile-page.link-display-icons .profile-links a img{width:23px;height:23px}.profile-page.link-display-icons .profile-links a>span:nth-last-child(2),.profile-page.link-display-icons .profile-links .link-arrow{display:none}.profile-page .profile-link-fallback{display:grid;place-items:center;width:20px;height:20px;font-size:17px;font-weight:700}.profile-page.link-display-icons .profile-link-fallback{font-size:21px}.profile-page.link-hover-glow .profile-links a:hover{transform:translateY(-2px);box-shadow:0 0 18px var(--profile-accent)}.profile-page.link-hover-tilt .profile-links a:hover{transform:translateY(-3px) rotate(-5deg)}.profile-page.link-hover-lift .profile-links a:hover{transform:translateY(-4px)}
.profile-page.text-glow .profile-identity h1,.profile-page.text-glow .profile-headline{text-shadow:0 0 16px var(--profile-accent)}.profile-page.text-shadow .profile-identity h1,.profile-page.text-shadow .profile-headline{text-shadow:3px 4px 0 rgba(0,0,0,.55)}.profile-page.text-shine .profile-identity h1,.profile-page.text-shine .profile-headline{background:linear-gradient(110deg,#fff 20%,var(--profile-accent) 45%,#fff 70%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:profile-shine 4s linear infinite}@keyframes profile-shine{to{background-position:-220% 0}}
.profile-page.header-line .profile-header{border-bottom:1px solid var(--profile-accent);padding-bottom:16px}.profile-page.header-glow .profile-header{padding:12px;border:1px solid var(--profile-accent);border-radius:12px;box-shadow:0 0 20px rgba(0,0,0,.3),inset 0 0 10px var(--profile-accent)}.profile-page.header-floating .profile-header{padding:12px;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:0 12px 22px rgba(0,0,0,.25)}
@media(prefers-reduced-motion:reduce){.profile-page.text-shine .profile-identity h1,.profile-page.text-shine .profile-headline{animation:none;background-position:center}.profile-page .profile-links a{transition:none}}
.profile-page.link-hover-none .profile-links a:hover{transform:none;box-shadow:none}
/* Social icon strip, matching the reference profile. */
.profile-page.link-display-icons .profile-links{width:100%;justify-content:center;align-items:center;gap:15px;margin:30px 0 0;padding:21px 0 0;border-top:1px solid rgba(255,255,255,.35)}
.profile-page.layout-split.link-display-icons .profile-links{grid-column:1 / -1;grid-row:auto;align-content:initial}
.profile-page.link-display-icons .profile-links a,.profile-page.link-display-icons.links-outline .profile-links a,.profile-page.link-display-icons.links-plain .profile-links a{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;opacity:.83;transition:transform .2s ease,opacity .2s ease,filter .2s ease}
.profile-page.link-display-icons .profile-links a:hover,.profile-page.link-display-icons .profile-links a:focus-visible{background:transparent;border:0;box-shadow:none;opacity:1}
.profile-page.link-display-icons .profile-links a img{display:block;width:29px;height:29px;filter:invert(1)}
.profile-page.link-display-icons .profile-link-fallback{font-size:25px;font-weight:600}
.profile-page.link-display-icons.link-hover-glow .profile-links a:hover{filter:drop-shadow(0 0 8px var(--profile-accent));transform:translateY(-2px)}
.profile-page.link-display-icons.link-hover-tilt .profile-links a:hover{transform:translateY(-3px) rotate(-8deg)}
.profile-page.link-display-icons.link-hover-lift .profile-links a:hover{transform:translateY(-5px)}
.profile-page.link-display-icons.link-hover-none .profile-links a:hover{transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.profile-page.link-display-icons .profile-links a{transition:none}}
/* Motion choices inspired by the referenced profile. */
.profile-page.link-display-icons .profile-links{perspective:400px;gap:12px}
.profile-page.link-display-icons .profile-links a{width:38px;height:38px;overflow:visible}
.profile-page.link-display-icons .profile-links a img{width:36px;height:36px;filter:invert(1) drop-shadow(0 0 7px rgba(255,255,255,.65))}
.profile-page.link-display-icons.link-hover-pop3d .profile-links a:hover,.profile-page.link-hover-pop3d .profile-links a:hover{transform:scale(1.4) rotateY(15deg);filter:drop-shadow(0 0 8px rgba(255,255,255,.75))}
.profile-page.header-tilt .profile-panel{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease-out;transform-style:preserve-3d}
.profile-page.avatar-orbit .profile-avatar::after{content:"";position:absolute;inset:-7px;border:2px dashed var(--profile-accent);border-radius:50%;pointer-events:none;animation:profile-orbit 3s linear infinite}
.profile-page.avatar-glitch .profile-avatar:hover{animation:profile-glitch .25s steps(2,end) 2}
@keyframes profile-orbit{to{transform:rotate(360deg)}}
@keyframes profile-glitch{0%,100%{transform:translate(0)}25%{transform:translate(-2px,2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-1px,-1px)}}
@media(prefers-reduced-motion:reduce){.profile-page.avatar-orbit .profile-avatar::after,.profile-page.avatar-glitch .profile-avatar:hover{animation:none}.profile-page.header-tilt .profile-panel{transform:none;transition:none}.profile-page.link-hover-pop3d .profile-links a:hover{transform:none;filter:none}}
.profile-page .profile-banner-frame{flex:none;width:140px;height:90px;margin-left:auto;overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.08)}
.profile-page .profile-banner-frame .profile-banner{display:block;width:100%;height:100%;object-fit:cover;transform-origin:center}
.profile-page.layout-center .profile-banner-frame{margin:2px auto 0}
@media(max-width:700px){.profile-page .profile-banner-frame{width:102px;height:66px;border-radius:8px}.profile-page.layout-split .profile-header{flex-wrap:wrap}.profile-page.layout-split .profile-banner-frame{margin-left:0}}
/* Keep the cover compact in each profile layout. */
.profile-page.layout-center .profile-header:has(.profile-banner-frame){display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:22px;row-gap:12px;text-align:center}
.profile-page.layout-center .profile-header:has(.profile-banner-frame) .profile-avatar{grid-column:1;grid-row:1}
.profile-page.layout-center .profile-header:has(.profile-banner-frame) .profile-banner-frame{grid-column:2;grid-row:1;margin:0}
.profile-page.layout-center .profile-header:has(.profile-banner-frame) .profile-identity{grid-column:1 / -1;grid-row:2;text-align:center}
.profile-page.layout-split .profile-banner-frame{width:116px;height:76px}
.profile-page.layout-stack .profile-banner-frame{width:128px;height:82px}
@media(max-width:700px){.profile-page.layout-center .profile-header:has(.profile-banner-frame){column-gap:14px}.profile-page.layout-split .profile-banner-frame,.profile-page.layout-stack .profile-banner-frame{width:102px;height:66px}}
/* Give the cover enough presence without crowding identity. */
.profile-page.layout-center .profile-banner-frame{width:190px;height:122px}
.profile-page.layout-stack .profile-banner-frame{width:184px;height:118px}
.profile-page.layout-split.link-display-icons .profile-inner>.profile-banner-frame{grid-column:2;grid-row:1 / span 4;align-self:center;width:100%;height:160px;margin:0}
.profile-page.layout-split.link-display-cards .profile-banner-frame{width:136px;height:88px}
@media(max-width:700px){.profile-page.layout-center .profile-banner-frame{width:165px;height:106px}.profile-page.layout-stack .profile-banner-frame{width:150px;height:96px}.profile-page.layout-split.link-display-icons .profile-inner>.profile-banner-frame{width:min(100%,220px);height:140px;margin:14px auto 0}.profile-page.layout-split.link-display-cards .profile-banner-frame{width:124px;height:80px}}