@font-face{font-family:"Figtree";font-style:normal;font-weight:500 900;font-display:swap;src:url(assets/figtree.woff2) format("woff2")}
*{box-sizing:border-box}
:root{--bg:#070d1f;--card:#0e1834;--line:#22305a;--blue:#3b8cff;--blue2:#5aa2ff;--text:#f3f6ff;--muted:#a9b7d9}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:16px/1.5 "Figtree",-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.glow{position:fixed;inset:0;min-height:100lvh;pointer-events:none;background:radial-gradient(60% 40% at 50% 0%,rgba(59,140,255,.28),transparent 70%),radial-gradient(50% 35% at 100% 100%,rgba(124,58,237,.16),transparent 70%)}
.wrap{position:relative;max-width:460px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom))}
.hero{text-align:center}
.avatar{width:148px;height:148px;margin:6px auto 18px;border-radius:50%;padding:4px;background:linear-gradient(135deg,#5aa2ff,#7c3aed);box-shadow:0 12px 40px rgba(59,140,255,.35)}
.avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--bg)}
.eyebrow{margin:0 0 4px;color:var(--blue2);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
h1{margin:0 0 10px;font-size:clamp(32px,9vw,42px);line-height:1.1;letter-spacing:-.02em;font-weight:800}
.lede{margin:0 auto 22px;max-width:36ch;color:var(--muted);font-size:16.5px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 18px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.label{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.label.small{font-size:12px}.opt{text-transform:none;letter-spacing:0;font-weight:500;opacity:.85}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border-radius:16px;border:0;font-family:inherit;font-size:17px;font-weight:700;line-height:1;cursor:pointer;text-decoration:none;transition:transform .12s ease,background .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.primary{background:linear-gradient(180deg,#4a97ff,#2f7bf0);color:#fff;box-shadow:0 8px 24px rgba(59,140,255,.4)}
.primary.ok{background:linear-gradient(180deg,#22c58b,#14a874);box-shadow:0 8px 24px rgba(34,197,139,.35)}
.ghost{background:transparent;color:var(--text);border:1.5px solid #34467a}
.ghost:hover{border-color:var(--blue2)}
.qr-wrap{margin:18px 0 0;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.qr{display:block;width:min(220px,62vw);height:auto;margin:0 auto;padding:10px;background:#fff;border-radius:18px;box-shadow:0 0 0 4px rgba(90,162,255,.25)}
.hint{margin:10px 0 0;color:var(--muted);font-size:14px}
.xaman{margin-top:18px}
.xaman .label.small{margin-bottom:10px}
.helper{margin:16px 0 0;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.55}
.helper span{display:block}
.helper strong{color:var(--text);font-weight:600}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}
.chip{min-height:42px;border-radius:12px;border:1px solid var(--line);background:#0a1430;color:var(--text);font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip[aria-pressed="true"]{background:rgba(59,140,255,.18);border-color:var(--blue2);color:#fff}
.notes{list-style:none;margin:18px 0 0;padding:14px;border-radius:14px;background:rgba(59,140,255,.07);border:1px solid rgba(90,162,255,.22);font-size:14.5px;color:#d5def5}
.notes li{position:relative;padding-left:22px;margin:4px 0}
.notes li::before{content:"";position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--blue2)}
.notes strong{color:#fff}
.xlink-unused{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;min-height:52px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:600}
.xlink svg{width:18px;height:18px;fill:currentColor}
.foot{margin-top:22px;text-align:center;color:#7f8db3;font-size:13px}
.foot p{margin:6px 0}
a:focus-visible,button:focus-visible{outline:3px solid #9cc4ff;outline-offset:3px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:#fff;color:#0b1430;padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:700px){.wrap{padding-top:56px}.avatar{width:168px;height:168px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.handle{margin:-4px 0 10px;font-weight:600;font-size:16px}
.handle a{color:var(--blue2);text-decoration:none}
.handle a:hover{text-decoration:underline}
.verified{font-size:.6em;vertical-align:.25em}
.tip-title{margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:-.01em;text-align:center}
.tip-sub{margin:0 auto 18px;max-width:34ch;color:var(--muted);font-size:14.5px;text-align:center;line-height:1.45}
.links{margin-top:30px}
.section-label{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}

.link-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}

h1{display:inline-flex;align-items:center;gap:10px;margin:0 0 6px;font-size:clamp(40px,11vw,52px);font-weight:900;letter-spacing:-.02em}
.seal{width:30px;height:30px;flex:0 0 30px;filter:drop-shadow(0 2px 8px rgba(59,140,255,.55))}
.seal .s{fill:#3b8cff}
.seal .c{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.22em;color:var(--blue2)}
.eyebrow i{font-style:normal;opacity:.7;margin:0 .25em}
/* ===== v3 premium ===== */
.glow{overflow:hidden;background:radial-gradient(70% 45% at 50% -5%,rgba(59,140,255,.32),transparent 70%),radial-gradient(50% 35% at 100% 100%,rgba(124,58,237,.16),transparent 70%)}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.o1{width:340px;height:340px;left:-120px;top:18%;background:#1f5fd6;animation:drift1 18s ease-in-out infinite alternate}
.o2{width:300px;height:300px;right:-110px;top:48%;background:#6d35d8;opacity:.35;animation:drift2 22s ease-in-out infinite alternate}
.o3{width:260px;height:260px;left:30%;top:-120px;background:#3b8cff;opacity:.4;animation:drift3 16s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(120px,-60px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-120px,80px) scale(1.1)}}
@keyframes drift3{to{transform:translate(-60px,60px) scale(1.2)}}
.dust{position:absolute;inset:-100% 0 0;background-image:radial-gradient(1.5px 1.5px at 20px 30px,rgba(170,205,255,.8),transparent 60%),radial-gradient(1px 1px at 90px 120px,rgba(170,205,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 160px 60px,rgba(200,220,255,.7),transparent 60%),radial-gradient(1px 1px at 230px 170px,rgba(170,205,255,.5),transparent 60%),radial-gradient(1.2px 1.2px at 300px 20px,rgba(190,170,255,.6),transparent 60%);background-size:340px 220px;animation:dust 60s linear infinite;opacity:.7}
@keyframes dust{to{transform:translateY(50%)}}
/* avatar: spinning conic ring */
.avatar{position:relative;background:none;padding:5px;isolation:isolate;animation:none;box-shadow:0 14px 50px rgba(59,140,255,.45)}
.avatar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#5aa2ff,#7c3aed,#22d3ee,#5aa2ff);animation:spin 6s linear infinite;z-index:-1}
.avatar::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(closest-side,rgba(59,140,255,.45),transparent);z-index:-2;animation:pulse 3.5s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
h1 span{background:linear-gradient(180deg,#fff 30%,#b9d6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* glass cards */
.card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(140,180,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.45)}
.link{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;min-height:78px;padding:14px 16px 14px 14px;border-radius:20px;color:var(--text);text-decoration:none;
 background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) padding-box,linear-gradient(135deg,rgba(120,175,255,.65),rgba(124,58,237,.35) 60%,rgba(120,175,255,.25)) border-box;
 border:1px solid transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.35);
 transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.link::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.link:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 40px rgba(59,140,255,.28)}
.link:hover::after{left:120%}
.link:active{transform:scale(.98)}
.link.feat{background:linear-gradient(180deg,rgba(74,151,255,.30),rgba(47,123,240,.12)) padding-box,linear-gradient(135deg,#9ed0ff,#3b8cff 50%,#7c3aed) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 0 4px rgba(90,162,255,.10),0 16px 44px rgba(47,123,240,.38)}
.link.feat::after{animation:shine 4.5s ease-in-out 1.2s infinite}
@keyframes shine{0%{left:-60%}35%,100%{left:120%}}
.ic{flex:0 0 46px;width:46px;height:46px;border-radius:13px;object-fit:cover;background:#fff;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,10,40,.45)}
.lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ln{font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.005em}
.ls{color:#c3cfee;font-size:14px;line-height:1.35;font-weight:500}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.badge.partner{background:linear-gradient(180deg,#22d39a,#11a878);color:#fff;box-shadow:0 2px 10px rgba(34,197,139,.35)}
.badge.ref{background:rgba(90,162,255,.16);color:#bcd8ff;border:1px solid rgba(90,162,255,.45)}
.badge.age{background:rgba(255,255,255,.08);color:#e7ecff;border:1px solid rgba(255,255,255,.35)}
.lnote{display:block;margin-top:6px;color:#8e9bbd;font-size:11.5px;line-height:1.35;font-weight:500}
.badge.ca{background:#fff;color:#d52b1e}
.go{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:#9cc4ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.link:hover .go,.xcta:hover .go{transform:translate(2px,-2px)}
/* X CTA */
.xcta{display:flex;align-items:center;gap:14px;margin:18px 0 0;padding:14px 16px 14px 14px;min-height:72px;border-radius:20px;background:#fff;color:#0b1430;text-decoration:none;box-shadow:0 14px 40px rgba(59,140,255,.30),0 0 0 1px rgba(255,255,255,.6);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.xcta:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(59,140,255,.45)}
.xcta:active{transform:scale(.98)}
.xcta-ic{flex:0 0 46px;width:46px;height:46px;border-radius:13px;background:#000;display:flex;align-items:center;justify-content:center}
.xcta-ic svg{width:21px;height:21px;fill:#fff}
.xcta-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.xcta-a{font-size:18px;font-weight:800;letter-spacing:-.005em;line-height:1.25}
.xcta-b{font-size:14px;color:#4a5677;font-weight:500}
.xcta .go{stroke:#0b1430}
.section-label{margin:30px 0 12px;font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue2);text-align:center}
.links{margin-top:0}
.lede,.tip-sub{text-wrap:balance}
.foot .made{color:#66749a}
/* scroll-in */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.hero{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 .orb,.dust,.avatar::before,.avatar::after,.link.feat::after,.hero{animation:none!important}
 .js .reveal{opacity:1;transform:none;transition:none}
}

/* ===== v3: richer purple theme, gold accents (Fuzzy's beret), small avatar, footer X button ===== */
:root{--bg:#12082a;--card:#1c0f3d;--line:#3b2670;--purple:#8b5cf6;--purple2:#b79bff;--gold:#f4c25b;--gold2:#ffdf8f;--text:#f7f3ff;--muted:#c4b6e6;--blue2:#c9b6ff}
body{background:radial-gradient(120% 60% at 50% 0%,#24104f 0%,var(--bg) 55%) fixed,var(--bg)}
.glow{background:radial-gradient(70% 42% at 50% -6%,rgba(139,92,246,.40),transparent 70%),radial-gradient(45% 30% at 85% 12%,rgba(244,194,91,.10),transparent 70%),radial-gradient(55% 38% at 0% 100%,rgba(124,58,237,.22),transparent 70%)}
.o1{background:#5b2bc4;opacity:.45}
.o2{background:#a14fd6;opacity:.28}
.o3{background:#7c4dff;opacity:.35}
.dust{opacity:.55;filter:hue-rotate(40deg)}
/* small avatar with purple→gold ring */
.avatar{width:112px;height:112px;margin:4px auto 16px;padding:4px;box-shadow:0 10px 34px rgba(139,92,246,.45),0 0 0 1px rgba(244,194,91,.25)}
.avatar::before{background:conic-gradient(from 210deg,#f4c25b,#8b5cf6 30%,#c084fc 50%,#ffdf8f 65%,#7c3aed 85%,#f4c25b);animation-duration:9s}
.avatar::after{inset:-12px;background:radial-gradient(closest-side,rgba(168,118,255,.45),transparent)}
.avatar img{border:3px solid #160a33}
.avatar picture{display:block;width:100%;height:100%}
@media (min-width:700px){.avatar{width:120px;height:120px}}
h1 span{background:linear-gradient(180deg,#fff 35%,#e3d6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:var(--gold)}
.eyebrow i{color:var(--gold2)}
.handle a{color:var(--purple2)}
.lede{color:var(--muted)}
.section-label{color:var(--gold);display:flex;align-items:center;justify-content:center;gap:10px}
.section-label::before,.section-label::after{content:"";height:1px;width:34px;background:linear-gradient(90deg,transparent,rgba(244,194,91,.7))}
.section-label::after{transform:scaleX(-1)}
/* cards */
.card{background:linear-gradient(180deg,rgba(183,155,255,.10),rgba(139,92,246,.03));border:1px solid rgba(183,155,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(8,2,24,.55)}
.tip-title{color:#fff}
.tip-sub{color:var(--muted)}
.primary{background:linear-gradient(180deg,#9b6bff,#6d3ae0);box-shadow:0 8px 26px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.ghost{border-color:rgba(183,155,255,.45)}
.ghost:hover{border-color:var(--gold)}
.chip{background:rgba(25,12,58,.85);border-color:var(--line)}
.chip[aria-pressed="true"]{background:rgba(244,194,91,.16);border-color:var(--gold);color:#fff}
.qr{box-shadow:0 0 0 4px rgba(244,194,91,.35),0 10px 30px rgba(8,2,24,.5)}
.notes{background:rgba(139,92,246,.09);border-color:rgba(183,155,255,.25);color:#e2d9fa}
.notes li::before{background:var(--gold)}
/* link cards */
.link{background:linear-gradient(180deg,rgba(183,155,255,.10),rgba(139,92,246,.04));border-color:rgba(183,155,255,.22)}
.link:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 40px rgba(124,58,237,.35)}
.link.feat{background:linear-gradient(180deg,rgba(139,92,246,.32),rgba(109,58,224,.12)) padding-box,linear-gradient(#1a0d3a,#1a0d3a) padding-box,linear-gradient(135deg,#ffdf8f,#f4c25b 25%,#8b5cf6 60%,#7c3aed) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 0 4px rgba(244,194,91,.08),0 16px 44px rgba(109,58,224,.42)}
.ls{color:#d6cbf2}
.lnote{color:#a99cc9}
.badge.ref{background:rgba(183,155,255,.16);color:#e3d6ff;border-color:rgba(183,155,255,.5)}
.go{stroke:var(--gold2)}
.xcta{box-shadow:0 14px 40px rgba(124,58,237,.35),0 0 0 1px rgba(255,255,255,.6)}
.xcta:hover{box-shadow:0 18px 50px rgba(124,58,237,.5)}
.foot{color:#9d90c0}
.foot .made{color:#8577ab}
a:focus-visible,button:focus-visible{outline-color:var(--gold2)}
/* footer X button */
.xfoot{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin:18px auto 6px;color:var(--text);text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.xfoot-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#000;border:2px solid transparent;background-clip:padding-box;position:relative;box-shadow:0 10px 30px rgba(8,2,24,.6),0 0 24px rgba(139,92,246,.35);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease}
.xfoot-btn::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:linear-gradient(135deg,#ffdf8f,#f4c25b 35%,#8b5cf6 75%,#7c3aed);z-index:-1}
.xfoot-btn svg{width:24px;height:24px;fill:#fff;display:block}
.xfoot{position:relative;isolation:isolate}
.xfoot-h{color:var(--gold2)}
.xfoot:hover .xfoot-btn{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 36px rgba(8,2,24,.6),0 0 34px rgba(244,194,91,.35)}
.xfoot:active .xfoot-btn{transform:scale(.96)}
.xfoot:focus-visible{outline:none}
.xfoot:focus-visible .xfoot-btn{outline:3px solid var(--gold2);outline-offset:5px}
@media (prefers-reduced-motion:reduce){.xfoot-btn{transition:none!important}.xfoot:hover .xfoot-btn{transform:none}.avatar::before,.avatar::after{animation:none!important}}

/* share pill (hero) */
.lede{margin-bottom:14px}
.share{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;margin:0 auto 22px;border-radius:999px;border:1px solid rgba(244,194,91,.55);background:rgba(244,194,91,.08);color:var(--gold2);font:700 14px/1 "Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease,transform .18s ease}
.share svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.share:hover{background:rgba(244,194,91,.16)}
.share:active{transform:scale(.97)}
/* Fuzzy Castle series button */
.castle{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 0;min-height:56px;padding:12px 18px;border-radius:18px;text-decoration:none;color:#fff;font-weight:800;font-size:16.5px;letter-spacing:-.005em;background:linear-gradient(180deg,#3a1f7a,#25124f) padding-box,linear-gradient(135deg,#ffdf8f,#f4c25b 30%,#8b5cf6 70%,#7c3aed) border-box;border:1.5px solid transparent;box-shadow:0 12px 34px rgba(109,58,224,.35);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.castle:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(124,58,237,.5)}
.castle:hover .go{transform:translate(2px,-2px)}
.castle:active{transform:scale(.98)}
.castle .go{flex:0 0 18px;width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.share,.castle{transition:none!important}.castle:hover{transform:none}}

/* footer: animated Fuzzy as a faded halo; his face sits above the centred X button, which overlaps only his chin/shirt */
.xrow{--h:190px;position:relative;display:flex;justify-content:center;isolation:isolate;margin-top:16px;padding-top:calc(var(--h)*.75 - 18px)}
.xrow .xfoot{z-index:1}
.fuzzy-halo{position:absolute;left:50%;top:0;width:var(--h);height:var(--h);margin-left:calc(var(--h)/-2);border-radius:50%;overflow:hidden;opacity:.6;pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(circle closest-side,#000 66%,rgba(0,0,0,.55) 84%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 66%,rgba(0,0,0,.55) 84%,transparent 100%)}
.fuzzy-halo img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:480px){.xrow{--h:200px}}