/* Exact profile proportions from Humbleteam Option 1; the 62px iOS status bar
   in the reference is replaced with the browser's real safe-area inset. */
body[data-profile-theme] { background:var(--p-bg); }
.pp-figma { --p-safe-top:var(--safe-top); min-height:100svh; background:var(--p-bg); color:var(--p-ink); padding-bottom:calc(var(--safe-bottom) + 228px); font:var(--p-body); letter-spacing:-.02em; overflow-x:clip; }
.pp-figma .figma-asset, .wearing-figma .figma-asset { display:block; max-width:none; flex:none; object-fit:initial; filter:none; }
.pp-figma .pp-header { position:relative; padding-top:calc(125px + var(--p-safe-top)); min-height:calc(273px + var(--p-safe-top)); }
.pp-figma .pp-banner { position:absolute; z-index:0; inset:0 0 auto; height:calc(181px + var(--p-safe-top)); background:var(--p-cover-bg); filter:none; }
.pp-figma .pp-banner.has-cover { background:var(--p-cover-bg); }
.pp-figma .pp-banner .cover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--cover-position,50% 50%); filter:none; }
.pp-figma .pp-banner::before { content:''; position:absolute; z-index:1; inset:0; background:var(--p-cover-overlay); }
.pp-figma .pp-banner::after { content:''; position:absolute; z-index:2; top:calc(76px + var(--p-safe-top)); left:0; right:0; height:147px; background:linear-gradient(to bottom,transparent,var(--p-bg) 62.923%); }
.pp-figma .pp-top { top:calc(8px + var(--p-safe-top)); left:calc(16px + var(--safe-left,0px)); right:calc(16px + var(--safe-right,0px)); height:28px; }
.pp-figma .pp-logo { width:44px; height:44px; margin:0 0 0 -12px; color:var(--p-white); }
.pp-figma .pp-location { position:absolute; left:26.07px; top:50%; transform:translateY(-50%); display:flex; align-items:center; max-width:calc(100% - 145px); font:400 12px/16px var(--p-font); letter-spacing:.02em; color:color-mix(in srgb,var(--p-white) 50%,transparent); }
.pp-figma .pp-location > span { display:block; max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-figma .pp-badges { gap:6px; }
.pp-figma .badge { gap:4px; height:28px; padding:6px 10px; font:var(--p-caption); letter-spacing:-.02em; color:var(--p-white); border:0; background:var(--p-badge-bg); backdrop-filter:blur(12.65px); -webkit-backdrop-filter:blur(12.65px); box-shadow:none; }
.pp-figma .badge > span { opacity:.5; }
.pp-figma .pp-head { margin:0; padding:0 16px; }
/* Main portrait is 1.5x the original 56px; scale the ring gap and initials with it. */
.pp-figma .pp-ava { --size:84px; --gap:2.334px; --p-avatar-type:500 30px/1.2 var(--p-font); border:0; border-radius:50%; }
.pp-figma .pp-ava .ava-ring, .pp-figma .pp-sticky-ava .ava-ring { display:block; --hole:90%; }
.pp-figma .pp-ava .ava-face, .pp-figma .pp-sticky-ava .ava-face { inset:var(--gap); background:var(--p-image-placeholder); color:var(--p-white); font:var(--p-avatar-type); }
.pp-figma .pp-handle { margin-top:20px; min-height:14.4px; font:var(--p-small); color:var(--p-ink); opacity:.4; }
.pp-figma .pp-name { margin-top:7.6px; width:100%; max-width:100%; font:var(--p-name); color:var(--p-ink); letter-spacing:-.02em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:anywhere; text-wrap:balance; }
/* A name is never cut: one line as in the Figma, a second line only when it needs it. The sticky bar keeps its single-line ellipsis. */
.pp-figma .pp-bio { margin-top:6px; max-width:100%; font:var(--p-body); color:var(--p-ink); opacity:var(--p-bio-opacity); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow-wrap:anywhere; }
.pp-figma .pp-socials { margin-top:29px; padding:0 16px; gap:8px; justify-content:flex-start; overflow-x:auto; scroll-padding-inline:16px; }
/* Free space centers a short row; when it overflows, auto margins become zero
   so the first and last links remain reachable in the horizontal scroller. */
.pp-figma .pp-socials > .soc:first-child { margin-inline-start:auto; }
.pp-figma .pp-socials > .soc:last-child { margin-inline-end:auto; }
.pp-figma .soc { position:relative; width:48px; height:48px; padding:12px; background:var(--p-soc-bg); color:var(--p-ink); box-shadow:none; }
/* The native dark material's masked interior is opaque #222. A 4% white
   fill only matches it on grey; on the black canvas it leaves a dark inner disc. */
.pp-figma[data-profile-theme="black"] .soc { background:#222; }
/* Figma's native GLASS is absent from SVG/code exports. Reuse the unmodified
   native PNG's material only; the middle is masked out so every logo remains
   its original vector. Dark: native center and base both resolve to #222.
   White: the Light instance's own 8x capture; its interior gradient is --p-soc-bg. */
.pp-figma .soc::before { content:''; position:absolute; inset:calc(-1 * var(--p-material-bleed)); border-radius:inherit; pointer-events:none; background:var(--p-material-social) center / 100% 100% no-repeat; mask-image:radial-gradient(circle,transparent 15px,#000 16px); -webkit-mask-image:radial-gradient(circle,transparent 15px,#000 16px); }
.pp-figma .soc > .figma-asset, .pp-figma .soc > .i { position:relative; z-index:1; }
.pp-figma .pp-content { display:flex; flex-direction:column; gap:48px; margin-top:40px; }
.pp-figma .pp-content.no-socials { margin-top:40px; }
.pp-figma .pp-sec { margin:0; padding:0 16px; min-width:0; }
.pp-figma .pp-divider { margin:0 0 12px; padding:8px 0; gap:12px; font:var(--p-section); color:color-mix(in srgb,var(--p-ink) calc(var(--p-section-opacity) * 100%),transparent); letter-spacing:-.02em; text-transform:uppercase; }
.pp-figma .pp-divider::before, .pp-figma .pp-divider::after { background:linear-gradient(to right,transparent,var(--p-ink)); opacity:var(--p-divider-opacity); }
.pp-figma .pp-divider::after { transform:rotate(180deg); }
.pp-figma .pp-rail { display:flex; gap:12px; min-width:0; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
.pp-figma .pp-rail::-webkit-scrollbar { display:none; }
.pp-figma .pp-rail.has-many { margin-right:-16px; padding-right:16px; }
.pp-figma .wcard, .pp-figma .scard { position:relative; isolation:isolate; display:flex; flex-direction:column; flex:none; border-radius:24px; padding:8px; border:1px solid var(--p-border-light); background:var(--p-card-bg); color:var(--p-card-ink); box-shadow:none; overflow:visible; scroll-snap-align:start; transition:transform 120ms ease-out,opacity 120ms ease-out; }
/* Keep native 24px corners as cards resize. Only the outer material band is
   visible (4px dark, the full 8px padding ring for white): exported artwork/text
   inside it never replace wearer content.
   The shell must not clip its border-box rim at the inner padding edge;
   pp-card-decoration and media contain the overflowing artwork separately. */
.pp-figma .wcard::after, .pp-figma .scard::after { content:''; position:absolute; z-index:2; inset:-1px; border:var(--p-material-band) solid transparent; border-radius:inherit; border-image:var(--p-material-card) 48 / 24px / 0 stretch; pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) padding-box; -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) padding-box; mask-composite:exclude; }
.pp-figma .scard::after { border-image-source:var(--p-material-support); }
.pp-figma .wcard:active, .pp-figma .scard:active { opacity:.8; transform:scale(.98); }
.pp-figma .wcard { width:100%; gap:16px; }
.pp-figma .pp-projects.has-many .wcard { width:calc(100% - 28px); }
.pp-figma .pp-card-decoration { position:absolute; z-index:0; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.pp-figma .pp-glow-top { position:absolute; left:calc(50% + .5px); top:-161.223px; transform:translateX(-50%) scaleY(-1); }
.pp-figma .pp-glow-diagonal { position:absolute; left:calc(50% + 47.16px); top:calc(50% + 31.91px); transform:translate(-50%,-50%) rotate(29.35deg); mix-blend-mode:plus-lighter; }
.pp-figma .pp-glow-bottom { position:absolute; top:78.697px; left:calc(50% - 1px); transform:translateX(-50%); }
.pp-figma .media { position:relative; z-index:1; width:100%; height:164px; aspect-ratio:auto; background:var(--p-media-bg); color:var(--p-white); border-radius:16px; overflow:hidden; }
.pp-figma .media .pp-content-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none; }
.pp-figma .media.has-img::after { content:none; }
.pp-figma .empty-media { background:var(--p-image-placeholder); }
.pp-figma .pp-image-initial { color:var(--p-image-ink); font:var(--p-initial); }
.pp-figma .wcard-logo { width:32px; height:32px; top:10px; left:10px; border-radius:50%; background:var(--p-white); color:var(--p-black); font:var(--p-card-title); }
.pp-figma .card-body { position:relative; z-index:1; gap:12px; align-items:flex-start; padding:4px 8px 8px; }
.pp-figma .card-text { gap:2px; min-width:0; }
.pp-figma .card-title { font:var(--p-card-title); color:var(--p-card-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-figma .card-line { font:var(--p-body); color:var(--p-card-ink); opacity:.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-figma .card-go { width:32px; height:32px; background:var(--p-button-bg); backdrop-filter:blur(10.75px); -webkit-backdrop-filter:blur(10.75px); }
.pp-figma .itiles { gap:8px; justify-content:safe center; overflow-x:auto; }
.pp-figma .itiles.has-many { justify-content:flex-start; }
.pp-figma .itile { flex:none; width:88px; gap:12px; padding:8px 12px; font:var(--p-small); color:var(--p-label-ink); }
.pp-figma .itile-icon { position:relative; isolation:isolate; flex:none; width:64px; height:64px; border:1px solid var(--p-border-light); border-radius:16px; background:none; box-shadow:none; overflow:hidden; }
/* Humbleteam Icon tile 393:1699: 64px, radius 16px, smoothing 0.
   Clip the composite too: mobile WebKit can otherwise paint the oversized
   blurred/color-dodge material outside overflow's rounded corner. */
.pp-figma .itile-icon { -webkit-clip-path:inset(0 round 16px); clip-path:inset(0 round 16px); }
.pp-figma .pp-interest-gradient { position:absolute; max-width:none; width:109.003px; height:195.298px; left:-23.5px; top:-42.65px; object-fit:cover; filter:blur(2px); opacity:.7; mix-blend-mode:color-dodge; }
.pp-figma .pp-interest-glow { position:absolute; left:calc(50% - .55px); top:-2.373px; transform:translateX(-50%); }
.pp-figma .pp-interest-symbol { position:relative; z-index:1; color:var(--p-white); }
.pp-figma .itile-label { width:88px; min-height:14.4px; max-height:28.8px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; }
.pp-figma .pp-supports { justify-content:safe center; padding-top:4px; }
.pp-figma .pp-supports.has-many { justify-content:flex-start; }
.pp-figma .scard { width:244px; max-width:100%; margin:0; gap:8px; }
.pp-figma .scard .media { height:auto; aspect-ratio:1200/750; }
.pp-figma .scard .card-body { width:100%; align-items:center; padding:8px; }
.pp-figma .scard .card-title { font:var(--p-section); white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:28.8px; }
.pp-figma .scard .pp-glow-diagonal { left:calc(50% - 18.34px); top:calc(50% + 54.96px); }
.pp-figma .scard .pp-glow-top { top:-143.303px; left:calc(50% - 1px); }
.pp-figma .pill-sm { min-height:24px; padding:0 12px; font:var(--p-caption-strong); color:var(--p-card-ink); background:var(--p-button-bg); opacity:.8; backdrop-filter:blur(10.75px); -webkit-backdrop-filter:blur(10.75px); }
.pp-figma .pp-sticky { position:sticky; z-index:29; top:0; display:flex; align-items:center; gap:12px; height:0; padding:0 calc(16px + var(--safe-right,0px)) 0 calc(16px + var(--safe-left,0px)); background:var(--p-sticky-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); overflow:hidden; opacity:0; pointer-events:none; transition:opacity 180ms ease-out; }
.pp-figma .pp-sticky.is-visible { height:calc(64px + var(--p-safe-top)); padding-top:var(--p-safe-top); margin-bottom:calc(-64px - var(--p-safe-top)); opacity:1; pointer-events:auto; }
.pp-figma .pp-sticky-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font:var(--p-sticky-name); }
.pp-figma .pp-sticky-ava { --size:40px; --gap:1.556px; border:0; border-radius:50%; }
/* White cards: Figma's Card instance has no stroke, only its native material (the ::after
   band) and a 0,2,16 4% drop shadow. The old blend-mode emulation of the Fill + Shadow
   stack rendered a dark rim inside the isolated card and is gone. */
.pp-figma[data-profile-theme="white"] .wcard, .pp-figma[data-profile-theme="white"] .scard { border-color:transparent; box-shadow:var(--p-light-shadow); }
.pp-figma[data-profile-theme="white"] .soc { box-shadow:var(--p-light-shadow); }
.pp-light-material { display:none; }
.pp-figma[data-profile-theme="white"] .pp-interest-gradient { width:147px; height:263px; left:-53.5px; top:-83px; transform:scaleY(-1); opacity:1; mix-blend-mode:normal; }
.pp-figma[data-profile-theme="white"] .pp-sticky .pp-logo { filter:invert(1); }
/* The white page's social glyphs and card arrow are black in Figma (social/icon = neutral/1000,
   icon/primary = black). The exported vectors are white: keep their paths, darken them on every white page. */
.pp-figma[data-profile-theme="white"] .soc > .figma-asset,
.pp-figma[data-profile-theme="white"] .card-go > .figma-asset { filter:var(--p-glyph-filter); }
.wearing-figma { --w-bottom-bleed:0px; --w-edge-color:#493479; height:calc(180px + var(--safe-bottom)); display:block; padding:0; background:none; color:var(--p-hoodie-ink,var(--p-white)); font-family:var(--p-font); letter-spacing:-.02em; isolation:isolate; }
.wearing-figma[data-profile-theme="white"] { --w-edge-color:#5783cf; }
.wearing-figma[data-profile-theme="black"] { --w-edge-color:#2e1c50; }
.wearing-figma .w-backdrop { position:absolute; pointer-events:none; inset:-139px 0 calc(-1 * var(--w-bottom-bleed)); overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.06) 32px,rgba(0,0,0,.24) 68px,rgba(0,0,0,.56) 108px,rgba(0,0,0,.86) 148px,#000 196px); mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.06) 32px,rgba(0,0,0,.24) 68px,rgba(0,0,0,.56) 108px,rgba(0,0,0,.86) 148px,#000 196px); }
/* Full-screen artwork can bleed past the layout viewport in browsers that paint
   there. Safari 26 clips that overflow under its controls, so the mobile rule
   below gives its native color extension a solid edge inside the viewport. */
#layer > .wearing-figma,
.overlay > .device-screen > .layer > .wearing-figma { --w-bottom-bleed:max(160px,var(--safe-bottom)); }
/* WebKit hit-tests about 4px inside the edge and ignores background colors on
   boxes 10px or thinner. An off-screen strip with only 1px visible is missed.
   Keep this unfiltered 12px strip above the masked artwork, at bottom:0, with
   a 24px blend above it. The browser can extend its blue/purple background-color
   under the toolbar instead of exposing scrolling profile content. Desktop and
   non-WebKit engines retain the original gradient. */
@supports (-webkit-touch-callout:none) {
@media (hover:none) and (pointer:coarse) {
#layer > .wearing-figma::before,
.overlay > .device-screen > .layer > .wearing-figma::before { content:''; position:fixed; z-index:3; left:0; right:0; bottom:0; height:12px; background-color:var(--w-edge-color); pointer-events:none; }
#layer > .wearing-figma::after,
.overlay > .device-screen > .layer > .wearing-figma::after { content:''; position:fixed; z-index:0; left:0; right:0; bottom:12px; height:24px; background:linear-gradient(to bottom,transparent,var(--w-edge-color)); pointer-events:none; }
#layer > .wearing-figma::before, #layer > .wearing-figma::after,
.overlay > .device-screen > .layer > .wearing-figma::before, .overlay > .device-screen > .layer > .wearing-figma::after { opacity:1; transition:opacity 640ms cubic-bezier(.22,1,.36,1); }
#layer > .wearing-figma.hide::before, #layer > .wearing-figma.hide::after,
.overlay > .device-screen > .layer > .wearing-figma.hide::before, .overlay > .device-screen > .layer > .wearing-figma.hide::after { opacity:0; transition-duration:460ms; }
}
}
/* The profile reserves the 180px dock + 48px of breathing room. Contain the
   frosted material to the dock: a transparent gradient alone does not limit
   backdrop-filter's rectangular blur area on Safari. */
.wearing-figma .w-backdrop::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(to bottom,transparent calc((319px + var(--safe-bottom)) * .27993),var(--p-hoodie-bg) calc((319px + var(--safe-bottom)) * .56593)); filter:blur(8.05px); backdrop-filter:blur(4.7px); -webkit-backdrop-filter:blur(4.7px); mask-image:linear-gradient(to bottom,transparent 139px,#000 180px); -webkit-mask-image:linear-gradient(to bottom,transparent 139px,#000 180px); }
.wearing-figma .w-background { position:absolute; left:calc(50% - 441.8px); top:101px; }
.wearing-figma .w-halo { position:absolute; top:129.77px; left:50%; transform:translate(-50%,-27%) rotate(-45deg); }
.wearing-figma .w-diagonal { position:absolute; left:calc(50% - 12.34px); top:279.41px; transform:translate(-50%,-50%) rotate(29.35deg); mix-blend-mode:plus-lighter; }
/* The native Bottom bar includes 84px of drawn browser controls below Content.
   Real browser chrome is outside the page. Anchor the ambient footer artwork
   to the visible bottom instead of clipping off its brightest 84px. Keep the
   garment-centered halo, foreground and content-safe blur in their own slots. */
.wearing-figma[data-profile-theme="grey"] { --w-controls-space:84px; --w-footer-lift:max(0px,calc(var(--w-controls-space) - var(--safe-bottom))); }
/* The original SVG's violet overlay is 419px wide inside its 651.3px canvas.
   Map that overlay to the viewport plus 14px bleed on each side. Only ambient
   artwork stretches horizontally; the garment, halo and controls stay fixed. */
.wearing-figma[data-profile-theme="grey"] .w-background { top:calc(101px - var(--w-footer-lift)); width:calc((100% + 28px) / 419 * 651.3); height:511.3px; left:calc(50% - (100% + 28px) / 419 * 441.8); }
.wearing-figma[data-profile-theme="grey"] .w-diagonal { top:calc(279.41px - var(--w-footer-lift)); }
.wearing-figma .w-content { position:relative; z-index:1; width:100%; height:180px; pointer-events:none; }
.wearing-figma .w-thumb { position:absolute; width:307px; height:173px; top:4px; bottom:auto; left:50%; transform:translateX(-50%); filter:none; pointer-events:none; overflow:hidden; }
.wearing-figma .w-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; }
.wearing-figma .w-text { position:absolute; z-index:2; top:75px; right:calc(50% + 76.5px); padding:0; width:110px; align-items:flex-end; text-align:right; gap:0; }
.wearing-figma .w-label { margin-bottom:8px; font:var(--p-caption-strong); color:var(--p-hoodie-ink,var(--p-white)); opacity:var(--p-hoodie-muted); letter-spacing:-.02em; }
.wearing-figma .w-name { font:var(--p-product); color:var(--p-hoodie-ink,var(--p-white)); letter-spacing:-.02em; }
.wearing-figma .w-qid { margin-top:4px; font:var(--p-caption-strong); color:var(--p-hoodie-ink,var(--p-white)); opacity:var(--p-hoodie-muted); letter-spacing:-.02em; }
.wearing-figma .w-cta { position:absolute; z-index:2; top:91px; left:calc(50% + 74.5px); margin:0; width:92px; height:32px; min-height:32px; padding:8px 12px; border:1px solid var(--p-border-light); border-radius:999px; background:transparent; box-shadow:none; overflow:visible; color:var(--p-hoodie-ink,var(--p-white)); font:var(--p-section); letter-spacing:-.02em; pointer-events:auto; }
.wearing-figma .w-cta::before { content:''; position:absolute; inset:-7px 0; }
.wearing-figma .w-cta::after { content:''; position:absolute; z-index:1; inset:-1px; border:2px solid transparent; border-radius:inherit; background:var(--p-material-button) center / 92px 32px no-repeat border-box; pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) padding-box; -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) padding-box; mask-composite:exclude; }
/* Figma Button (Glow): pressed = opacity 70% + scale 0.97, 120ms ease-out. .btn:active already scales. */
.wearing-figma[data-profile-theme="white"] .w-cta:active { opacity:.7; }
.wearing-figma .w-cta > span { position:relative; }
.wearing-figma .w-cta > .w-button-material { position:absolute; z-index:0; inset:-1px; overflow:hidden; border-radius:inherit; pointer-events:none; }
.wearing-figma .w-button-glow { position:absolute; top:calc(50% - 2.8px); left:calc(50% + .08px); transform:translateX(-50%); }
.wearing-figma[data-profile-theme="black"] .w-background { top:156.7px; left:calc(50% - 509.3px); transform:rotate(-90deg); }
.wearing-figma[data-profile-theme="black"] .w-backdrop::after { content:''; position:absolute; z-index:-1; top:101px; left:50%; width:calc(100% + 28px); height:338px; transform:translateX(-50%); background:var(--p-black-hoodie-gradient); }
/* The purple wash continues to the browser edge instead of fading to page black. */
.wearing-figma[data-profile-theme="black"] .w-bottom-fill { display:none; }
.wearing-figma[data-profile-theme="black"] .w-thumb { width:143.077px; box-shadow:var(--p-hoodie-shadow); }
.wearing-figma[data-profile-theme="black"] .w-thumb img { height:179.61%; top:-39.63%; }
/* White Hoodie card (404:2720): a 547 x 783px wrapper at (-103, 75) holds the gradient at
   125.32% height anchored to its top, and the wrapper is what rotates 180° and blurs 29.4px.
   Rotating the whole 981.85px image about its own center put every row 198.85px lower, which
   left the blue below the page; the rows that Figma shows run bottom = image top instead.
   Same browser-chrome compensation as grey: the card's brightest 84px sit under drawn Safari
   controls, which the page cannot render, so the ambient wash and streak lift to the visible
   bottom (minus the real safe area) while the garment, halo and controls stay put. */
.wearing-figma[data-profile-theme="white"] { --w-controls-space:84px; --w-footer-lift:max(0px,calc(var(--w-controls-space) - var(--safe-bottom))); }
.wearing-figma[data-profile-theme="white"] .w-background { width:max(547px,calc(100% + 28px)); height:981.85px; top:calc(-123.85px - var(--w-footer-lift)); left:calc(50% - 25px); transform:translateX(-50%) rotate(180deg); filter:blur(29.4px); object-fit:fill; }
.wearing-figma[data-profile-theme="white"] .w-diagonal { top:calc(279.41px - var(--w-footer-lift)); }
/* Overlay 404:2608 ramps from 27.993% to 56.593% of its own 414px, not of the shorter dock. */
.wearing-figma[data-profile-theme="white"] .w-backdrop::before { background:linear-gradient(to bottom,transparent 115.9px,var(--p-hoodie-bg) 234.3px); }
/* Let the foreground settle a short distance while the light dissolves in
   place. Moving the entire tall backdrop exposed a rectangular sliding edge. */
.wearing-figma, .wearing-figma.hide { transform:none; opacity:1; transition:none; pointer-events:none; }
.wearing-figma .w-content { transform:translate3d(0,0,0); opacity:1; transition:transform 560ms cubic-bezier(.22,1,.36,1),opacity 420ms ease-out; }
.wearing-figma .w-backdrop { opacity:1; transition:opacity 640ms cubic-bezier(.22,1,.36,1); }
.wearing-figma.hide .w-content { transform:translate3d(0,24px,0); opacity:0; transition-duration:420ms,300ms; }
.wearing-figma.hide .w-backdrop { opacity:0; transition-duration:460ms; }
.wearing-figma.hide .w-cta { pointer-events:none; }
.wearing-figma.motion-running .w-content, .wearing-figma.motion-running .w-backdrop { transition:none; }
@media (max-width:359px) { .wearing-figma .w-text { right:calc(50% + 67px); width:92px; } .wearing-figma .w-cta { left:auto; right:10px; } }
@media (prefers-contrast:more) { .pp-figma { --p-bio-opacity:1; --p-section-opacity:1; } .pp-figma .pp-handle,.pp-figma .card-line { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .pp-figma .pp-sticky,.pp-figma .wcard,.pp-figma .scard,.wearing-figma .w-content,.wearing-figma .w-backdrop { transition:none; } .wearing-figma.hide .w-content { transform:none; } }
@media (prefers-reduced-motion:reduce) { #layer > .wearing-figma::before, #layer > .wearing-figma::after, .overlay > .device-screen > .layer > .wearing-figma::before, .overlay > .device-screen > .layer > .wearing-figma::after { transition:none; } }
/* Only the explicitly seeded fictional demo uses Figma's example artwork.
   User uploads and real profiles never inherit example projects or charity photos. */
.pp-figma .ava-face .pp-sample-portrait { position:absolute; max-width:none; width:146.65%; height:183.33%; top:-49.62%; left:-20.27%; object-fit:fill; }
.pp-figma .pp-sample-project { position:absolute; inset:0; pointer-events:none; }
.pp-figma .media .pp-sample-gradient { position:absolute; width:362px; height:649px; max-width:none; left:calc(50% - 5px); top:calc(50% + 37.5px); transform:translate(-50%,-50%) scaleY(-1); filter:blur(2px); object-fit:cover; }
.pp-figma .media .pp-sample-layer { position:absolute; width:163.76px; height:354.671px; max-width:none; left:calc(50% + 15.83px); top:82px; transform:translate(-50%,-50%) rotate(14.18deg); object-fit:cover; }
.pp-figma .media .pp-sample-overlay { position:absolute; width:352px; height:198px; max-width:none; left:50%; top:calc(50% - 10px); transform:translate(-50%,-50%); object-fit:cover; }
.pp-figma .pp-sample-tint { position:absolute; left:-11px; top:-5px; width:calc(100% + 22px); height:224px; background:var(--p-blue-tint); mix-blend-mode:color; border-radius:16px; }
.pp-figma .wcard-logo .figma-asset { position:static; width:auto; height:auto; }
.pp-figma .pp-sample-support.has-img::after { content:''; position:absolute; inset:0; border-radius:16px; background:var(--p-support-tint); mix-blend-mode:color; }
/* FNDR gift entry in the badge row: the founder's way into their gift key from their own hoodie; visitors get a one-line explanation. */
.pp-figma .fndr-gift { position:absolute; z-index:3; top:calc(40px + var(--p-safe-top)); right:calc(12px + var(--safe-right,0px)); width:64px; border:0; padding:0; background:none; display:grid; justify-items:center; gap:0; cursor:pointer; transition:transform 120ms ease; }
.pp-figma .fndr-gift img { width:64px; height:64px; display:block; }
.pp-figma .fndr-gift-label { font:700 11px/13px var(--p-font); letter-spacing:.1em; color:#fff; text-shadow:0 0 10px rgba(122,114,255,.95); margin-top:-6px; }
.pp-figma .fndr-gift:active { transform:scale(.96); }
.pp-figma .fndr-gift:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:12px; }
/* Optional sections: one material system, seven expressive content layouts. */
.pp-figma .scard-sec { cursor:default; min-width:0; }
.pp-figma .scard-sec:active { opacity:1; transform:none; }
.pp-figma .scard-sec .card-title,.pp-figma .scard-sec .card-line { white-space:normal; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; }
.pp-figma .scard-sec h3,.pp-figma .scard-sec p,.pp-figma .scard-sec dl,.pp-figma .scard-sec dd { margin:0; }
.pp-figma .scard-sec h3 { color:var(--p-card-ink); }
.pp-figma .scard-sec > :not(.pp-card-decoration):not(.pp-light-material) { position:relative; z-index:1; }
.pp-figma .scard-sec .section-eyebrow { display:block; font:600 10px/1.4 var(--p-font); letter-spacing:.1em; text-transform:uppercase; color:var(--p-card-ink); opacity:.5; }
.pp-figma .scard-sec .section-note { margin:0 8px 8px; color:var(--p-card-ink); font:var(--p-body); opacity:.72; white-space:normal; overflow-wrap:anywhere; }
.pp-figma .media.media-contain { background:var(--p-media-bg); }
.pp-figma .media.media-contain .pp-content-image { object-fit:contain; }
.pp-figma .scard-meme .media { height:auto; aspect-ratio:16/10; background:#17171a; }
.pp-figma .scard-meme .card-body { align-items:center; gap:9px; }
.pp-figma .meme-quote { align-self:flex-start; font:44px/30px Georgia,serif; opacity:.3; }
.pp-figma .card-note { display:block; margin-top:4px; font:var(--p-body); color:var(--p-card-ink); opacity:.8; white-space:normal; }
/* Pets: a compact portrait gallery; each companion keeps their own bio. */
.pp-figma .scard-pets { gap:0; padding:12px; }
.pp-figma .pets-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
.pp-figma .pet-card { display:flex; flex-direction:column; min-width:0; gap:10px; }
.pp-figma .pet-portrait { --pet-cutout:#2a2832; position:relative; isolation:isolate; display:grid; place-items:center; width:100%; aspect-ratio:1.08; border:1px solid color-mix(in srgb,var(--p-card-ink) 12%,transparent); border-radius:18px; overflow:hidden; background:radial-gradient(ellipse at 50% 100%,rgba(173,160,240,.12),transparent 75%),linear-gradient(135deg,#35323e,#23212a); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 8px rgba(0,0,0,.25); }
.pp-figma .pet-halo { position:absolute; width:90%; aspect-ratio:1; bottom:-48%; border-radius:50%; background:#c8b5ff; opacity:.23; filter:blur(20px); }
.pp-figma .pet-portrait::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.09); pointer-events:none; }
.pp-figma .pet-portrait-icon { width:74%; color:#ECE8F7; filter:drop-shadow(0 6px 8px rgba(0,0,0,.28)); }
.pp-figma .pet-portrait-icon.is-general { opacity:.82; }
.pp-figma .pet-portrait-icon.is-generic { width:40%; opacity:.55; }
.pp-figma .pet-stencil,.pp-figma .pet-silhouette { width:100%; height:auto; display:block; fill:currentColor; }
.pp-figma .pet-portrait img { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:contain; }
.pp-figma .pet-copy { padding:0 3px 3px; min-width:0; text-align:center; }
.pp-figma .pet-name { font:600 17px/1.15 var(--p-font); letter-spacing:-.025em; overflow-wrap:anywhere; }
.pp-figma .pet-breed { margin-top:5px!important; font:12px/1.4 var(--p-font); color:var(--p-card-ink); opacity:.55; overflow-wrap:anywhere; }
.pp-figma .pet-age { display:inline-block; margin-top:7px; padding:3px 8px; border:1px solid var(--p-border-light); border-radius:99px; font:10px/1.3 var(--p-font); color:var(--p-card-ink); opacity:.7; }
.pp-figma .pet-bio { margin-top:9px!important; font:12px/1.45 var(--p-font); color:var(--p-card-ink); opacity:.78; overflow-wrap:anywhere; }
.pp-figma .pets-grid.has-one { grid-template-columns:1fr; }
.pp-figma .pets-grid.has-one .pet-card { display:grid; grid-template-columns:minmax(100px,.9fr) minmax(0,1fr); align-items:center; gap:16px; }
.pp-figma .pets-grid.has-one .pet-copy { text-align:left; padding-right:5px; }
.pp-figma .pets-grid.has-one .pet-name { font-size:21px; }
.pp-figma[data-profile-theme="white"] .pet-portrait { --pet-cutout:#e3e0ed; background:radial-gradient(ellipse at 50% 100%,#d8c5f1,transparent 80%),linear-gradient(135deg,#ece9f2,#d7d3e0); box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(83,71,114,.08); }
.pp-figma[data-profile-theme="white"] .pet-portrait-icon { color:#4a425f; filter:drop-shadow(0 3px 4px rgba(52,42,75,.15)); }
/* Places: real geographic outlines, with the names remaining readable below. */
.pp-figma .scard-places { gap:12px; }
.pp-figma .atlas-top { padding:12px 10px 0; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.pp-figma .atlas-count { font:500 22px/1.2 var(--p-font); letter-spacing:-.04em; }
.pp-figma .places-modes { margin-top:5px; display:inline-flex; max-width:100%; padding:3px; gap:2px; border:1px solid var(--p-border-light); border-radius:999px; background:color-mix(in srgb,var(--p-card-ink) 4%,transparent); }
.pp-figma .places-mode { border:0; border-radius:999px; min-height:32px; padding:6px 14px; color:var(--p-card-ink); font:11px/1.2 var(--p-font); background:transparent; opacity:.5; cursor:pointer; }
.pp-figma .places-mode[aria-pressed="true"] { background:color-mix(in srgb,var(--p-card-ink) 12%,transparent); opacity:1; box-shadow:0 1px 5px rgba(0,0,0,.12); }
.pp-figma .places-mode:focus-visible { outline:2px solid var(--p-card-ink); outline-offset:2px; }
.pp-figma .place-panel[hidden] { display:none; }
.pp-figma .atlas-surface { padding:5px 0 0; border-radius:16px; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--p-card-ink) 5%,transparent),transparent 70%); }
.pp-figma .places-map { display:block; width:100%; height:auto; overflow:hidden; }
.pp-figma .place-territory { fill:color-mix(in srgb,var(--p-card-ink) 14%,transparent); stroke:var(--p-card-bg); stroke-width:.6; stroke-linejoin:round; }
.pp-figma .place-territory.is-visited { fill:#c8b2fa; stroke:#ede5ff; stroke-width:.7; }
.pp-figma .place-pin { fill:#eee5ff; stroke:#6c567f; stroke-width:1; }
.pp-figma .map-graticule { fill:none; stroke:var(--p-card-ink); stroke-width:.5; opacity:.06; }
.pp-figma .map-inset-rule { fill:none; stroke:var(--p-card-ink); stroke-width:1; opacity:.2; }
.pp-figma .places-map text { font:13px var(--p-font); fill:var(--p-card-ink); opacity:.4; }
.pp-figma .place-labels { list-style:none; padding:4px 8px 8px; margin:0; display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.pp-figma .place-labels li { min-width:0; display:flex; align-items:center; gap:6px; border:1px solid var(--p-border-light); border-radius:99px; padding:5px 9px; font:11px/1.4 var(--p-font); color:var(--p-card-ink); overflow-wrap:anywhere; }
.pp-figma .place-dot { display:block; width:4px; height:4px; flex:none; border-radius:50%; background:#c8b2fa; box-shadow:0 0 5px rgba(200,178,250,.4); }
.pp-figma[data-profile-theme="white"] .place-territory { fill:#d4d0dc; stroke:#efedf5; }
.pp-figma[data-profile-theme="white"] .place-territory.is-visited { fill:#82709e; stroke:#5e4d78; }
.pp-figma[data-profile-theme="white"] .place-pin { fill:#49385f; stroke:#fff; }
.pp-figma[data-profile-theme="white"] .place-dot { background:#82709e; }
/* Teams: original monogram crests, never imitations of official team logos. */
.pp-figma .scard-teams { gap:8px; padding:12px; }
.pp-figma .team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pp-figma .team-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; padding:16px 10px 14px; border:1px solid color-mix(in srgb,var(--team-accent) 24%,var(--p-border-light)); border-radius:18px; background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--team-accent) 18%,transparent),transparent 72%),color-mix(in srgb,var(--p-card-ink) 3%,transparent); text-align:center; }
.pp-figma .team-logo { position:relative; display:grid; place-items:center; width:84px; height:84px; }
.pp-figma .team-logo::before { content:''; position:absolute; inset:-6px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--team-accent) 28%,transparent),transparent 70%); opacity:.9; }
.pp-figma .team-badge { position:relative; display:block; width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.28)); }
.pp-figma .team-badge[hidden] { display:none; }
.pp-figma .team-monogram { display:none; position:relative; width:64px; height:64px; place-items:center; border-radius:18px; border:1px solid color-mix(in srgb,var(--team-accent) 40%,transparent); background:color-mix(in srgb,var(--team-accent) 16%,transparent); color:var(--p-card-ink); font:600 20px/1 var(--p-font); letter-spacing:-.03em; }
.pp-figma .team-card:not(.has-logo) .team-monogram { display:grid; }
.pp-figma .team-copy { min-width:0; }
.pp-figma .team-sport { font:600 9px/1.4 var(--p-font); text-transform:uppercase; letter-spacing:.08em; color:var(--p-card-ink); opacity:.5; overflow-wrap:anywhere; }
.pp-figma .team-name { margin-top:6px!important; font:500 14px/1.25 var(--p-font); overflow-wrap:anywhere; }
.pp-figma .team-tag { display:inline-block; margin-top:7px; padding:2px 8px; border:1px solid var(--p-border-light); border-radius:99px; font:10px/1.4 var(--p-font); color:var(--p-card-ink); opacity:.55; }
.pp-figma .team-credit { margin:0 8px 6px; font:9px/1.4 var(--p-font); color:var(--p-card-ink); opacity:.4; text-align:right; }
.pp-figma .team-grid.has-one { grid-template-columns:1fr; }
.pp-figma .team-grid.has-one .team-card { flex-direction:row; padding:16px; gap:18px; text-align:left; }
.pp-figma .team-grid.has-one .team-logo { flex:none; width:96px; height:96px; }
.pp-figma .team-grid.has-one .team-badge { width:96px; height:96px; }
.pp-figma .team-grid.has-one .team-name { font-size:20px; }
.pp-figma[data-profile-theme="white"] .team-card { background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--team-accent) 14%,transparent),transparent 72%),#fff; }
/* On repeat: provider artwork and controls stay together in the intact Apple player. */
.pp-figma .scard-music { padding:12px; gap:12px; }
.pp-figma .music-copy { min-width:0; padding:3px 4px; }
.pp-figma .music-title { font:500 20px/1.2 var(--p-font); letter-spacing:-.03em; overflow-wrap:anywhere; }
.pp-figma .music-artist { margin-top:6px!important; font:var(--p-body); color:var(--p-card-ink); opacity:.78; overflow-wrap:anywhere; }
.pp-figma .music-album { margin-top:5px!important; font:11px/1.4 var(--p-font); color:var(--p-card-ink); opacity:.45; overflow-wrap:anywhere; }
.pp-figma .music-player { width:100%; min-width:0; }
.pp-figma .music-embed { display:block; width:100%; max-width:660px; height:175px; border:0; border-radius:10px; background:transparent; }
.pp-figma .music-embed[hidden],.pp-figma .music-player-status[hidden] { display:none; }
.pp-figma .music-player-status { padding:12px 4px; color:var(--p-card-ink); font:var(--p-body); opacity:.78; }
.pp-figma .scard-music .section-note { margin:0; padding-top:12px; border-top:1px solid var(--p-border-light); }
.pp-figma .music-source { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.pp-figma .music-store-link { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:9px 14px; border:1px solid var(--p-border-light); border-radius:999px; background:color-mix(in srgb,var(--p-card-ink) 7%,transparent); color:var(--p-card-ink); text-decoration:none; font:500 12px/1.2 var(--p-font); }
.pp-figma .music-store-link.is-apple { background:#1d1d1f; color:#fff; border-color:#1d1d1f; }
.pp-figma[data-profile-theme="white"] .music-store-link.is-apple { background:#000; }
.pp-figma .music-store-link:focus-visible { outline:2px solid var(--p-card-ink); outline-offset:2px; }
@media (max-width:339px) { .pp-figma .music-title { font-size:18px; } }
/* Garage: image first, with a tidy specification strip beneath it. */
.pp-figma .scard-wheels { gap:0; }
.pp-figma .scard-wheels .media { height:auto; aspect-ratio:16/10; }
.pp-figma .garage-body { padding:16px 10px 10px; }
.pp-figma .garage-title { margin-top:5px!important; font:500 24px/1.12 var(--p-font); letter-spacing:-.04em; overflow-wrap:anywhere; }
.pp-figma .garage-specs { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px!important; }
.pp-figma .garage-specs > div { flex:1 1 auto; min-width:0; padding:8px 10px; border:1px solid var(--p-border-light); border-radius:10px; background:color-mix(in srgb,var(--p-card-ink) 4%,transparent); }
.pp-figma .garage-specs dt { font:600 8px/1.4 var(--p-font); text-transform:uppercase; letter-spacing:.09em; color:var(--p-card-ink); opacity:.4; }
.pp-figma .garage-specs dd { margin-top:3px; font:12px/1.35 var(--p-font); color:var(--p-card-ink); overflow-wrap:anywhere; }
.pp-figma .garage-body .section-note { margin:12px 0 0; }
/* Two truths, one lie retains the existing accessible reveal/reset behavior. */
.pp-figma .truths-body { display:grid; gap:12px; padding:12px 8px 8px; }
.pp-figma .truths-intro { display:flex; align-items:center; gap:8px; }
.pp-figma .truths-mark { display:flex; gap:3px; }
.pp-figma .truths-mark i { width:6px; height:6px; border-radius:50%; border:1px solid #c8b2fa; background:#c8b2fa; }
.pp-figma .truths-mark i:last-child { background:transparent; }
.pp-figma .truths-prompt { opacity:.65; font:13px/1.4 var(--p-font); }
.pp-figma .truths-list { display:grid; gap:8px; }
.pp-figma .truth { display:flex; align-items:center; gap:10px; width:100%; min-width:0; text-align:left; padding:14px 12px; border-radius:13px; border:1px solid var(--p-border-light); background:color-mix(in srgb,var(--p-card-ink) 4%,transparent); color:var(--p-card-ink); font:var(--p-body); cursor:pointer; transition:background 160ms,border-color 160ms,transform 120ms; }
.pp-figma .truth > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.pp-figma .truth-number { font:10px/1 var(--p-font); letter-spacing:.04em; opacity:.35; }
.pp-figma .truth-choice { flex:none; width:12px; height:12px; border:1px solid color-mix(in srgb,var(--p-card-ink) 25%,transparent); border-radius:50%; }
.pp-figma .truth:active { transform:scale(.99); }
.pp-figma .truth:focus-visible { outline:2px solid var(--p-card-ink); outline-offset:2px; }
.pp-figma .truth[data-state="lie"] { background:rgba(255,92,92,.14); border-color:rgba(255,130,130,.55); }
.pp-figma .truth[data-state="lie"] .truth-choice { background:#df8c92; border-color:#df8c92; }
.pp-figma .truth[data-state="truth"] { background:rgba(120,220,160,.13); border-color:rgba(120,220,160,.5); }
.pp-figma .truth[data-state="truth"] .truth-choice { background:#87c9a2; border-color:#87c9a2; }
.pp-figma .truth[data-state="dim"] { opacity:.5; }
.pp-figma .truths-result { margin:0; min-height:0; font:var(--p-body); color:var(--p-card-ink); opacity:.9; }
.pp-figma .truths-result:empty { display:none; }
.pp-figma .truths-reset { justify-self:start; padding:8px 12px; border-radius:999px; border:1px solid var(--p-border-light); background:transparent; color:var(--p-card-ink); font:var(--p-body); cursor:pointer; }
.pp-figma .truths-reset[hidden] { display:none; }
@media (max-width:359px) { .pp-figma .scard-pets,.pp-figma .scard-teams { padding:10px; } .pp-figma .pets-grid { gap:14px 10px; } .pp-figma .pet-name { font-size:16px; } .pp-figma .pet-breed,.pp-figma .pet-bio { font-size:11px; } .pp-figma .places-mode { padding:6px 12px; } }
@media (prefers-reduced-motion:reduce) { .pp-figma .truth { transition:none; } }
@media (prefers-contrast:more) { .pp-figma .scard-sec .section-eyebrow,.pp-figma .pet-breed,.pp-figma .pet-age,.pp-figma .pet-bio,.pp-figma .music-artist,.pp-figma .music-album,.pp-figma .team-sport,.pp-figma .scard-sec .section-note,.pp-figma .garage-specs dt { opacity:1; } }