@import "https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Patrick+Hand&family=ZCOOL+KuaiLe&family=Ma+Shan+Zheng&display=swap";
:root{--paper:#fdfbf7;--paper-2:#fff;--pencil:#2d2d2d;--pencil-soft:#44423e;--erased:#e5e0d8;--muted-ink:#8c887e;--marker-orange:#d5642e;--marker-red:#ff4d4d;--ballpoint:#2d5da1;--postit:#fff9c4;--highlighter:#ffe9a8;--bg:var(--paper);--surface:var(--paper-2);--surface-alt:var(--erased);--fg:var(--pencil);--fg-soft:var(--pencil-soft);--muted:var(--muted-ink);--border:var(--pencil);--hover:#2d2d2d0d;--accent:var(--marker-orange);--accent-soft:#d5642e24;--accent-2:var(--ballpoint);--on-accent:#fff;--hl:var(--highlighter);--note:var(--postit);--dot:var(--erased);--font-display:"Kalam","Ma Shan Zheng","ZCOOL KuaiLe","Comic Sans MS",cursive;--font-body:"Patrick Hand","ZCOOL KuaiLe","Comic Sans MS",cursive;--fw-body:400;--fw-bold:700;--text-xs:.8125rem;--text-sm:.9375rem;--text-base:1.125rem;--text-lg:1.3125rem;--text-xl:1.625rem;--text-2xl:2rem;--text-3xl:2.75rem;--text-4xl:clamp(2.75rem,5vw,4rem);--text-5xl:clamp(3.25rem,7vw,5.25rem);--leading-tight:1.05;--leading-snug:1.25;--leading-body:1.7;--tracking-tight:-.01em;--tracking-wide:.04em;--wobbly:255px 15px 225px 15px/15px 225px 15px 255px;--wobbly-md:22px 8px 26px 10px/12px 24px 10px 22px;--wobbly-sm:14px 6px 16px 8px/8px 15px 7px 14px;--wobbly-circle:50% 48% 52% 47%/47% 52% 48% 53%;--bw-1:2px;--bw-2:2.5px;--bw-3:3px;--bw-4:4px;--shadow-sm:3px 3px 0 0 var(--border);--shadow:5px 5px 0 0 var(--border);--shadow-lg:8px 8px 0 0 var(--border);--shadow-lift:9px 9px 0 0 var(--border);--shadow-press:2px 2px 0 0 var(--border);--shadow-soft:3px 3px 0 0 #2d2d2d1a;--shadow-accent:5px 5px 0 0 var(--accent);--paper-grain:radial-gradient(var(--dot)1.4px,transparent 1.4px);--paper-grain-size:24px 24px;--tilt-sm:-1deg;--tilt:-2deg;--tilt-pos:2deg;--ease-snap:cubic-bezier(.34,1.56,.64,1);--dur-fast:.1s;--dur:.16s;--max-w:75rem;--max-w-prose:48rem;--max-w-wide:75rem;--gap:2rem;--gap-sm:1.25rem}[data-theme=dark]{--bg:#211f1a;--surface:#2a2823;--surface-alt:#35322b;--fg:#f2ece0;--fg-soft:#d8d2c5;--muted:#908b7e;--border:#f2ece0;--hover:#f2ece012;--accent:#e8763e;--accent-soft:#e8763e2e;--accent-2:#6ca0e0;--on-accent:#211f1a;--hl:#c9a227;--note:#4a4524;--dot:#35322b}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);background-image:var(--paper-grain);background-size:var(--paper-grain-size);color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background .35s}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}::selection{background:var(--accent);color:var(--on-accent)}.wrap{max-width:var(--max-w);margin:0 auto;padding:0 28px}.topbar{justify-content:space-between;align-items:center;padding:22px 0 0;display:flex}.brand{font-family:var(--font-display);font-size:28px;font-weight:700}.brand .dot{color:var(--accent)}.nav{align-items:center;gap:8px;display:flex}.nav a{padding:6px 10px;font-size:18px;position:relative}.nav a:after{content:"";background:var(--hl);z-index:-1;opacity:0;height:6px;transition:opacity .12s,transform .12s;position:absolute;bottom:2px;left:8px;right:8px;transform:scaleX(.5)}.nav a:hover:after{opacity:1;transform:scaleX(1)}.icon-btn{background:var(--surface);border:var(--bw-2)solid var(--border);border-radius:var(--wobbly-sm);width:42px;height:42px;box-shadow:var(--shadow-sm);color:var(--fg);cursor:pointer;place-items:center;transition:transform .1s,box-shadow .1s;display:grid}.icon-btn:hover{box-shadow:1px 1px 0 0 var(--border);transform:translate(2px,2px)rotate(-4deg)}.icon-btn svg{width:19px;height:19px}.hero{padding:84px 0 60px}.hero-inner{align-items:center;gap:88px;display:flex}.hero-text{flex:1;min-width:0}.headline{font-family:var(--font-display);font-weight:700;font-size:var(--text-5xl);line-height:var(--leading-tight);margin:18px 0 0}.headline .name{color:var(--accent);display:inline-block;transform:rotate(-2deg)}.bio{font-size:var(--text-lg);line-height:var(--leading-body);max-width:30em;margin:26px 0 0}.bio .hl{background:linear-gradient(transparent 55%,var(--hl)55%,var(--hl)92%,transparent 92%);padding:0 3px}.bio a{color:var(--accent);border-bottom:2px dashed var(--accent)}.socials{gap:10px;margin-top:30px;display:flex}.cta-row{align-items:center;gap:6px;margin-top:34px;display:flex}.cta-deco{color:var(--accent)}.avatar-wrap{flex-shrink:0}@media (max-width:860px){.cta-deco{display:none}}.projects{padding:60px 0 40px}.sec-head{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:40px;display:flex}.sec-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-3xl);margin:0}.sec-sub{color:var(--muted);font-size:var(--text-lg);margin:0}.grid{gap:var(--gap);grid-template-columns:repeat(3,1fr);display:grid}@media (max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.grid{grid-template-columns:1fr}}.foot{border-top:2px dashed var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:40px;padding:28px 0 50px;display:flex}.foot span{color:var(--muted);font-size:var(--text-sm)}@media (max-width:860px){.hero-inner{text-align:center;flex-direction:column-reverse;align-items:center;gap:40px}.socials,.cta-row{justify-content:center}.bio{margin-left:auto;margin-right:auto}}@keyframes hd-fade{to{opacity:1}}@keyframes hd-rise{to{opacity:1;transform:none}}.hero-text>*{opacity:0;animation:.5s both hd-fade}.hero-text>:first-child{animation-delay:50ms}.hero-text>:nth-child(2){animation-delay:.13s}.hero-text>:nth-child(3){animation-delay:.21s}.hero-text>:nth-child(4){animation-delay:.29s}.hero-text>:nth-child(5){animation-delay:.37s}.avatar-wrap{opacity:0;animation:hd-rise .55s var(--ease-snap).1s both;transform:translateY(16px)}@media (prefers-reduced-motion:reduce){.hero-text>*,.avatar-wrap{opacity:1;animation:none;transform:none}}