:root{--bg:#121216;--surface:rgba(255,255,255,.08);--text:#fff;--muted:rgba(255,255,255,.82);--rad:18px;--max:509px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{background:var(--bg);color:var(--text);font-family:"Inter",system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100svh;overflow-x:hidden}
img,a{-webkit-user-drag:none}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg img{width:100%;height:100%;object-fit:cover;filter:blur(44px) saturate(175%) brightness(.62);transform:scale(1.18)}
.page{position:relative;isolation:isolate;z-index:1;max-width:var(--max);margin:0 auto;min-height:100svh;background:rgba(20,20,24,.74);padding:0 0 calc(28px + env(safe-area-inset-bottom,0px))}
.page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 50% at 50% 0%,rgba(255,255,255,.12),transparent 65%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.page{background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(18,18,24,.42) 42%,rgba(12,12,16,.58) 100%);-webkit-backdrop-filter:blur(32px) saturate(185%) brightness(1.04);backdrop-filter:blur(32px) saturate(185%) brightness(1.04)}
}
@media (min-width:540px){
.page{margin:24px auto;min-height:0;border-radius:28px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.1),inset 1px 0 0 rgba(255,255,255,.14),inset -1px 0 0 rgba(255,255,255,.14),0 28px 70px rgba(0,0,0,.58)}
}
a{text-decoration:none;color:inherit;touch-action:manipulation;-webkit-touch-callout:none}
.card,.soc,.btn{cursor:pointer;user-select:none;-webkit-user-select:none}
.card:focus-visible,.soc:focus-visible,.btn:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}
.profile{text-align:center}
.hero{position:relative;width:100%;aspect-ratio:14/11;overflow:hidden}
@media (min-width:540px){.hero{aspect-ratio:566/546}}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.94) 54%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.54) 74%,rgba(0,0,0,.28) 84%,rgba(0,0,0,.09) 93%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.94) 54%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.54) 74%,rgba(0,0,0,.28) 84%,rgba(0,0,0,.09) 93%,transparent 100%)}
.hero .scrim{display:none}
.hero-meta{position:absolute;inset-inline:0;bottom:10px;padding:0 24px;text-align:center;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 28px rgba(0,0,0,.55);z-index:2}
.name{position:relative;display:inline-block;color:#fff;font-size:clamp(26px,7vw,32px);font-weight:750;line-height:1.1;letter-spacing:-.018em}
.badge{position:absolute;left:100%;top:0;bottom:0;margin-left:6px;display:inline-flex;align-items:center}
.badge svg{width:.85em;height:.85em;display:block;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.handle{font-size:15px;color:rgba(255,255,255,.94);margin-top:4px}
.bio{font-size:14px;margin-top:8px;padding:0 20px;white-space:pre-line}
.socials{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:clamp(8px,2.5vw,12px);margin:8px 12px 18px;flex-wrap:nowrap}
.soc{width:clamp(38px,10.2vw,44px);height:clamp(38px,10.2vw,44px);flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px rgba(0,0,0,.28);transition:transform .12s ease-out,opacity .2s ease}
.soc:active{transform:scale(.94)}
.soc svg,.soc img{width:20px;height:20px;display:block;object-fit:contain}
.soc-ring{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 6px 14px rgba(0,0,0,.28)}
.links{display:flex;flex-direction:column;gap:14px;padding:0 16px}
.half-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{position:relative;display:block;overflow:hidden;border-radius:var(--rad);background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.1),0 10px 26px -8px rgba(0,0,0,.45);transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease}
.card:active{transform:scale(.96);transition-duration:.1s}
.card.premium{aspect-ratio:1.73585/1}
.card.half{aspect-ratio:3/4}
.card .img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 16%;transition:transform .5s cubic-bezier(.22,1,.36,1),filter .3s ease}
.card .scrim{position:absolute;inset-inline:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.68),rgba(0,0,0,.18) 55%,transparent);pointer-events:none}
.label{position:absolute;inset-inline:0;bottom:0;padding:16px 16px 10px;font-size:18px;font-weight:750;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.9);z-index:2;transition:transform .3s ease}
.half .label{font-size:14px;padding:10px}
.lock,.chip{position:absolute;top:12px;z-index:2;border-radius:999px;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 4px 12px rgba(0,0,0,.35);display:flex;align-items:center}
.lock{left:12px;width:40px;height:40px;padding:7px;justify-content:center;border-radius:50%;transition:transform .25s ease}
.lock svg{width:100%;height:100%}
.chip{right:12px;padding:4px 10px;font-size:11px;font-weight:600}
.shine::after{content:"";position:absolute;inset:-20%;pointer-events:none;z-index:2;background:linear-gradient(120deg,#fff0,rgba(255,255,255,.45),#fff0);mix-blend-mode:screen;opacity:.8;animation:shine 2s linear infinite alternate}
@keyframes shine{0%{transform:translate(-120%)}100%{transform:translate(120%)}}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:var(--rad);background:rgba(255,255,255,.92);color:#000;font-size:15px;font-weight:600;box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(0,0,0,.28);transition:transform .12s ease-out,box-shadow .3s ease,background .2s ease}
.btn:active{transform:scale(.96)}
.btn .icon{font-size:18px;line-height:1}
.section{text-align:center;font-size:16px;font-weight:700;padding:6px 0 0;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.footer{text-align:center;font-size:12px;color:var(--muted);padding:22px 0 4px}
.footer a{color:inherit}
.io{opacity:0}
.in{opacity:1;animation:pop .55s cubic-bezier(.22,1,.36,1) backwards}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.985)}}
@media (hover:hover) and (pointer:fine){
.soc:hover{transform:scale(1.1)}
.card:hover{transform:scale(1.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(255,255,255,.18),0 16px 34px -6px rgba(0,0,0,.6)}
.card:hover .img{transform:scale(1.05);filter:brightness(1.06)}
.card:hover .label{transform:translateY(-2px)}
.card:hover .lock{transform:scale(1.1)}
.btn:hover{transform:translateY(-1px);background:#fff;box-shadow:0 12px 26px rgba(0,0,0,.38)}
}
@media (prefers-reduced-transparency:reduce){.page{background:#222226;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.shine::after,.in{animation:none}.io{opacity:1}}