@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'ZCOOL XiaoWei';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/zcool-xiaowei-name.ttf') format('truetype')}
:root{font-family:Manrope,Arial,sans-serif;color:#191e26;background:#f3f5f7;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
::selection{background:#d8e1ff;color:#191e26}
canvas:focus-visible{outline:2px solid #2955ed;outline-offset:6px}
.profile{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:56px 6% 96px;background:radial-gradient(ellipse at 75% 37%,#fff 0%,#f3f5f7 63%)}
.intro{position:relative;z-index:2;pointer-events:none;margin:auto 0;padding:48px 0 48px;width:fit-content}
h1{font-family:'ZCOOL XiaoWei',Georgia,serif;font-size:clamp(96px,14.3vw,212px);font-weight:400;line-height:1;letter-spacing:-.025em;margin:0 0 34px -8px}
.name-dot{color:#191e26}
.qualification{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;font-size:21px;font-weight:500;letter-spacing:-.4px;margin:0;color:#495665;line-height:1.4}
.qualification-org{color:#636f7c;font-size:.85em;white-space:nowrap}
.qualification-org::before{content:'/';margin-right:16px;color:#aab4bf}
.art{position:absolute;right:-2%;top:0;bottom:0;width:64%;z-index:1}
.art>canvas,.art>#fallback{position:absolute;inset:0;display:block;width:100%;height:100%}
.art>#fallback{object-fit:contain;padding:4% 8%}
.art>canvas{opacity:0;cursor:grab;touch-action:pan-y;transition:opacity .6s;outline-offset:-10px}
.art>canvas.ready{opacity:1}
.art>canvas:active{cursor:grabbing}
[hidden]{display:none!important}
@media(min-width:1600px){.profile{padding-inline:max(6%,calc((100% - 1480px)/2))}.intro{padding-block:80px}h1{font-size:230px}.art{width:62%;right:0}.qualification{font-size:23px}}
@media(max-width:900px){.profile{padding:36px 6% 96px}.intro{padding-block:65px}h1{font-size:clamp(92px,16vw,148px)}.qualification{font-size:19px;gap:8px 12px}.qualification-org::before{margin-right:12px}.art{right:-9%;width:69%}}
@media(max-width:600px){.profile{padding:28px 7% calc(20px + env(safe-area-inset-bottom));min-height:100svh}.intro{margin:35px 0 0;padding:0;width:100%}h1{font-size:clamp(92px,26.5vw,138px);margin-bottom:24px;letter-spacing:-.025em;margin-left:-4px;line-height:1}.qualification{font-size:18px;gap:4px 12px;letter-spacing:-.35px}.qualification-org{font-size:15px}.qualification-org::before{margin-right:12px}.art{position:relative;right:auto;top:auto;bottom:auto;width:122%;margin-left:-11%;height:330px;min-height:260px;flex:1}.art>#fallback{padding:0 9%}}
@media(max-width:360px){.intro{margin-top:27px}h1{font-size:91px}.qualification{font-size:17px;gap:4px 10px}.qualification-org{font-size:14px}.qualification-org::before{margin-right:10px}.art{min-height:240px;height:280px}}
@media(prefers-reduced-motion:reduce){.art>canvas{transition:none}}