
.profile-trigger{position:absolute;left:65%;top:77%;z-index:5;display:flex;align-items:center;gap:10px;padding:24px;border:0;background:transparent;color:white;cursor:pointer;font:500 clamp(12px,1.1vw,20px)/1.5 sans-serif;text-shadow:0 1px 8px #000}
.profile-trigger:focus,.profile-trigger:focus-visible{outline:none;box-shadow:none}.profile-trigger:focus-visible>span:last-child{text-decoration:underline;text-underline-offset:5px}.profile-dot{position:relative;flex-shrink:0;width:10px;height:10px;border-radius:50%;background:white;box-shadow:0 0 0 6px #fff2;animation:profile-pulse 2s ease-in-out infinite}
.profile-dot::after{content:"";position:absolute;inset:-7px;border:1px solid #ffffffb3;border-radius:50%;animation:profile-ring 2s ease-in-out infinite}@keyframes profile-ring{0%,100%{transform:scale(.85);opacity:.45}50%{transform:scale(1.25);opacity:1}}
@keyframes profile-pulse{50%{box-shadow:0 0 0 14px #fff0;opacity:.55}}
.cover-welcome{transition:transform .8s cubic-bezier(.65,0,.35,1);will-change:transform}
body.profile-open{overflow:hidden}.profile-open .cover-welcome{transform:translateY(-100dvh)}
.profile-panel{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#25242d url('/static/profile/4.jpg') center/cover no-repeat;transform:translateY(100%);visibility:hidden;transition:transform .8s cubic-bezier(.65,0,.35,1),visibility 0s .8s;overflow:auto;isolation:isolate}
.profile-open .profile-panel{transform:translateY(0);visibility:visible;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.profile-stage{position:relative;width:min(100vw,177.68dvh);aspect-ratio:3344/1882;isolation:isolate;flex-shrink:0}
.profile-background,.profile-copy{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.profile-heading{position:absolute;left:3%;top:2%;width:29%;mix-blend-mode:screen}
.profile-badge{position:absolute;left:37.2%;top:0;width:25.2%;height:86.5%;object-fit:contain}
.profile-copy{mix-blend-mode:screen;pointer-events:none}
.profile-heading,.profile-badge,.profile-copy{opacity:0}
.profile-animate .profile-heading{animation:profile-drop 2s ease-out both}
.profile-animate .profile-badge{animation:profile-bounce 2s both}
.profile-animate .profile-copy{animation:profile-fade 2s ease both}
@keyframes profile-drop{0%{transform:translateY(var(--entry-y,-110vh));opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes profile-bounce{0%{transform:translateY(var(--entry-y,-110vh));opacity:1;animation-timing-function:ease-in}40%{transform:translateY(0);animation-timing-function:ease-out}53%{transform:translateY(-12%);animation-timing-function:ease-in}65%{transform:translateY(0);animation-timing-function:ease-out}75%{transform:translateY(-6%);animation-timing-function:ease-in}84%{transform:translateY(0);animation-timing-function:ease-out}91%{transform:translateY(-2.5%);animation-timing-function:ease-in}100%{transform:translateY(0);opacity:1}}
@keyframes profile-fade{0%,50%{opacity:0}100%{opacity:1}}
.profile-back{position:fixed;right:24px;top:var(--back-top,24px);z-index:40;border:0;border-radius:0;background:transparent;color:#d5d5d5;padding:0;outline:none;box-shadow:none;cursor:pointer;font:12px/1.5 sans-serif}.profile-back:focus,.profile-back:focus-visible{outline:none;box-shadow:none}.profile-back:focus-visible{text-decoration:underline}.profile-back span{margin-left:4px;font-size:12px}
@media(orientation:portrait){.profile-trigger{top:54%;left:60%;padding:18px;font-size:12px}.profile-panel{display:block;padding-top:90px}.profile-stage{width:100%;min-width:0;transform-origin:top left}.profile-back{top:var(--back-top,24px);right:16px}}
@media(prefers-reduced-motion:reduce){.cover-welcome,.profile-panel{transition:none}.profile-animate .profile-heading,.profile-animate .profile-badge,.profile-animate .profile-copy{animation:none;opacity:1}.profile-dot,.profile-dot::after{animation:none}}
/* Foreground travels 1.5 viewports while the background travels one. */
.cover-overlay,.cover-fragment,.cover-action,.profile-trigger{
 transition:transform .8s cubic-bezier(.65,0,.35,1);
}
.profile-open .cover-overlay,.profile-open .cover-fragment,
.profile-open .cover-action,.profile-open .profile-trigger{transform:translateY(-50dvh)}
/* A soft band follows the shared page boundary, then fades after arrival. */
.profile-seam{position:fixed;left:0;right:0;top:100dvh;height:44dvh;margin-top:-22dvh;z-index:45;pointer-events:none;visibility:hidden;opacity:0;background:linear-gradient(to bottom,transparent 0%,rgba(37,36,45,.18) 15%,rgba(37,36,45,.75) 38%,#25242d 50%,rgba(37,36,45,.75) 62%,rgba(37,36,45,.18) 85%,transparent 100%)}
.profile-open .profile-seam{visibility:visible;animation:profile-seam-travel .8s cubic-bezier(.65,0,.35,1) both,profile-seam-fade .5s ease-out .8s forwards;opacity:1}
@keyframes profile-seam-travel{from{transform:translateY(0)}to{transform:translateY(-100dvh)}}
@keyframes profile-seam-fade{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.cover-overlay,.cover-fragment,.cover-action,.profile-trigger{transition:none}.profile-seam{display:none}}
/* Reverse the boundary band with the returning welcome page. */
.profile-returning .profile-seam{visibility:visible;opacity:1;animation:profile-seam-return .8s cubic-bezier(.65,0,.35,1) both,profile-seam-fade .5s ease-out .8s forwards}
@keyframes profile-seam-return{from{transform:translateY(var(--seam-return-start,-100dvh))}to{transform:translateY(0)}}
