:root{--bg:#f7f7f7;--bg-2:#f1f3f5;--card:#fff;--chip:#eef2f6;--tint:#e7eef5;--line:#dfe4ea;--ink:#174876;--ink-press:#123a5f;--ink-2:#457eab;--t1:#16202a;--t2:#45525e;--t3:#5e6b78;--display:"Outfit","Noto Sans TC",system-ui,sans-serif;--sans:"Noto Sans TC","Outfit",system-ui,sans-serif;--wordmark:"Noto Serif TC",Georgia,serif;--r-pill:999px;--r-card:24px;--r-media:18px;--r-chip:12px;--sh-nav:0 1px 2px #1748760d, 0 8px 28px #17487617;--sh-card:0 1px 2px #1748760a, 0 6px 22px #1748760f;--sh-card-h:0 2px 4px #1748760d, 0 14px 36px #1748761f;--maxw:1180px;--fs-display:clamp(2.5rem,5.6vw,4.35rem);--fs-h2:27px;--fs-h3:20px;--fs-lead:17.5px;--fs-body:15.5px;--fs-meta:13px;--space-2xs:4px;--space-xs:8px;--space-sm:16px;--space-md:24px;--space-lg:32px;--space-xl:48px;--space-2xl:64px;--space-3xl:96px;--space-card:18px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:112px}body{background:linear-gradient(180deg,#fbfbfc 0%,var(--bg) 340px,var(--bg-2) 100%);color:var(--t1);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;background-attachment:fixed;font-weight:400}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}.wrap{max-width:var(--maxw);padding:0 var(--space-lg);margin:0 auto}.navbar{z-index:30;padding:0 var(--space-lg);margin-bottom:var(--space-xs);position:sticky;top:18px}.nav{max-width:var(--maxw);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-nav);height:66px;padding:0 var(--space-sm) 0 var(--space-lg);align-items:center;gap:var(--space-md);margin:0 auto;display:flex}.wordmark{font-family:var(--wordmark);letter-spacing:.01em;white-space:nowrap;font-size:19px}.nav ul{gap:var(--space-xs);margin:0 auto;list-style:none;display:flex}.nav ul a{font-family:var(--display);font-size:var(--fs-body);color:var(--t2);padding:var(--space-xs) var(--space-sm);border-radius:var(--r-pill);font-weight:500;transition:background .15s ease-out,color .15s ease-out;display:block}.nav ul a[aria-current]{color:var(--ink);background:var(--tint)}.btn{align-items:center;gap:var(--space-xs);font-family:var(--display);border-radius:var(--r-pill);font-weight:500;transition:background .15s ease-out,color .15s ease-out,box-shadow .2s ease-out,transform .2s ease-out;display:inline-flex}.btn-ghost{font-size:var(--fs-body);padding:var(--space-xs) var(--space-md);border:1px solid var(--line);color:var(--t1);background:var(--card)}.btn-solid{font-size:var(--fs-body);padding:var(--space-sm) var(--space-md);background:var(--ink);color:#fff;box-shadow:var(--sh-card)}.btn svg{width:15px;height:15px;transition:transform .2s cubic-bezier(.2,.7,.3,1)}.lang{font-family:var(--display);font-size:var(--fs-meta);color:var(--t3);letter-spacing:.03em;padding-left:var(--space-2xs)}.lang .on{color:var(--t1)}.lang .off{opacity:.45;cursor:default}.hero{padding:var(--space-2xl) 0 var(--space-3xl)}.hero-grid{gap:var(--space-2xl);grid-template-columns:1fr 380px;align-items:center;display:grid}h1{font-family:var(--display);font-weight:700;font-size:var(--fs-display);letter-spacing:-.038em;text-wrap:balance;line-height:1.04}.hero p{margin-top:var(--space-lg);max-width:33em;font-size:var(--fs-lead);color:var(--t2);line-height:2}.hero p+p{margin-top:var(--space-sm)}.hero-cta{margin-top:var(--space-xl);align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.avatar{aspect-ratio:1;background:var(--chip);width:100%;box-shadow:var(--sh-card);border:6px solid var(--card);border-radius:50%;justify-self:end;animation:.7s cubic-bezier(.2,.8,.2,1.15) both avatar-circle-in;position:relative;overflow:hidden}.avatar:before{content:"";transform-origin:55% 90%;background:url(/assets/hi.png?v=20260913-3) bottom/92% no-repeat;animation:.6s ease-out .3s both avatar-person-in,2.4s ease-in-out .95s infinite avatar-friendly-wave;position:absolute;inset:0}@keyframes avatar-circle-in{0%{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes avatar-person-in{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes avatar-friendly-wave{0%,to{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}p{max-width:56em}.sec{padding:0 0 var(--space-3xl)}.sec-head{align-items:baseline;gap:var(--space-sm);margin-bottom:var(--space-md);padding:0 6px;display:flex}.sec-head h2{font-family:var(--display);font-size:var(--fs-h2);letter-spacing:-.02em;font-weight:600;line-height:1.3}.sec-head .note{font-family:var(--display);font-size:var(--fs-meta);color:var(--t3);margin-left:auto}.filters{gap:var(--space-2xs);flex-wrap:wrap;margin-left:auto;display:flex}.filters button{font-family:var(--display);font-size:var(--fs-body);color:var(--t2);padding:var(--space-xs) var(--space-sm);border-radius:var(--r-pill);cursor:pointer;background:0 0;border:1px solid #0000;font-weight:500;transition:background .15s ease-out,color .15s ease-out}.filters button[aria-pressed=true]{color:var(--ink);background:var(--tint)}.work .card[hidden]{display:none}.sec-head .filters+.note{margin-left:0}.work{gap:var(--space-card);display:grid}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:var(--space-md);transition:box-shadow .22s ease-out,transform .22s ease-out;display:block}.idx{border-radius:var(--r-chip);background:var(--chip);min-width:44px;height:26px;color:var(--t3);white-space:nowrap;font-family:var(--display);font-size:var(--fs-meta);letter-spacing:.06em;justify-content:center;align-items:center;padding:0 10px;font-weight:600;transition:background .2s ease-out,color .2s ease-out;display:inline-flex}.card h3{font-family:var(--display);letter-spacing:-.02em;font-weight:600;line-height:1.25}.card .sub{color:var(--t2);line-height:1.6}.card .meta{margin-top:var(--space-sm);font-family:var(--display);font-size:var(--fs-meta);color:var(--t3)}.card .award{margin-top:var(--space-sm);font-family:var(--display);font-size:var(--fs-meta);color:var(--ink);background:var(--tint);padding:var(--space-xs) var(--space-sm);border-radius:var(--r-pill);align-items:center;gap:6px;font-weight:500;display:inline-flex}.card .award svg{flex:none;width:14px;height:14px}.media{border-radius:var(--r-media);background:repeating-linear-gradient(-45deg,#457eab29 0 1px,transparent 1px 12px), var(--chip);overflow:hidden}.media img{width:100%;height:auto;transition:transform .32s cubic-bezier(.2,.7,.3,1);display:block}.card.row{gap:var(--space-xl);min-height:360px;padding:var(--space-lg);grid-template-columns:1fr 520px;align-items:center;display:grid}.card.row .body{padding:var(--space-md) 0 var(--space-md) var(--space-sm)}.card.row .media{align-self:center}.card.row .media.empty{aspect-ratio:16/9}.card.row h3{font-size:var(--fs-h3);margin-top:var(--space-sm)}.card.row .sub{margin-top:var(--space-xs);font-size:var(--fs-body)}@media (hover:hover) and (pointer:fine){.card:hover{box-shadow:var(--sh-card-h);transform:translateY(-2px)}.card:hover .idx{background:var(--ink);color:#fff}.card:hover .media img{transform:scale(1.03)}.nav ul a:hover,.filters button:hover:not([aria-pressed=true]){background:var(--chip);color:var(--t1)}.btn-ghost:hover{background:var(--chip)}.btn-solid:hover{background:var(--ink-press);box-shadow:var(--sh-card-h);transform:translateY(-1px)}.btn:hover svg{transform:translate(3px)}.more:hover{background:var(--card);box-shadow:var(--sh-card)}}.btn:active{transform:scale(.985)}.btn-solid:active{background:var(--ink-press)}.more{margin-top:var(--space-xs);justify-self:start;align-items:center;gap:var(--space-xs);font-family:var(--display);font-size:var(--fs-body);color:var(--t1);padding:var(--space-sm) var(--space-md);border-radius:var(--r-pill);border:1px solid var(--line);font-weight:500;transition:background .18s ease-out,box-shadow .18s ease-out;display:inline-flex}footer{padding:0 0 var(--space-2xl)}.foot{background:var(--card);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:var(--space-lg);gap:var(--space-lg);grid-template-columns:2fr 1fr 1fr;align-items:start;display:grid}.foot .lbl{font-family:var(--display);font-size:var(--fs-meta);color:var(--t3);margin-bottom:var(--space-xs);display:block}.foot .big{font-family:var(--display);font-size:var(--fs-h3);letter-spacing:-.02em;font-weight:600}.foot a{color:var(--t2);line-height:2.1;font-size:var(--fs-body)}.foot a:hover{color:var(--t1)}@media (width<=900px){.wrap,.navbar{padding-left:18px;padding-right:18px}.nav{height:60px;padding:0 var(--space-xs) 0 var(--space-md);gap:var(--space-sm)}.nav ul{display:none}.hero{padding:var(--space-xl) 0 var(--space-2xl)}.hero-grid{gap:var(--space-lg);text-align:center;grid-template-columns:1fr;justify-items:center}.avatar{order:-1;justify-self:center;width:200px}.hero p{margin-left:auto;margin-right:auto}.hero-cta{justify-content:center}.sec-head{flex-wrap:wrap}.filters{order:1;width:100%;margin-left:0}.card.row{gap:var(--space-md);min-height:0;padding:var(--space-md);grid-template-columns:1fr}.card.row .media{order:-1;height:auto;min-height:0}.card.row .media.empty{aspect-ratio:16/9}.card.row .body{padding:0 var(--space-xs) var(--space-xs)}.foot{padding:var(--space-md);grid-template-columns:1fr}.sec{padding-bottom:var(--space-2xl)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}