html{scrollbar-gutter:stable}
.header{position:fixed;background:linear-gradient(180deg,#08090bf5,#08090bb3 65%,#08090b00);transition:opacity .35s}
#site-world{position:relative;z-index:2;isolation:isolate}
.header nav>.nav-contact{display:flex;align-items:center;gap:12px;margin-left:30px;padding:8px 0 8px 10px;min-height:44px;font-size:12px;white-space:nowrap}
.nav-contact:hover{color:var(--orange)}
.contact-orbit{width:19px;height:19px;border:1px solid var(--orange);border-radius:50%;box-shadow:0 0 9px #ff673b3d,inset 0 0 5px #ff673b3d;position:relative;transform:rotate(-28deg)}
.contact-orbit:after{content:'';position:absolute;inset:5px -5px;border:1px solid #eeeae299;border-radius:50%}
.contact-filter-defs{position:absolute;pointer-events:none}
body.contact-active{overflow:hidden}
body.contact-active .header{opacity:.25}
#contact-portal{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;margin:0;border:0;color:var(--fg);background:transparent;overflow:hidden;isolation:isolate}
#contact-portal::backdrop{background:transparent}
#contact-portal:before{content:'';position:absolute;inset:0;background:#03040766;pointer-events:none;opacity:0;transition:opacity .6s}
#contact-portal.is-open:before{opacity:1}
#blackhole{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#contact-portal #raccoon-world,#contact-portal #raccoon-foreground{z-index:2;opacity:1;filter:none}
.contact-core{position:absolute;z-index:3;left:50%;top:50%;width:min(360px,65vw);max-height:calc(100dvh - 130px);transform:translate(-50%,-50%);overflow:auto;scrollbar-width:thin;scrollbar-color:#44322c transparent;opacity:0;transition:opacity .7s ease .85s}
.is-open .contact-core{opacity:1}
.contact-signature{font-size:12px;font-weight:500;letter-spacing:-.3px;display:block;text-align:center;margin-bottom:15px}
.contact-signature>span{color:var(--orange)}
.contact-core h2{font-size:38px;line-height:1.3;font-weight:450;letter-spacing:-.03em;text-align:center;text-wrap:balance}
#contact-subtitle{font-size:12px;color:#b1aba7;line-height:1.8;text-align:center;margin:10px 0 22px}
.contact-socials{display:flex;flex-direction:column}
.contact-socials>a,.contact-pending{display:flex;align-items:center;gap:12px;min-height:49px;border-bottom:1px solid #ffffff24;font-size:18px;transition:color .2s,padding .2s}
.contact-socials>a:hover{color:#ff9978;padding-left:6px}
.contact-core a:focus-visible,.contact-core button:focus-visible{outline-offset:-2px}
.contact-socials small{font-size:10px;color:#a9a4a0;margin-left:auto}
.contact-socials svg{color:var(--orange)}
.contact-pending{color:#a9a4a0}
.contact-wechat{margin-top:23px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.contact-wechat>div{display:flex;flex-direction:column;gap:5px}
.contact-wechat>div>span{font-size:10px;color:#b1aba7}
.contact-wechat strong{font-size:23px;font-weight:450;letter-spacing:-.02em;user-select:all}
.contact-copy{font-size:11px;padding:11px 0 11px 12px;min-height:44px;color:#ff9978}
.contact-copy:hover{color:var(--fg)}
.contact-wechat>p{width:100%;font-size:11px;color:#b1aba7}
.contact-copy-status{min-height:18px;margin-top:8px;color:#ff9978;font-size:11px}
.contact-close{position:absolute;z-index:4;right:var(--pad);top:28px;min-height:48px;display:flex;align-items:center;gap:18px;font-size:12px;padding:8px}
.contact-close svg{border:1px solid #ffffff55;border-radius:50%;padding:9px;width:22px;height:22px;box-sizing:content-box;transition:transform .3s,color .3s}
.contact-close:hover svg{transform:rotate(90deg);color:var(--orange)}
.contact-escape{position:absolute;z-index:3;bottom:30px;left:50%;transform:translateX(-50%);font:9px var(--mono);letter-spacing:1px;color:#b1aba7;pointer-events:none}
.blackhole-fallback{display:none;position:absolute;left:50%;top:50%;width:var(--hole-diameter,620px);height:calc(var(--hole-diameter,620px)*var(--hole-axis,1));transform:translate(-50%,-50%);border-radius:50%;background:#020203;box-shadow:0 0 0 2px #ffe4bc,0 0 9px 4px #ffbd7b,0 0 26px 5px #ff673baa,inset 0 0 14px #ff673b77;pointer-events:none}
.portal-fallback .blackhole-fallback{display:block}
.portal-fallback #blackhole{display:none}
#contact-portal.is-closing{opacity:0;transition:opacity .25s}
.is-closing .contact-core{transition:opacity .15s;opacity:0}
@media(max-width:1000px){.header nav>.nav-contact{margin-left:0}.contact-core{width:min(340px,65vw)}}
@media(max-width:700px){
  .header nav{gap:16px}.header nav>.nav-contact{padding-left:0;font-size:11px;gap:8px}.header nav>a[href="#about"]{display:none}
  .contact-orbit{width:16px;height:16px}.contact-orbit:after{inset:4px -4px}
  .contact-core{width:64vw;max-width:290px;max-height:calc(var(--hole-diameter)*.9)}.contact-signature{font-size:10px;margin-bottom:6px}.contact-core h2{font-size:26px}#contact-subtitle{font-size:10px;margin:5px 0 10px}
  .contact-socials>a,.contact-pending{min-height:44px;font-size:15px;gap:8px}.contact-socials small{font-size:9px}
  .contact-wechat{margin-top:10px;gap:5px}.contact-wechat strong{font-size:20px}.contact-wechat>p{font-size:10px}.contact-copy{font-size:10px;padding-left:8px}.contact-copy-status{min-height:0;margin-top:5px;font-size:10px}
  .contact-close{top:16px;gap:10px}.contact-close svg{width:20px;height:20px;padding:10px}.contact-escape{bottom:23px;font-size:8px}
}
@media(max-width:360px){.header nav{gap:12px}.header nav>.nav-contact{gap:5px}.contact-orbit{width:13px;height:13px}.contact-core h2{font-size:23px;margin-bottom:5px}.contact-signature,#contact-subtitle{display:none}.contact-socials small{font-size:8px}.contact-copy{font-size:9px}}
@media(max-height:560px) and (min-width:700px){.contact-core{width:calc(var(--hole-diameter)*.66);max-height:calc(var(--hole-diameter)*.9)}.contact-signature,#contact-subtitle{display:none}.contact-core h2{font-size:22px;margin-bottom:5px}.contact-socials>a{min-height:38px;font-size:15px}.contact-socials small{display:none}.contact-wechat{margin-top:8px;gap:4px}.contact-wechat strong{font-size:20px}.contact-copy{font-size:10px}.contact-copy-status{font-size:10px;min-height:0;margin-top:4px;text-align:center}.contact-close{top:10px}.contact-escape{bottom:12px}}
@media(prefers-reduced-motion:reduce){.contact-core{transition:none}.contact-close svg,.contact-socials>a{transition:none}#contact-portal{transition:none!important}}
