@font-face{font-family:VT323;font-style:normal;font-weight:400;font-display:swap;src:url("assets/vt323.woff2") format("woff2")}
:root{color-scheme:dark;--text:#f3f2f0;--muted:#b9b8bd;--edge:#54545b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:#0c0d11;color:var(--text);font-family:Arial,sans-serif;isolation:isolate;-webkit-font-smoothing:antialiased}
img{display:block;height:auto}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:5px}
[hidden]{display:none!important}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.out{margin-left:auto;width:19px;height:19px}
.emily-page{position:relative;z-index:1;width:min(430px,calc(100% - 44px));margin:0 auto;padding:76px 0 26px}
.identity-top{display:flex;align-items:center;justify-content:space-between;color:#b9b8bd;font-size:12px;letter-spacing:.23em}
.kaomoji{color:#c4c3c7;font-size:13px;letter-spacing:.06em}
.wordmark{position:relative;margin-top:68px;padding-bottom:24px}
h1{position:relative;width:max-content;max-width:100%;margin:0;font-family:VT323,monospace;font-size:140px;line-height:.78;font-weight:400;letter-spacing:-5px;color:#f3f2f0;text-shadow:2px 3px 0 #33333b;-webkit-font-smoothing:auto}
.surname{position:absolute;right:-17px;bottom:-30px;font-family:Georgia,serif;font-size:36px;font-weight:400;line-height:1;font-style:italic;letter-spacing:-1px;color:#c9c9cc;transform:rotate(-8deg);text-shadow:0 2px 7px #08090b}
.avatar-stamp{position:absolute;right:1px;top:16px;width:48px;height:57px;object-fit:cover;padding:3px;border:1px solid #696970;background:#16161b;transform:rotate(5deg);box-shadow:4px 4px 0 #08090b}
.handle{display:flex;align-items:center;gap:14px;margin:17px 0 0;font-size:12px;letter-spacing:.035em;color:#b9b8bd}
.handle>span{color:#c4c3c7;font-size:17px}
.links{margin-top:26px}
.featured-link{display:flex;align-items:center;gap:18px;min-height:82px;padding:17px 21px;border:1px solid #727279;border-radius:5px;background:linear-gradient(115deg,#29292e,#17171d);box-shadow:inset 0 1px 0 #fff1,0 7px 18px #0003;transition:border-color .2s,background .2s,transform .2s}
.feature-heart{width:24px;height:24px;color:#e2e1e5}
.feature-copy{display:grid;gap:4px}
.feature-copy strong{font-family:VT323,monospace;font-size:30px;font-weight:400;line-height:1;letter-spacing:.02em}
.feature-copy>span{font-size:12px;letter-spacing:.06em;color:#b9b8bd}
.featured-link:hover{border-color:#fff;background:linear-gradient(115deg,#34343b,#222228);transform:translateY(-2px)}
.accounts{margin-top:12px}
.account-card{display:flex;align-items:center;gap:18px;min-height:76px;padding:15px 21px;border:1px solid #484053;border-radius:5px;background:#171725e8;transition:background .2s,border-color .2s}
.account-card.alternate{background:#141419ed;border-color:#45454e}
.account-copy{display:grid;gap:5px}
.account-label{font-family:VT323,monospace;font-size:24px;line-height:1}
.account-card strong{font-size:14px;line-height:1.2;font-weight:400;letter-spacing:.01em;color:#dedde2}
.account-card:hover{border-color:#a5a5ae;background:#28282e}
.pokemon{position:absolute;display:block;z-index:1;pointer-events:none}
.pokemon img{width:100%;height:auto;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 6px 4px #0008)}
.gengar{width:80px;right:-17px;bottom:calc(100% - 19px);transform:translateY(16px)}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding-top:8px;color:#aaaab4;font-family:VT323,monospace;font-size:16px}
footer>span>span{color:#c4c3ca}
.credits-link{display:flex;align-items:center;min-height:44px;padding:0 4px;color:#aaaab4;font:12px Arial,sans-serif}
@media(max-width:520px){
 .emily-page{width:calc(100% - 44px);padding-top:38px}
 .wordmark{margin-top:54px}
 h1{font-size:119px;letter-spacing:-4px}
 .surname{font-size:32px;bottom:-28px;right:-8px}
 .avatar-stamp{width:39px;height:47px;top:12px;right:3px}
 .links{margin-top:20px}
 .featured-link{min-height:76px;padding:15px 17px;gap:15px}
 .feature-copy strong{font-size:28px}
 .accounts{margin-top:10px}
 .account-card{padding:13px 17px;min-height:72px;gap:17px}
 .gengar{width:70px;right:-13px;bottom:calc(100% - 16px)}
}
@media(max-width:360px){
 .emily-page{width:calc(100% - 36px);padding-top:30px}
 h1{font-size:103px}
 .surname{font-size:29px}
 .avatar-stamp{width:35px;height:43px}
 .gengar{width:61px;right:-9px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}

/* The photographs lead; the links stay in a stable, readable column. */
body{background:#09090b}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-shell{display:grid;grid-template-columns:minmax(0,1fr) 390px;align-items:center;gap:clamp(32px,5vw,80px);width:min(1040px,calc(100% - 64px));min-height:calc(100svh - 64px);margin:32px auto}
.photo-sequence{position:relative;width:100%;max-width:520px;height:clamp(440px,70svh,660px);background:#09090b;overflow:hidden}
.sequence-images{position:absolute;inset:0;container-type:size}
.sequence-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease-out}
.sequence-frame.is-current{opacity:1}
/* Non-destructive screenshot crops: the photo pixels are never regenerated. */
.sequence-image{position:relative;display:block;flex:none;width:min(100cqw,calc(100cqh * var(--crop-ratio,.75)));aspect-ratio:var(--crop-ratio,.75);overflow:hidden}
.photo-topline{position:absolute;inset:0 0 auto;z-index:1;min-height:44px;padding:12px 16px;color:#fff;text-shadow:0 1px 4px #000;background:linear-gradient(#0008,transparent);pointer-events:none}
.photo-topline .kaomoji{color:inherit}
.sequence-photo{display:block;width:var(--image-width,100%);max-width:none;height:auto;transform:translate(var(--image-x,0%),var(--image-y,0%))}
.sequence-shade{position:absolute;inset:0;background:linear-gradient(0deg,#09090b 0%,transparent 12%);pointer-events:none}
.emily-page{width:100%;min-width:0;margin:0;padding:0}
.wordmark{margin-top:104px}
.footer-signature{position:relative;display:inline-block}
.footer-asuna{position:absolute;height:106px;width:auto;max-width:none;left:9px;bottom:calc(100% - 5px);transform:scaleX(-1);filter:drop-shadow(0 4px 3px #0008);pointer-events:none}
h1{font-size:132px}
.avatar-stamp{width:40px;height:48px}
.links{margin-top:29px}
@media(max-width:959px){
 .site-shell{display:block;width:100%;min-height:0;margin:0 auto 28px}
 /* Keep tablet portraits at the desktop photo width instead of enlarging screenshots. */
 .photo-sequence{width:100%;max-width:520px;margin-inline:auto;height:68svh;min-height:420px;max-height:720px}
 .sequence-frame{align-items:flex-start}
 .sequence-shade{background:linear-gradient(0deg,#09090b 0%,#09090b55 20%,transparent 48%)}
 .emily-page{width:min(430px,calc(100% - 40px));margin:-156px auto 0;padding-top:0}
 .wordmark{margin-top:104px}
 h1{font-size:120px}
 .gengar{width:63px;right:-9px;bottom:calc(100% - 15px)}
 .handle{margin-top:17px}
 .links{margin-top:25px}
 .featured-link,.account-card.alternate{background:#151518f5}
}
@media(max-width:360px){h1{font-size:103px}.emily-page{width:calc(100% - 32px)}}

/* Companions sit inside the link borders, leaving room for the labels. */
.featured-link,.account-card{position:relative;overflow:hidden;min-height:92px;padding-block:17px;border-radius:5px}
.featured-link{padding-left:64px;padding-right:112px}
.feature-heart{position:absolute;left:23px;top:50%;transform:translateY(-50%)}
.featured-link>.out{display:none}
.account-card.alternate{padding-left:64px;border-color:#727279}
.feature-copy,.account-copy{gap:4px;flex-shrink:0}
.feature-copy strong,.account-label{font-size:28px;line-height:1;letter-spacing:.02em}
.feature-copy>span,.account-card strong{font-size:14px;line-height:1.2;letter-spacing:.01em;color:#b9b8bd}
.account-card.alternate>.icon:not(.out){display:none}
.link-companion{right:8px;bottom:7px;overflow:hidden;pointer-events:none}
.link-magician{position:absolute;right:9px;bottom:0;width:86px;height:73px;overflow:hidden;pointer-events:none}
.link-magician img{position:absolute;top:0;left:-3px;width:92px;height:auto;max-width:none;filter:drop-shadow(0 3px 3px #0008)}
@media(max-width:400px){.featured-link{padding-right:108px}}
@media(max-width:360px){.feature-copy strong,.account-label{font-size:26px}}
.link-umbreon{width:43px;height:51px;left:10px;right:auto;bottom:calc(50% - 25.5px);transform:scaleX(-1)}
.link-companion img{position:absolute;left:0;bottom:0}
.accounts{margin-top:12px}
/* Align the padded still-image alternatives with the same button edge. */
.link-companion img[src$=".png"]{width:96px;height:96px;max-width:none}
.link-umbreon img[src$=".png"]{left:-27px;bottom:-23px}
@media(prefers-reduced-motion:reduce){
 .link-companion img{width:96px;height:96px;max-width:none}
 .link-umbreon img{left:-27px;bottom:-23px}
}
.footer-actions{display:flex;align-items:center;gap:10px}
.asuka-note{position:relative;width:124px;height:158px;margin:24px 0 0 auto;pointer-events:none}
.asuka-note img{position:absolute;right:8px;bottom:12px;display:block;width:auto;height:132px;max-width:none;object-fit:contain;filter:drop-shadow(0 5px 8px #0008)}
.asuka-note+footer{margin-top:8px}
.motion-toggle{display:flex;align-items:center;min-height:44px;border:0;padding:0 4px;background:transparent;color:#aaaab4;font:12px Arial,sans-serif;cursor:pointer}
.motion-toggle:hover{color:#fff}
[data-motion-paused="true"] *,[data-motion-paused="true"] *::before,[data-motion-paused="true"] *::after{animation-play-state:paused!important;transition:none!important}
