/* generated from pf.css: a TellHi page drawn inside .pfx */
.pfx *, .pfx *::before, .pfx *::after { box-sizing: border-box; }
.pfx { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.pfx .pf-page { margin: 0; min-height: calc(var(--pfx-h) * 100 / 100); min-height: calc(var(--pfx-h) * 100 / 100); background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip; --ease: cubic-bezier(.2, .8, .2, 1); --t: 250ms; }
.pfx .pf-page.is-locked { overflow: hidden; }
.pfx h1, .pfx h2, .pfx p { margin: 0; }
.pfx a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pfx button { font: inherit; color: inherit; margin: 0; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pfx :focus { outline: none; }
.pfx :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.pfx img, .pfx svg { display: block; max-width: 100%; }
.pfx ul { margin: 0; padding: 0; list-style: none; }
.pfx .ic { width: 20px; height: 20px; flex: none; }
.pfx .pf-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-color: var(--page); background-image: var(--wall, none); background-size: var(--wall-size, auto); background-repeat: repeat; }
.pfx .pf { position: relative; z-index: 1; width: 100%; max-width: 640px; min-height: calc(var(--pfx-h) * 100 / 100); min-height: calc(var(--pfx-h) * 100 / 100); margin: 0 auto; display: flex; flex-direction: column; align-items: center;
  padding: calc(14px + 0px) max(18px, 0px) calc(28px + 0px) max(18px, 0px); }
.pfx .pf-top { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.pfx .pf-round { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; color: #101010; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(16,16,16,.08); transition: transform .15s var(--ease); }
.pfx .pf-home:active, .pfx .pf-round:active { transform: scale(.94); }
.pfx .pf-home { height: 44px; padding: 0 14px; border-radius: 22px; background: #FFFFFF; color: #101010; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(16,16,16,.08); transition: transform .15s var(--ease); }
.pfx .pf-home-h { width: auto; height: 18px; }
.pfx .pf-cover { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 24px; margin-bottom: -52px; }
.pfx .pf-id { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pfx .pf-avatar { width: 104px; height: 104px; flex: none; border-radius: 50%; object-fit: cover; background: transparent; }
.pfx .pf-avatar.is-initials { display: grid; place-items: center; background: var(--title); color: var(--bg); font-family: var(--tfont); font-weight: var(--tweight); font-size: 38px; }
.pfx .pf-a-square .pf-avatar { border-radius: 30px; }
.pfx .pf-a-ring .pf-avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--title); }
.pfx .has-cover .pf-avatar { box-shadow: 0 0 0 4px var(--bg); }
.pfx .has-cover.pf-a-ring .pf-avatar, .pfx .pf-a-ring .has-cover .pf-avatar { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--title); }
.pfx .pf-name { margin-top: 4px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 100%;
  font-family: var(--tfont); font-weight: var(--tweight); color: var(--title); font-size: clamp(23px, calc(var(--pfx-w) * 6.2 / 100), 30px); line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pfx .pf-check { width: 22px; height: 22px; flex: none; }
.pfx .pf-bio { max-width: 34em; color: var(--muted); font-size: 16px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pfx .pf-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 2px; }
.pfx .pf-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--fg); transition: transform .15s var(--ease), opacity .15s; }
.pfx .pf-ico .ic { width: 24px; height: 24px; }
.pfx .pf-ico:hover { transform: translateY(-2px); }
.pfx .pf-i-chip .pf-ico { background: var(--chip); color: var(--chip-fg); }
.pfx .pf-i-chip .pf-ico .ic { width: 20px; height: 20px; }
.pfx .pf-i-chip .pf-icons { gap: 10px; }
.pfx .pf-links { width: 100%; display: grid; gap: 12px; margin-top: 22px; }
.pfx .pf-btn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 52px; border-radius: var(--radius);
  background: var(--b-bg); color: var(--b-fg); box-shadow: inset 0 0 0 2px var(--b-line), var(--b-sh); font-weight: var(--bweight); font-size: 16px; line-height: 1.25; text-align: center; overflow-wrap: anywhere;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.pfx .pf-b-solid .pf-btn, .pfx .pf-b-soft .pf-btn { box-shadow: var(--b-sh); }
.pfx .pf-btn:hover { transform: translateY(-2px); }
.pfx .pf-btn:active { transform: scale(.985); }
.pfx .pf-btn-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; }
.pfx .pf-btn-ic .ic { width: 22px; height: 22px; }
.pfx .pf-btn.is-hidden { opacity: .42; }
.pfx .pf-flag { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pfx .pf-empty { margin-top: 24px; color: var(--muted); font-size: 15px; text-align: center; }
.pfx .pf-foot { margin-top: auto; padding-top: 44px; display: flex; justify-content: center; }
.pfx .pf-made { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #FFFFFF; color: #101010;
  font: 700 14px/1 "TH Inter", system-ui, sans-serif; box-shadow: 0 0 0 1.5px #101010; transition: transform .15s var(--ease); }
.pfx .pf-made:hover { transform: translateY(-1px); }
.pfx .is-frame .pf { min-height: calc(var(--pfx-h) * 100 / 100); }
.pfx .sheet { position: absolute; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; font: 400 16px/1.5 "TH Inter", system-ui, sans-serif; color: #101010; }
.pfx .sheet[hidden] { display: none; }
.pfx .sheet-scrim { position: absolute; inset: 0; background: rgba(16,16,16,.45); opacity: 0; transition: opacity var(--t) var(--ease); }
.pfx .sheet-panel { position: relative; width: 100%; background: #FFFFFF; border-radius: 24px 24px 0 0; display: grid; gap: 14px;
  padding: 6px max(20px, 0px) calc(22px + 0px) max(20px, 0px); transform: translateY(105%); transition: transform var(--t) var(--ease); }
.pfx .sheet.is-open .sheet-scrim { opacity: 1; }
.pfx .sheet.is-open .sheet-panel { transform: none; }
@container pfx (min-width: 640px) {
.pfx .sheet { align-items: center; padding: 24px; }
.pfx .sheet-panel { max-width: 480px; border-radius: 24px; padding: 6px 24px 24px; opacity: 0; transform: translateY(16px) scale(.98); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.pfx .sheet.is-open .sheet-panel { opacity: 1; transform: none; }
}
.pfx .sheet-h { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; }
.pfx .sheet-h h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pfx .sheet-x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.pfx .sheet-sub { color: #5E5E5A; margin-top: -8px; overflow-wrap: anywhere; }
.pfx .share-url { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 5px 5px 5px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(93,55,245,.35); min-width: 0; }
.pfx .share-u { color: #101010; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pfx .share-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: #101010; color: #FFFFFF; font-weight: 600; font-size: 14px; flex: none; transition: background-color .2s; }
.pfx .share-copy.is-done { background: #0F7A35; }
.pfx .share-copy .ic { width: 18px; height: 18px; }
.pfx .share-native { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(93,55,245,.35); font-weight: 600; }
.pfx .share-native[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.pfx *, .pfx *::before, .pfx *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.pfx .pf-i-white .pf-icons { gap: 10px; margin-top: 6px; }
.pfx .pf-i-white .pf-ico { width: 46px; height: 46px; background: #FFFFFF; color: var(--brand, #101010); box-shadow: 0 0 0 1px rgba(16,16,16,.08), 0 6px 16px -10px rgba(16,16,16,.5); }
.pfx .pf-i-white .pf-ico .ic { width: 22px; height: 22px; }
.pfx .pf-l-cards .pf { max-width: 560px; }
.pfx .pf-l-cards .pf-id { gap: 8px; }
.pfx .pf-l-cards .pf-avatar { width: 96px; height: 96px; }
.pfx .pf-l-cards .pf-name { font-size: clamp(34px, calc(var(--pfx-w) * 10 / 100), 48px); line-height: 1.02; letter-spacing: -.03em; margin-top: 8px; }
.pfx .pf-handle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; color: var(--fg); }
.pfx .pf-handle .pf-check { width: 20px; height: 20px; }
.pfx .pf-l-cards .pf-bio { color: var(--fg); }
.pfx .pf-cards { width: 100%; margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pfx .pf-cd-li { min-width: 0; }
.pfx .pf-cd-li.is-wide { grid-column: 1 / -1; }
.pfx .pf-cd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1 / 1; padding: 16px 12px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: var(--card); color: var(--card-fg); text-align: center; transition: transform .2s var(--ease); }
.pfx .is-wide .pf-cd { aspect-ratio: 16 / 9; }
.pfx .pf-cd:hover { transform: translateY(-2px); }
.pfx .pf-cd:active { transform: scale(.985); }
.pfx .pf-cd-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pfx .pf-cd.has-img { color: #FFFFFF; justify-content: flex-end; }
.pfx .pf-cd.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.5); }
.pfx .pf-cd-ic { width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; color: var(--brand, #101010); display: grid; place-items: center; flex: none; }
.pfx .pf-cd-ic .ic { width: 22px; height: 22px; }
.pfx .pf-cd.has-img .pf-cd-ic { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; }
.pfx .pf-cd.has-img .pf-cd-ic .ic { width: 18px; height: 18px; }
.pfx .pf-cd-t { font-family: var(--tfont); font-weight: var(--tweight); font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; max-width: 100%; }
.pfx .is-wide .pf-cd-t { font-size: 21px; }
.pfx .pf-cd.is-hidden { opacity: .42; }
.pfx .pf-cd .pf-flag { top: 12px; right: 12px; transform: none; background: #FFFFFF; color: #101010; padding: 4px 8px; border-radius: 999px; }
@container pfx (max-width: 359px) {
.pfx .pf-cards { gap: 10px; }
.pfx .pf-cd { border-radius: 18px; }
.pfx .pf-cd-t { font-size: 15px; }
}
.pfx .pf-photo { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--pfx-h) * 42 / 100); height: calc(var(--pfx-h) * 42 / 100); z-index: 0; overflow: hidden; pointer-events: none; }
.pfx .pf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pfx .pf-photo::after { content: none; }
.pfx .pf-ph-blur .pf-photo img { filter: blur(22px) saturate(1.1); transform: scale(1.12); }
.pfx .pf-ph-dark .pf-name, .pfx .pf-ph-blur .pf-name, .pfx .pf-ph-dark .pf-handle, .pfx .pf-ph-blur .pf-handle { color: #FFFFFF; }
.pfx .pf-ph-dark .pf-id, .pfx .pf-ph-blur .pf-id { color: #FFFFFF; }
.pfx .pf-ph-dark .pf, .pfx .pf-ph-blur .pf, .pfx .pf-ph-light .pf { padding-top: calc(14px + 0px); }
.pfx .pf-ph-dark .pf-id, .pfx .pf-ph-blur .pf-id, .pfx .pf-ph-light .pf-id { padding-top: calc(calc(var(--pfx-h) * 42 / 100) + 16px); }
.pfx .pf-ph-dark .pf-avatar, .pfx .pf-ph-blur .pf-avatar, .pfx .pf-ph-light .pf-avatar { display: none; }
.pfx .pf-ph-dark .pf-wall, .pfx .pf-ph-blur .pf-wall, .pfx .pf-ph-light .pf-wall { background: var(--bg); }
.pfx .pf-ph-dark .pf-cd:not(.has-img), .pfx .pf-ph-blur .pf-cd:not(.has-img) { background: rgba(255,255,255,.14); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pfx .pf-ph-light .pf-cd:not(.has-img) { background: rgba(255,255,255,.72); color: #101010; box-shadow: inset 0 0 0 1px rgba(16,16,16,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.pfx .pf-ph-dark .pf-cd:not(.has-img), .pfx .pf-ph-blur .pf-cd:not(.has-img) { background: var(--card); color: var(--card-fg); }
.pfx .pf-ph-light .pf-cd:not(.has-img) { background: #FFFFFF; }
}
.pfx .pf-ph-none .pf-wall { background: var(--page); }
@container pfx (min-width: 900px) {
.pfx .pf-photo { height: calc(var(--pfx-h) * 88 / 100); }
}
.pfx .pf-follow { display: flex; justify-content: center; margin-top: 16px; }
.pfx .pf-fol { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 148px; min-height: 46px; padding: 0 24px 0 20px; border-radius: var(--radius); border: 0;
  background: var(--title); color: var(--bg); box-shadow: inset 0 0 0 2px var(--title); font: 700 16px/1 var(--font); letter-spacing: -.005em; cursor: pointer;
  transition: background-color .28s cubic-bezier(.2, .8, .2, 1), color .28s cubic-bezier(.2, .8, .2, 1), transform .2s cubic-bezier(.3, 1.4, .5, 1); -webkit-tap-highlight-color: transparent; }
.pfx .pf-fol:active { transform: scale(.95); }
.pfx .pf-fol:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.pfx .pf-fol-ic { position: relative; width: 18px; height: 18px; flex: none; }
.pfx .pf-fol-ic .ic { position: absolute; inset: 0; width: 18px; height: 18px; transition: transform .32s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.pfx .pf-fol-check { opacity: 0; transform: scale(.4) rotate(-30deg); }
.pfx .pf-fol.is-on { background: var(--bg); color: var(--title); box-shadow: inset 0 0 0 2px var(--title); }
.pfx .pf-fol.is-on .pf-fol-plus { opacity: 0; transform: scale(.4) rotate(90deg); }
.pfx .pf-fol.is-on .pf-fol-check { opacity: 1; transform: none; }
.pfx .pf-fol.is-busy { pointer-events: none; }
.pfx .pf-fol.is-pop { animation: pf-fol-pop .42s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pf-fol-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.pfx .fol-acts { display: grid; gap: 10px; margin-top: 4px; }
.pfx .fol-go { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 999px; background: #FFFFFF; color: #101010; box-shadow: inset 0 0 0 2px #101010; font-weight: 800; font-size: 16px; text-decoration: none; transition: background-color .2s, color .2s, transform .15s; }
.pfx .fol-go:hover { background: #101010; color: #FFFFFF; }
.pfx .fol-go-main { background: #5D37F5; color: #FFFFFF; box-shadow: inset 0 0 0 2px #5D37F5; }
.pfx .fol-go-main:hover { background: #101010; box-shadow: inset 0 0 0 2px #101010; }
.pfx .fol-go:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
.pfx .pf-fol, .pfx .pf-fol-ic .ic { transition: none; }
.pfx .pf-fol.is-pop { animation: none; }
}
.pfx .pf-stage { width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.pfx .pf-f-panel .pf, .pfx .pf-f-line .pf, .pfx .pf-f-inset .pf, .pfx .pf-f-stamp .pf, .pfx .pf-f-ticket .pf, .pfx .pf-f-offset .pf, .pfx .pf-f-hair .pf, .pfx .pf-f-cap .pf, .pfx .pf-f-rail .pf, .pfx .pf-f-window .pf, .pfx .pf-f-belt .pf {
  padding-left: max(36px, 0px);
  padding-right: max(36px, 0px);
  padding-top: calc(20px + 0px);
}
.pfx .pf-f-panel .pf-stage, .pfx .pf-f-line .pf-stage, .pfx .pf-f-inset .pf-stage, .pfx .pf-f-stamp .pf-stage, .pfx .pf-f-ticket .pf-stage, .pfx .pf-f-offset .pf-stage, .pfx .pf-f-hair .pf-stage, .pfx .pf-f-cap .pf-stage, .pfx .pf-f-rail .pf-stage, .pfx .pf-f-window .pf-stage, .pfx .pf-f-belt .pf-stage {
  background: var(--page); border-radius: 28px; padding: 28px 20px 32px; width: 100%;
}
.pfx .pf-f-line .pf-stage { box-shadow: inset 0 0 0 3px var(--title); }
.pfx .pf-f-inset .pf-stage { box-shadow: inset 0 0 0 2px var(--title); padding: 32px 24px 36px; }
.pfx .pf-f-stamp .pf-stage { box-shadow: inset 0 0 0 2px var(--title); outline: 2px dashed var(--title); outline-offset: -8px; }
.pfx .pf-f-ticket .pf-stage {
  clip-path: polygon(0 0, 100% 0, 100% calc(50% - 10px), calc(100% - 10px) 50%, 100% calc(50% + 10px), 100% 100%, 0 100%, 0 calc(50% + 10px), 10px 50%, 0 calc(50% - 10px));
}
.pfx .pf-f-offset .pf-stage { box-shadow: 8px 8px 0 var(--title); }
.pfx .pf-s-split .pf-wall::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 42%; background: var(--bg2); pointer-events: none;
}
.pfx .pf-s-blocks .pf-wall::before {
  content: ""; position: absolute; top: 0; right: 0; width: 36%; height: 26%; background: var(--bg2); pointer-events: none;
}
.pfx .pf-s-blocks .pf-wall::after {
  content: ""; position: absolute; bottom: 7%; left: 0; width: 22%; height: 16%; background: var(--bg2); pointer-events: none;
}
.pfx .pf-a-squircle .pf-avatar { border-radius: 34%; }
.pfx .pf-a-arch .pf-avatar { border-radius: 52px 52px 16px 16px; }
.pfx .pf-a-stamp .pf-avatar { border-radius: 8px; box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--title); outline: 2px dashed var(--title); outline-offset: 5px; }
.pfx .pf-n-display .pf-name { font-size: clamp(32px, calc(var(--pfx-w) * 9 / 100), 52px); letter-spacing: -.04em; text-transform: uppercase; line-height: 1; }
.pfx .pf-n-editorial .pf-name { font-size: clamp(26px, calc(var(--pfx-w) * 7 / 100), 42px); letter-spacing: -.02em; }
.pfx .pf-b-offset .pf-btn, .pfx .pf-b-ticket .pf-btn, .pfx .pf-b-tab .pf-btn { box-shadow: var(--b-sh); }
.pfx .pf-b-text .pf-btn { box-shadow: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; min-height: 44px; padding-left: 18px; padding-right: 18px; }
.pfx .pf-b-text .pf-btn-ic { display: none; }
.pfx .pf-b-framed .pf-btn { box-shadow: inset 0 0 0 3px var(--b-line); }
.pfx .pf-b-tab .pf-btn { border-radius: 12px 12px 0 0; box-shadow: inset 0 -4px 0 var(--title), var(--b-sh); }
.pfx .pf-b-ticket .pf-btn {
  clip-path: polygon(0 0, 100% 0, 100% calc(50% - 8px), calc(100% - 8px) 50%, 100% calc(50% + 8px), 100% 100%, 0 100%, 0 calc(50% + 8px), 8px 50%, 0 calc(50% - 8px));
}
.pfx .pf-b-offset .pf-btn:hover { transform: translate(-2px, -2px); }
.pfx .pf-b-offset .pf-btn:active { transform: none; }
.pfx .pf-name.is-mq { display: flex; width: 100%; max-width: 100%; overflow: hidden; }
.pfx .pf-mq { flex: 1; min-width: 0; overflow: hidden; }
.pfx .pf-mq-track { display: inline-flex; white-space: nowrap; animation: th-marquee 14s linear infinite; }
.pfx .pf-mq-item { flex: none; padding-right: 2em; }
.pfx .pf-motifs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pfx .pf-motifs span {
  position: absolute; width: 128px; height: 128px; background: var(--bg2); border-radius: 50%;
  animation: th-bob 7s ease-in-out infinite alternate;
}
.pfx .pf-motifs span:first-child { top: 8%; left: -24px; }
.pfx .pf-motifs span:last-child { top: 26%; right: -36px; width: 168px; height: 168px; border-radius: 36px; animation-duration: 9s; animation-delay: -2s; }
.pfx .pf-m-drift .pf-wall { animation: th-drift 32s linear infinite; will-change: background-position; }
.pfx .pf-m-slide .pf-wall { animation: th-slide 22s linear infinite; will-change: background-position; }
.pfx .pf-m-blocks .pf-wall::before { animation: th-block-a 14s ease-in-out infinite alternate; will-change: transform; }
.pfx .pf-m-blocks .pf-wall::after { animation: th-block-b 11s ease-in-out infinite alternate; will-change: transform; }
.pfx .pf-m-bob .pf-motifs span, .pfx .pf-mq-track { will-change: transform; }
@keyframes th-drift { from { background-position: 0 0; } to { background-position: 120px 80px; } }
@keyframes th-slide { from { background-position: 0 0; } to { background-position: 160px 0; } }
@keyframes th-block-a { from { transform: translate(0, 0); } to { transform: translate(-18%, 14%); } }
@keyframes th-block-b { from { transform: translate(0, 0); } to { transform: translate(28%, -20%); } }
@keyframes th-bob { from { transform: translateY(0); } to { transform: translateY(18px); } }
@keyframes th-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pfx .pf-f-hair .pf-stage { box-shadow: inset 0 0 0 1px var(--title); }
.pfx .pf-f-cap .pf-stage { box-shadow: inset 0 8px 0 var(--title); }
.pfx .pf-f-rail .pf-stage { box-shadow: inset 8px 0 0 var(--title), inset -8px 0 0 var(--title); }
.pfx .pf-f-window .pf-stage { box-shadow: inset 0 0 0 8px var(--title); }
.pfx .pf-f-belt .pf-stage { box-shadow: inset 0 10px 0 var(--title); }
.pfx .pf-s-bar .pf-wall::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28%; background: var(--bg2); pointer-events: none;
}
.pfx .pf-s-spine .pf-wall::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 36%; width: 14%; background: var(--bg2); pointer-events: none;
}
.pfx .pf-s-corners .pf-wall::before {
  content: ""; position: absolute; top: 0; left: 0; width: 24%; height: 16%; background: var(--bg2); pointer-events: none;
}
.pfx .pf-s-corners .pf-wall::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 20%; height: 18%; background: var(--bg2); pointer-events: none;
}
.pfx .pf-n-quiet .pf-name { font-size: clamp(22px, calc(var(--pfx-w) * 6 / 100), 34px); letter-spacing: -.02em; font-weight: 600; }
.pfx .pf-n-quiet .pf-stage { padding-top: 36px; padding-bottom: 40px; }
.pfx .pf-n-quiet .pf-id { gap: 16px; margin-bottom: 8px; }
.pfx .pf-b-hairline .pf-btn { box-shadow: inset 0 0 0 1px var(--b-line); }
.pfx .pf-b-under .pf-btn { box-shadow: var(--b-sh); }
.pfx .pf-b-slash .pf-btn {
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: var(--b-sh);
}
.pfx .pf-b-notch .pf-btn {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: var(--b-sh);
}
.pfx .pf-m-crawl .pf-wall { animation: th-crawl 48s linear infinite; will-change: background-position; }
.pfx .pf-m-rise .pf-wall { animation: th-rise 40s linear infinite; will-change: background-position; }
.pfx .pf-m-rain .pf-wall { animation: th-rain 18s linear infinite; will-change: background-position; }
.pfx .pf-m-jog .pf-wall { animation: th-jog 6s steps(5, end) infinite; will-change: background-position; }
.pfx .pf-m-sway .pf-motifs span { animation: th-sway 6s ease-in-out infinite alternate; }
.pfx .pf-m-spin .pf-motifs span { border-radius: 0; animation: th-spin 28s linear infinite; }
.pfx .pf-m-band .pf-motifs span:first-child {
  width: 100%; height: 18%; left: 0; top: -20%; border-radius: 0; animation: th-band 9s linear infinite;
}
.pfx .pf-m-band .pf-motifs span:last-child { display: none; }
.pfx .pf-m-fade .pf-motifs span {
  background: transparent; box-shadow: inset 0 0 0 1px var(--bg2); animation: th-fade 7s ease-in-out infinite alternate;
}
@keyframes th-crawl { from { background-position: 0 0; } to { background-position: 80px 80px; } }
@keyframes th-rise { from { background-position: 0 0; } to { background-position: 0 160px; } }
@keyframes th-rain { from { background-position: 0 0; } to { background-position: 20px 240px; } }
@keyframes th-jog { from { background-position: 0 0; } to { background-position: 140px 0; } }
@keyframes th-sway { from { transform: translateX(0); } to { transform: translateX(22px); } }
@keyframes th-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes th-band { from { transform: translateY(0); } to { transform: translateY(140%); } }
@keyframes th-fade { from { opacity: .2; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.pfx .pf-wall, .pfx .pf-motifs span, .pfx .pf-mq-track, .pfx .pf-s-blocks .pf-wall::before, .pfx .pf-s-blocks .pf-wall::after, .pfx .pf-s-bar .pf-wall::before, .pfx .pf-s-spine .pf-wall::before, .pfx .pf-s-corners .pf-wall::before, .pfx .pf-s-corners .pf-wall::after {
    animation: none !important;
    transform: none !important;
  }
.pfx .pf-m-fade .pf-motifs span { opacity: 1; }
}
.pfx .pf-cover.is-video, .pfx video.pf-cover { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 24px; margin-bottom: -52px; background: var(--page); display: block; }
.pfx .pf-page.pf-l-focus { background: #101010; color: #FFFFFF; position: relative; }
.pfx .pf-l-focus .pf-wall { display: none; }
.pfx .pf-l-focus .pf-blur {
  position: sticky; top: 0; width: 100%; height: calc(var(--pfx-h) * 100 / 100); height: calc(var(--pfx-h) * 100 / 100);
  margin-bottom: -calc(var(--pfx-h) * 100 / 100); margin-bottom: -calc(var(--pfx-h) * 100 / 100); z-index: 0;
  overflow: hidden; pointer-events: none;
}
.pfx .pf-l-focus .pf-blur-media, .pfx .pf-l-focus .pf-blur-media-fallback {
  position: absolute; inset: -12%; width: 124%; height: 124%;
  object-fit: cover; filter: blur(50px);
}
.pfx .pf-l-focus .pf-blur::after {
  content: ""; position: absolute; inset: 0; background: rgba(16,16,16,.3);
}
.pfx .pf-l-focus .pf-stick, .pfx .pf-l-focus main.pf { position: relative; z-index: 1; }
.pfx .pf-l-focus .pf-stick {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  height: 56px; background: #101010; color: #FFFFFF;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.pfx .pf-l-focus .pf-stick.is-on { opacity: 1; pointer-events: auto; transform: none; }
.pfx .pf-l-focus .pf-stick-in { display: flex; align-items: center; gap: 10px; }
.pfx .pf-l-focus .pf-stick-av {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: #2A2118; color: #FFFFFF; font: 600 14px/40px var(--font); text-align: center;
  flex: none; display: block;
}
.pfx .pf-l-focus .pf-stick-av.is-initials { display: grid; place-items: center; line-height: 1; }
.pfx .pf-l-focus .pf-stick-n { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.pfx .pf-l-focus main.pf {
  width: 100%; max-width: none; padding: 0 0 48px; margin: 0; background: transparent;
}
.pfx .pf-l-focus .pf-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding: calc(16px + 0px) 16px 0;
}
.pfx .pf-l-focus .pf-home {
  height: 40px; padding: 0 12px; border-radius: 20px; color: #FFFFFF;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 0 0 0.5px rgba(255,255,255,.22);
}
.pfx .pf-l-focus .pf-home-h { color: #FFFFFF; }
.pfx .pf-l-focus .pf-hero { position: relative; width: 100%; overflow: hidden; }
.pfx .pf-l-focus .pf-hero-media, .pfx .pf-l-focus .pf-hero-media-fallback {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 0; margin: 0;
  -webkit-mask-image: url("/assets/focus-mask.svg");
  mask-image: url("/assets/focus-mask.svg");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.pfx .pf-l-focus .pf-hero-media-fallback { display: none; }
.pfx .pf-l-focus .pf-stage { padding: 0 20px; }
.pfx .pf-l-focus .pf-id {
  position: relative; z-index: 2; margin-top: -72px; margin-bottom: 12px;
  gap: 12px; color: #FFFFFF;
}
.pfx .pf-l-focus .pf-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px rgba(16,16,16,.35);
}
.pfx .pf-l-focus .pf-avatar.is-initials {
  display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #FFFFFF;
  font-size: 34px; font-weight: 600;
}
.pfx .pf-l-focus .pf-name {
  font-family: var(--title-font); font-size: 32px; font-weight: 600;
  line-height: 1.1; letter-spacing: -.03em; color: #FFFFFF;
}
.pfx .pf-l-focus .pf-handle { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); margin: 0; }
.pfx .pf-l-focus .pf-bio { color: rgba(255,255,255,.88); font-size: 15px; max-width: 22em; }
.pfx .pf-l-focus .pf-icons { margin-top: 6px; gap: 8px; }
.pfx .pf-l-focus .pf-ico {
  width: 40px; height: 40px; border-radius: 50%; color: #FFFFFF;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 0.5px rgba(255,255,255,.06);
}
.pfx .pf-l-focus .pf-follow { margin-top: 14px; }
.pfx .pf-l-focus .pf-fol, .pfx .pf-l-focus .pf-glass, .pfx .pf-l-focus .pf-cap {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 0.5px rgba(255,255,255,.06);
  color: #FFFFFF;
}
.pfx .pf-l-focus .pf-fol {
  min-width: 160px; min-height: 48px; border-radius: 9999px; border: 0;
}
.pfx .pf-l-focus .pf-fol.is-on {
  background: rgba(255,255,255,.92); color: #101010;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 0.5px rgba(255,255,255,.2);
}
.pfx .pf-l-focus .pf-round.pf-glass {
  width: 40px; height: 40px; border-radius: 50%; border: 0; color: #FFFFFF;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,.22);
}
.pfx .pf-l-focus .pf-feed { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 8px; }
.pfx .pf-l-focus .pf-hd {
  margin: 8px 2px 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: #FFFFFF;
}
.pfx .pf-l-focus .pf-feat, .pfx .pf-l-focus .pf-pair-item, .pfx .pf-l-focus .pf-car-item, .pfx .pf-l-focus .pf-grid-item {
  position: relative; display: block; overflow: hidden; color: #FFFFFF; text-decoration: none;
}
.pfx .pf-l-focus .pf-feat { border-radius: 16px; }
.pfx .pf-l-focus .pf-feat-media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: rgba(16,16,16,.35); }
.pfx .pf-l-focus .pf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pfx .pf-l-focus .pf-pair-item { border-radius: 16px; }
.pfx .pf-l-focus .pf-pair-media { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: rgba(16,16,16,.35); }
.pfx .pf-l-focus .pf-carousel { position: relative; }
.pfx .pf-l-focus .pf-car-track {
  display: flex; gap: 10px; margin: 0; padding: 0 8px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pfx .pf-l-focus .pf-car-track::-webkit-scrollbar { display: none; }
.pfx .pf-l-focus .pf-car-i { flex: 0 0 58%; scroll-snap-align: start; }
.pfx .pf-l-focus .pf-car-item { border-radius: 16px; }
.pfx .pf-l-focus .pf-car-media { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: rgba(16,16,16,.35); }
.pfx .pf-l-focus .pf-car-btn {
  position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
  display: grid; place-items: center; transform: translateY(-50%); cursor: pointer; color: #FFFFFF;
}
.pfx .pf-l-focus .pf-car-btn.is-prev { left: 4px; }
.pfx .pf-l-focus .pf-car-btn.is-next { right: 4px; }
.pfx .pf-l-focus .pf-car-btn .ic { width: 18px; height: 18px; }
.pfx .pf-l-focus .pf-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin: 0; padding: 0; list-style: none;
  border-radius: 12px; overflow: hidden;
}
.pfx .pf-l-focus .pf-grid-media { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: rgba(16,16,16,.35); }
.pfx .pf-l-focus .pf-cap {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  padding: 8px 12px; border-radius: 9999px;
  font-size: 13px; font-weight: 600; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pfx .pf-l-focus .pf-feat.is-empty, .pfx .pf-l-focus .is-empty { min-height: 120px; background: rgba(255,255,255,.06); }
.pfx .pf-l-focus .pf-foot { margin-top: 28px; }
.pfx .pf-l-focus .pf-made {
  color: #FFFFFF; background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 0.5px rgba(255,255,255,.06);
}
.pfx .pf-l-focus .pf-empty { color: rgba(255,255,255,.7); text-align: center; }
@container pfx (min-width: 900px) {
.pfx .pf-l-focus main.pf {
    width: 566px; margin: 34px auto 72px; border-radius: 30px; overflow: hidden;
    box-shadow: 0 1px 10px 2px rgba(0,0,0,.5);
  }
.pfx .pf-l-focus .pf-hero { border-radius: 30px 30px 0 0; }
.pfx .pf-l-focus .pf-stick { left: 50%; right: auto; width: 566px; margin-left: -283px; top: 34px; border-radius: 30px 30px 0 0; }
.pfx .pf-l-focus .pf-stick.is-on { top: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pfx .pf-l-focus [data-auto-video] { display: none; }
.pfx .pf-l-focus .pf-hero-media-fallback, .pfx .pf-l-focus .pf-blur-media-fallback { display: block; filter: blur(50px); }
.pfx .pf-l-focus .pf-hero-media-fallback { filter: none; }
.pfx .pf-l-focus .pf-stick { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
.pfx .pf-l-focus .pf-blur-media, .pfx .pf-l-focus .pf-blur-media-fallback { filter: none; }
.pfx .pf-l-focus .pf-blur::after { background: #101010; }
.pfx .pf-l-focus .pf-fol, .pfx .pf-l-focus .pf-glass, .pfx .pf-l-focus .pf-cap, .pfx .pf-l-focus .pf-ico {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(16,16,16,.82);
    box-shadow: 0 0 0 0.5px rgba(255,255,255,.14);
  }
}
.pfx .pf-page.pf-l-focus.pf-focus-bare { background: #F7F1E8; color: #101010; }
.pfx .pf-focus-bare .pf-blur { display: none; }
.pfx .pf-focus-bare .pf-stick { background: #F7F1E8; color: #101010; box-shadow: 0 1px 0 #101010; }
.pfx .pf-focus-bare .pf-stick-av { background: #F7F1E8; color: #101010; box-shadow: inset 0 0 0 1px #101010; }
.pfx .pf-focus-bare main.pf {
  background: #F7F1E8; box-shadow: none;
}
.pfx .pf-focus-bare .pf-home {
  color: #101010; background: #F7F1E8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px #101010;
}
.pfx .pf-focus-bare .pf-home-h { color: #101010; }
.pfx .pf-focus-bare .pf-round.pf-glass, .pfx .pf-focus-bare .pf-ico, .pfx .pf-focus-bare .pf-fol, .pfx .pf-focus-bare .pf-glass, .pfx .pf-focus-bare .pf-cap, .pfx .pf-focus-bare .pf-made {
  color: #101010; background: #F7F1E8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px #101010;
}
.pfx .pf-focus-bare .pf-fol.is-on { background: #101010; color: #F7F1E8; box-shadow: none; }
.pfx .pf-focus-bare .pf-id { margin-top: 64px; color: #101010; }
.pfx .pf-focus-bare .pf-avatar { box-shadow: 0 0 0 3px #F7F1E8, 0 0 0 4px #101010; }
.pfx .pf-focus-bare .pf-avatar.is-initials {
  background: #F7F1E8; color: #101010; box-shadow: inset 0 0 0 1px #101010;
}
.pfx .pf-focus-bare .pf-name { color: #101010; }
.pfx .pf-focus-bare .pf-handle { color: rgba(16,16,16,.72); }
.pfx .pf-focus-bare .pf-bio { color: #101010; }
.pfx .pf-focus-bare .pf-hd { color: #101010; }
.pfx .pf-focus-bare .pf-empty { color: rgba(16,16,16,.72); }
.pfx .pf-focus-bare .pf-addcover {
  margin: 72px 20px 0; text-align: center;
  font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: #101010;
}
.pfx .pf-focus-bare .pf-addcover::before {
  content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 12px;
  border-radius: 16px; box-shadow: inset 0 0 0 1px #101010;
}
@container pfx (min-width: 900px) {
.pfx .pf-focus-bare main.pf {
    background: #F7F1E8; box-shadow: inset 0 0 0 1px #101010;
  }
.pfx .pf-focus-bare .pf-stick { background: #F7F1E8; box-shadow: inset 0 0 0 1px #101010; }
}
.pfx .pf-page.is-frame .pf-top, .pfx .pf-page.is-frame .pf-stick { display: none !important; }
.pfx .pf-page.is-frame.pf-l-focus main.pf {
  width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none;
}
.pfx .pf-page.is-frame.pf-l-focus .pf-hero { border-radius: 0; }
.pfx .pf-page.is-frame.pf-focus-bare .pf-id { margin-top: 36px; }
@container pfx (min-width: 900px) {
.pfx .pf-page.is-frame.pf-l-focus main.pf {
    width: 100%; margin: 0; border-radius: 0; box-shadow: none;
  }
.pfx .pf-page.is-frame.pf-l-focus .pf-hero { border-radius: 0; }
}
