@font-face{font-family:Inter;src:url('/assets/InterVariable-latin.6466cd148df0.woff2') format('woff2');font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{background:#242424;color-scheme:dark}
body{margin:0;color:#fff;background:#242424;font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #8bc4ff;outline-offset:4px}
.background{display:none}
.profile{position:relative;display:flex;flex-direction:column;min-height:100svh;min-height:100dvh;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));isolation:isolate}
.profile-header{text-align:center;order:0}
.hero,.hero-picture{display:none}
.avatar{width:158px;height:158px;padding:4px;border-radius:50%;background:linear-gradient(135deg,#fafafa,#e6e6e6);margin:0 auto;overflow:hidden}
.avatar-crop{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#333}
.avatar img{position:absolute;display:block;width:150%;height:auto;max-width:none;left:-55%;top:-74%}
.identity{margin-top:-4px;position:relative}
.name-row{display:flex;align-items:center;justify-content:center;gap:6px}
h1{font-size:2rem;line-height:1.1;font-weight:750;letter-spacing:normal;margin:0;overflow-wrap:anywhere}
.handle{font-size:.875rem;line-height:1.4286;margin:4px 0 0;color:#eee;overflow-wrap:anywhere}
.links{order:1;margin-top:14.667px}
.tile{display:block;position:relative;height:270px;border-radius:16px;overflow:hidden;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;transform-origin:center;isolation:isolate}
.tile picture{display:block;width:100%;height:100%}
.tile img{width:100%;height:100%;object-fit:cover;object-position:center 47%;display:block}
.tile:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.tile-copy{position:absolute;z-index:1;bottom:16px;left:12px;right:12px;text-align:center;text-shadow:0 1px 8px #0009}
.tile-copy strong{display:block;font-size:1.125rem;line-height:1.5;font-weight:750}
.tile-copy small{display:block;font-size:.8125rem;line-height:1.5;font-weight:500;margin-top:2px}
.socials{order:2;display:flex;justify-content:center;gap:12px;margin-top:auto;padding:32px 0 8px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(242,242,242,.2)}
.socials svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(hover:hover){.tile:hover{transform:translateY(-1px);filter:brightness(1.025);box-shadow:0 8px 24px #0003}.socials a:hover{background:#484848}}
.tile:active{transform:scale(.99)}
@media(min-width:768px){
  body[data-view=home]{padding:24px 24px 40px}
  .background{display:block;position:fixed;inset:-50px;background:url('/assets/lilly-car-7930-480.17206534eb32.webp') center/cover;filter:blur(40px);transform:scale(1.1);pointer-events:none}
  .background:after{content:'';position:absolute;inset:0;background:rgba(36,36,36,.4)}
  .profile{max-width:509px;margin:auto;min-height:0;padding:0 16px 32px;background:#242424;border-radius:28px;box-shadow:0 12px 50px #0002}
  .profile-header{margin:0 -16px;position:relative;height:392.8px}
  .hero-picture{display:block;width:100%;height:100%}
  .hero{display:block;width:100%;height:100%;border-radius:28px 28px 0 0;object-fit:cover;object-position:center 36%}
  .profile-header:after{content:'';position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,#242424);pointer-events:none}
  .profile .avatar{display:none}
  .identity{position:absolute;z-index:1;bottom:30.667px;left:16px;right:16px;margin:0}
  h1{line-height:1.5}
  .handle{margin-top:0}
  .socials{order:1;margin-top:4px;padding:0}
  .links{order:2;margin-top:40px}
}
/* Browser instructions also work on short screens and enlarged text. */
.open-page{max-width:430px;margin:auto;min-height:100svh;padding:calc(84px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));position:relative;text-align:center}
.back{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:12px;display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:24px;background:#393939;font-size:.875rem}
.open-page .avatar{width:128px;height:128px;padding:0;background:none}
.open-name{font-size:.875rem;line-height:1.5385;margin:12px 0 28px}
.open-page h1{font-size:1.875rem;line-height:1.2;font-weight:750;letter-spacing:-.02em}
.intro{font-size:1rem;line-height:1.5;color:#cfcfcf;margin:12px auto 32px;max-width:290px}
.open-button{display:flex;justify-content:center;align-items:center;min-height:56px;border-radius:16px;background:#2268cc;font-size:1rem;line-height:1.5;font-weight:650;padding:14px 18px;margin:0 11px 24px;gap:10px}
.steps{list-style:none;margin:0;padding:20px 16px;text-align:left;border:1px solid #434343;background:#292929;border-radius:16px;box-shadow:0 8px 22px #0002}
.steps li{display:flex;align-items:center;gap:12px;font-size:.875rem;line-height:1.5715}
.steps li+li{margin-top:18px}
.step-number{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#414141;font-weight:650}
.open-options{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
.text-button{background:none;border:0;color:#ddd;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 4px;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.copy-status{font-size:.8125rem;line-height:1.5385;margin:8px 0 0;color:#d3d3d3}
.copy-url{width:100%;font-size:.875rem;min-height:44px;background:#333;color:#fff;border:1px solid #777;border-radius:8px;padding:8px;margin-top:10px}
.browser-help{width:100%;margin-top:12px}
.open-status:empty{display:none}
.open-status{margin:-12px 0 18px}
.message-page{max-width:430px;margin:15vh auto;padding:24px;text-align:center}
.message-page h1{font-size:1.75rem;line-height:1.2}
.message-page p{line-height:1.6;color:#ddd}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(prefers-reduced-motion:reduce){.tile:hover,.tile:active{transform:none}}

/* Immediate Instagram entry prompt. Native dialog owns focus and inertness. */
html:has(.browser-prompt[open]){overflow:hidden}
.browser-prompt:not([open]){display:none}
.browser-prompt{width:calc(100% - 32px);max-width:390px;max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:28px 24px 16px;border:1px solid #515151;border-radius:24px;background:#292929;color:#fff;text-align:center;box-shadow:0 24px 80px #0008}
.browser-prompt::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(7px)}
.prompt-eyebrow{margin:0 0 18px;font-size:.75rem;line-height:1.5;letter-spacing:.18em;color:#c5c5c5}
.browser-prompt h2{font-size:1.625rem;line-height:1.2;letter-spacing:-.025em;margin:0;text-wrap:balance}
.browser-prompt .intro{margin:14px auto 24px;font-size:.9375rem;line-height:1.6}
.browser-prompt .open-button{margin:0 0 18px}
.browser-prompt .open-status{margin:0 0 16px}
.prompt-instructions{text-align:left;font-size:.875rem;line-height:1.6;color:#ddd;border-top:1px solid #484848;padding-top:6px}
.prompt-instructions summary{min-height:44px;align-content:center;cursor:pointer;padding:8px 0}
.prompt-instructions p{margin:8px 0}
.prompt-dismiss{width:100%;margin-top:4px;color:#ccc}
