:root{--black:#000;--white:#fff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--white)}body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.site{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--white);isolation:isolate}.black-world{position:absolute;z-index:-1;inset:0;background:var(--black);clip-path:polygon(0 0,38% 0,62% 100%,0 100%);animation:world-in 1.25s cubic-bezier(.16,.78,.18,1) both}.profile{width:min(1024px,100%);margin:0 auto;padding:clamp(24px,5vh,60px) 22px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center}.avatar{position:relative;left:-3.6vw;z-index:2;width:clamp(220px,21vw,300px);height:clamp(220px,21vw,300px);margin:0 0 12px;animation:avatar-arrive 1s .18s cubic-bezier(.16,.8,.2,1) both,float 5s 1.2s ease-in-out infinite;filter:drop-shadow(0 24px 22px rgba(0,0,0,.2))}.avatar:after{content:"";position:absolute;left:24%;right:24%;bottom:5%;height:12px;border-radius:50%;background:var(--black);filter:blur(10px);opacity:.24;z-index:-1}.avatar img{width:100%;height:100%;display:block;object-fit:contain;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.92) 82%,rgba(0,0,0,.45) 92%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.92) 82%,rgba(0,0,0,.45) 92%,transparent 100%)}.profile-copy{width:min(760px,100%);text-align:center;color:var(--white);mix-blend-mode:difference}h1{margin:0;font-size:clamp(30px,4.2vw,54px);line-height:1.05;letter-spacing:-.045em;font-weight:750;animation:rise .85s .48s both}.profile-copy>p{margin:22px 0 0;font:500 clamp(12px,1.3vw,16px)/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;animation:rise .85s .58s both}.socials{list-style:none;padding:0;margin:32px 0 0;display:flex;justify-content:center;gap:20px;animation:rise .85s .68s both}.socials a{display:grid;place-items:center;width:44px;height:44px;color:inherit;border-radius:50%;transition:transform .28s ease,background .28s ease}.socials svg{width:28px;height:28px;fill:currentColor}.socials a:hover,.socials a:focus-visible{transform:translateY(-4px) scale(1.08);outline:none;background:currentColor}.socials a:hover svg,.socials a:focus-visible svg{filter:invert(1)}.footer{width:100%;padding:20px clamp(22px,5vw,72px) 26px;display:flex;justify-content:space-between;color:var(--white);mix-blend-mode:difference;font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;animation:fade .8s .8s both}@keyframes world-in{from{clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes avatar-arrive{from{opacity:0;transform:translateY(-28px) scale(.82)}to{opacity:1;transform:none}}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@media(max-width:700px){.black-world{clip-path:polygon(0 0,28% 0,72% 100%,0 100%)}.profile{padding:20px 20px 50px}.avatar{width:220px;height:220px;left:-6.5vw}h1{font-size:clamp(31px,10vw,48px)}.profile-copy>p{font-size:11px;letter-spacing:.14em}.footer{padding:18px}.footer span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.article-nav{position:absolute;top:28px;right:clamp(22px,5vw,72px);z-index:3}.article-nav a{display:inline-block;padding:10px 0;color:#000;font-size:14px;line-height:1.5;text-decoration:none;text-underline-offset:5px}.article-nav a:hover{text-decoration:underline}.article-nav a:focus-visible{outline:2px solid #000;outline-offset:5px}

.article-nav{width:min(300px,42vw)}.article-nav nav{text-align:right}.recent-articles{margin-top:12px;padding:18px 20px;border:1px solid #e5e5e5;border-radius:6px;background:#fff;color:#000}.recent-articles h2{margin:0 0 12px;font:500 12px/1.5 Arial,Helvetica,sans-serif;color:#777;letter-spacing:.06em}.article-nav .recent-article-link{display:block;padding:0;font-size:14px;line-height:1.7;overflow-wrap:anywhere}@media(max-width:700px){.article-nav{top:18px;right:18px;width:42vw}.recent-articles{margin-top:6px;padding:12px}.recent-articles h2{margin-bottom:8px;font-size:11px}.article-nav .recent-article-link{font-size:12px;line-height:1.6}}

.recent-article-link + .recent-article-link{margin-top:12px}

.article-nav nav{display:flex;justify-content:flex-end;gap:24px}

.activity{position:absolute;z-index:3;left:clamp(28px,5vw,72px);top:76px;width:min(260px,25vw);color:#f5f5f5;font-family:Arial,"PingFang SC",sans-serif}.activity h2{margin:0 0 30px;font-size:12px;font-weight:400;letter-spacing:.12em;color:#999}.timeline{list-style:none;padding:0 0 48px 22px;margin:0 0 0 4px;position:relative}.timeline:before{content:"";position:absolute;top:7px;left:0;bottom:0;width:1px;background:linear-gradient(#737373,#333 70%,transparent)}.timeline-item{position:relative}.timeline-item:before{content:"";position:absolute;left:-26px;top:5px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px #ffffff12}.timeline-status{font-size:11px;color:#bcbcbc;letter-spacing:.07em}.timeline-item h3{font-size:19px;font-weight:500;line-height:1.6;margin:14px 0 9px}.timeline-item p{font-size:12px;line-height:1.9;color:#999;margin:0 0 20px}.timeline-item a{font-size:12px;color:#ddd;text-decoration:none;text-underline-offset:5px}.timeline-item a:hover{text-decoration:underline}.timeline-item a:focus-visible{outline:1px solid #fff;outline-offset:5px}
@media(max-width:900px){.activity{top:74px;left:24px;width:26vw}.timeline-item h3{font-size:16px}.timeline-item p{font-size:11px}.profile{padding-top:330px;min-height:100svh}.article-nav{width:36vw}}
@media(max-width:540px){.activity{left:20px;top:76px;width:36vw}.activity h2{margin-bottom:22px}.timeline{padding-left:16px}.timeline-item:before{left:-20px}.timeline-item h3{font-size:14px}.timeline-item p{font-size:11px}.article-nav{width:42vw}.profile{padding-top:370px}}

.recent-articles{max-height:min(430px,48svh);overflow-y:auto;scrollbar-width:thin}@media(max-width:900px){.recent-articles{max-height:240px}}

/* Keep all homepage tabs in one row; scroll horizontally on narrow screens. */
.article-nav nav{width:min(440px,60vw);margin-left:calc(100% - min(440px,60vw));gap:18px;flex-wrap:nowrap;justify-content:flex-start;justify-content:safe flex-end;overflow-x:auto;scrollbar-width:thin}.article-nav nav a{white-space:nowrap;flex:0 0 auto}@media(max-width:540px){.article-nav nav{gap:14px}.article-nav nav a{font-size:12px}}

/* Keep recent titles on one line; article pages show the full title. */
.article-nav .recent-article-link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}.recent-articles{overflow-x:hidden}

/* Independent, centered navigation over the monochrome background. */
.centered-nav{position:absolute;z-index:5;top:28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:clamp(22px,3.2vw,48px);width:max-content;max-width:calc(100% - 32px);color:#fff;mix-blend-mode:difference;overflow-x:auto;scrollbar-width:thin;padding:8px 2px 12px}.centered-nav a{flex:0 0 auto;white-space:nowrap;color:inherit;font:400 14px/1.6 Arial,"PingFang SC",sans-serif;letter-spacing:.025em;text-decoration:none;text-underline-offset:8px}.centered-nav a:hover{text-decoration:underline}.centered-nav a:focus-visible{outline:1px solid currentColor;outline-offset:4px}.article-nav{top:110px}.recent-articles{margin-top:0}.activity{top:110px}
@media(max-width:900px){.profile{padding-top:400px}.recent-articles{max-height:240px}}
@media(max-width:540px){.centered-nav{top:22px;gap:16px;justify-content:flex-start}.centered-nav a{font-size:12px}.article-nav,.activity{top:94px}.profile{padding-top:390px}}

/* Move the first label clear of the diagonal on desktop. */
@media(min-width:901px){.centered-nav{overflow:visible}.centered-nav a:first-child{transform:translateX(-22px)}}

/* Compact recent updates panel; full bilingual titles remain on article pages. */
@media(min-width:901px){.article-nav{right:22px;width:min(430px,calc(40vw - 22px))}.recent-articles{padding:18px 20px;max-height:min(520px,56svh)}}
