:root{color-scheme:light;--accent-base:#0b57d0;--bg:#fff;--surface:#f6f7f9;--fg:#16181d;--muted:#5b616e;--line:#e4e7ec;--accent:var(--accent-base);--accent-soft:color-mix(in oklab, var(--accent-base) 10%, white);--on-accent:#fff;--fg-prose:#22252c;--card:#fff;--shadow-lift:0 1px 2px #1018280f, 0 10px 28px -8px #10182829;--photo-control-bg:#0f11158c;--photo-control-bg-hover:#0f1115bf;--photo-control-fg:#fff;--font-sans:"Geist", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;--font-mono:"Geist Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;--max:48rem;--page-max:1040px;--gutter:24px;--radius-lg:14px;--radius-md:10px;--radius-sm:8px;--tap-min:44px}html[data-theme=dark]{color-scheme:dark;--bg:#0f1115;--surface:#171a21;--fg:#e7e9ee;--muted:#9aa1ad;--line:#272b34;--accent:color-mix(in oklab, var(--accent-base) 55%, white);--accent-soft:color-mix(in oklab, var(--accent-base) 24%, #0f1115);--on-accent:#0f1115;--fg-prose:#cdd2da;--card:#1a1e26;--shadow-lift:inset 0 1px 0 #ffffff0d, 0 12px 32px -10px #000000b3}*,:before,:after{box-sizing:border-box}html{background:var(--bg);color:var(--fg)}body{font-family:var(--font-sans);margin:0;font-size:1.0625rem;line-height:1.65}.mono{font-family:var(--font-mono)}a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}a:hover{color:var(--fg)}.skip-link{background:var(--fg);color:var(--bg);z-index:10;padding:.4rem .7rem;position:absolute;top:-3rem;left:.75rem}.skip-link:focus{top:.75rem}.page-frame{max-width:var(--page-max);padding-inline:var(--gutter);margin-inline:auto}.site-header{border-bottom:1px solid var(--line)}@media (width>=46rem) and (height>=600px){html{scroll-padding-top:88px}.site-header{z-index:5;background:var(--bg);position:sticky;top:0}}.site-header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:14px;display:flex}.brand{color:var(--fg);align-items:baseline;gap:10px;text-decoration:none;display:flex}.brand-name{font-size:18px;font-weight:700}.brand-domain{color:var(--muted);font-size:13px}.site-nav{flex-wrap:wrap;gap:4px;display:flex}.site-nav a{padding:10px var(--nav-pad-x,14px);border-radius:var(--radius-sm);color:var(--muted);font-size:15px;text-decoration:none}.site-nav a:hover{color:var(--fg)}.site-nav a[aria-current=page]{color:var(--fg);background:var(--surface);font-weight:600}.header-tools{align-items:center;gap:10px;display:flex}.lang-switcher{color:var(--muted);align-items:center;gap:6px;font-size:13px;display:flex}.lang-switcher [aria-current=true]{color:var(--fg);font-weight:500}.lang-switcher a,.lang-switcher .is-disabled{padding:12px 2px}.lang-switcher a{color:var(--muted);text-decoration:none}.lang-switcher a:hover{color:var(--fg)}.lang-switcher .is-disabled{opacity:.55;cursor:not-allowed}.theme-toggle{width:var(--tap-min);height:var(--tap-min);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--fg);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0;display:inline-flex}.theme-toggle svg{display:block}html[data-theme=dark] .theme-toggle-moon,html:not([data-theme=dark]) .theme-toggle-sun,html:not([data-theme]) .theme-toggle{display:none}.lang-unavailable{color:var(--muted);margin:0 0 24px;font-size:13px}.site-main{max-width:calc(var(--max) + 2 * var(--gutter));padding:56px var(--gutter) 96px;margin-inline:auto}.site-main-wide{max-width:var(--page-max)}.main-post{padding-top:48px}.main-post .lang-unavailable{margin-bottom:40px}.main-404{padding-top:var(--main-404-pt,88px);padding-bottom:128px}.site-footer{border-top:1px solid var(--line)}.site-footer-inner{flex-wrap:wrap;gap:8px 24px;padding-block:24px 40px;font-size:14px;display:flex}.empty-state{color:var(--muted)}.page-title{letter-spacing:-.03em;margin:0;font-size:40px;line-height:1.2}.badge{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;align-items:center;padding:1px 9px;font-size:13px;font-weight:600;line-height:1.5;display:inline-flex}.badge-active{background:var(--accent-soft);color:var(--accent);border:0;padding:2px 10px}.badge-category{background:var(--accent-soft);color:var(--accent);font-family:var(--font-mono);border:0;padding:2px 10px;font-weight:500}.tag{border:1px solid var(--line);font-family:var(--font-mono);color:var(--muted);border-radius:6px;align-items:center;padding:2px 8px;font-size:12px;line-height:1.5;display:inline-flex}.tech-list{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.meta-text{font-family:var(--font-mono);color:var(--muted);font-size:13px}.meta-row{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.live-link{min-height:var(--tap-min);overflow-wrap:anywhere;min-width:0;font-family:var(--font-mono);align-items:center;gap:.35em;display:inline-flex}.back-link{border-top:1px solid var(--line);margin-top:64px;padding-top:24px}.back-link a{min-height:var(--tap-min);align-items:center;font-size:18px;font-weight:500;text-decoration:none;display:inline-flex}.media-fallback{background:var(--surface);width:100%;height:100%;color:var(--muted);text-align:center;justify-content:center;align-items:center;padding:16px;font-size:18px;font-weight:600;display:flex}.btn{min-height:var(--tap-min);border-radius:var(--radius-md);align-items:center;gap:8px;padding:0 18px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--accent);color:var(--on-accent)}.btn-primary:hover{color:var(--on-accent);filter:brightness(1.08)}.btn-ghost{border:1px solid var(--line);color:var(--fg)}.btn-note{font-family:var(--font-mono);opacity:.8;font-size:12px;font-weight:400}.entry-header{border-bottom:1px solid var(--line);flex-direction:column;gap:14px;margin-bottom:40px;padding-bottom:32px;display:flex}.entry-header h1{font-size:var(--entry-h1,36px);letter-spacing:-.02em;margin:0;line-height:1.3}.entry-description{color:var(--muted);margin:0;font-size:19px;line-height:1.6}.entry-header-project{gap:16px}.entry-header-project h1{font-size:var(--project-h1,40px);letter-spacing:-.025em;line-height:1.25}.entry-header-project .entry-description{line-height:1.7}.entry-links{flex-wrap:wrap;align-items:center;gap:4px 20px;font-size:14px;display:flex}.entry-links .live-note{color:var(--muted);font-size:13px}.entry-cover{border-radius:var(--radius-lg);margin-top:8px;overflow:hidden}.entry-cover img{width:100%;max-width:none;height:auto;display:block}.prose{color:var(--fg-prose);overflow-wrap:break-word;font-size:17px;line-height:1.9}.prose>*{margin:0}.prose>*+*{margin-top:1.1em}.prose a{text-underline-offset:.2em;text-decoration-thickness:1px}.prose strong{color:var(--fg);font-weight:650}.prose h2{letter-spacing:-.01em;color:var(--fg);margin-top:2.4em;font-size:24px;line-height:1.4}.prose h3{color:var(--fg);margin-top:2em;font-size:20px;line-height:1.45}.prose h2+*,.prose h3+*{margin-top:.6em}.prose ul,.prose ol{padding-left:1.4em}.prose li+li{margin-top:.35em}.prose li::marker{color:var(--muted)}.prose blockquote{margin-block:1.6em;border:1px solid var(--line);background:var(--card);box-shadow:8px 8px 0 -1px var(--surface), 8px 8px 0 0 var(--line);color:var(--muted);border-radius:12px;margin-right:8px;padding:20px 24px}.prose blockquote>*{margin:0}.prose blockquote>*+*{margin-top:.6em}.prose code{border:1px solid var(--line);background:var(--surface);color:var(--fg);font-family:var(--font-mono);border-radius:6px;padding:.12em .4em;font-size:.86em}.prose pre{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--fg);font-family:var(--font-mono);overflow-wrap:normal;tab-size:2;padding:14px 16px;font-size:14px;line-height:1.65;overflow-x:auto}.prose pre code{color:inherit;font-size:inherit;background:0 0;border:0;border-radius:0;padding:0}.prose .table-wrap{border:1px solid var(--line);border-radius:var(--radius-md);overflow-x:auto}.prose table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.7}.prose th{background:var(--surface);text-align:left;color:var(--fg);font-weight:600}.prose th,.prose td{border-bottom:1px solid var(--line);vertical-align:top;padding:10px 14px}.prose tr:last-child td{border-bottom:0}.prose td:first-child{white-space:nowrap;color:var(--fg);font-weight:500}.prose hr{background:var(--line);border:0;width:72px;height:1px;margin:3em auto}.prose p:has(>img,>video){margin-block:1.8em}.prose img{border-radius:var(--radius-sm);max-width:100%;height:auto;display:block}.prose video{background:var(--surface);border-radius:var(--radius-sm);width:100%;max-width:100%;height:auto;display:block}.prose .img-layout{--img-total:100%;flex-direction:column;align-items:center;gap:.75rem;display:flex}.prose .img-narrow-1{--img-total:75%}.prose .img-narrow-2{--img-total:60%}.prose .img-narrow-3{--img-total:45%}.prose .img-narrow-4{--img-total:30%}.prose .img-row-2{--img-count:2}.prose .img-row-3{--img-count:3}.prose .img-row-4{--img-count:4}@media (width>=36rem){.prose .img-layout{flex-direction:row;justify-content:center;align-items:flex-start;gap:1rem}.prose .img-layout img,.prose .img-layout video{width:var(--img-total);min-width:0}.prose .img-row img,.prose .img-row video{width:calc((var(--img-total) - (var(--img-count) - 1) * 1rem) / var(--img-count))}}.list-intro{color:var(--muted);margin:8px 0 48px;font-size:18px}.post-list{flex-direction:column;gap:64px;margin:0;padding:0;list-style:none;display:flex}.post-card{flex-direction:column;gap:16px;display:flex}.post-cover{aspect-ratio:var(--post-cover-ar,21 / 9);border-radius:var(--radius-lg);background:var(--surface);text-decoration:none;display:block;overflow:hidden}.post-cover img{object-fit:cover;width:100%;max-width:none;height:100%;max-height:none;display:block}.post-card-body{flex-wrap:wrap;align-items:flex-start;gap:12px 48px;display:flex}.post-card-head{flex-direction:column;flex:480px;gap:10px;min-width:0;display:flex}.post-card-head h2{letter-spacing:-.015em;margin:0;font-size:28px;line-height:1.35}.post-card-head h2 a,.project-row-head h2 a{color:var(--fg);text-decoration:none}.post-card-head h2 a:hover,.project-row-head h2 a:hover{color:var(--accent)}.post-card-description{min-width:0;padding-top:var(--post-desc-pt,30px);color:var(--muted);flex:320px;margin:0;font-size:17px}.list-title-row{align-items:baseline;gap:14px;margin-bottom:40px;display:flex}.list-count{font-family:var(--font-mono);color:var(--muted);font-size:14px}.project-list{margin:0;padding:0;list-style:none}.project-row{padding:var(--project-row-pad,48px) 0;border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:28px 48px;display:flex}.project-thumb{aspect-ratio:16/9;border-radius:var(--radius-lg);background:var(--surface);flex:380px;max-width:460px;text-decoration:none;overflow:hidden}.project-thumb img{object-fit:cover;width:100%;max-width:none;height:100%;max-height:none;display:block}.project-row-body{flex-direction:column;flex:420px;gap:14px;min-width:0;display:flex}.project-row-head{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.project-row-head h2{font-size:var(--project-row-h2,26px);letter-spacing:-.015em;margin:0;line-height:1.3}.project-row-description{color:var(--fg-prose);margin:0;font-size:17px}.project-row-links{flex-wrap:wrap;align-items:center;gap:4px 20px;font-size:15px;display:flex}.project-row-links .read-more{min-height:var(--tap-min);align-items:center;gap:.35em;font-weight:500;text-decoration:none;display:inline-flex}.project-row-links .live-link,.project-row-links .live-note{color:var(--muted);font-size:13px}.project-row-links .meta-text{margin-left:auto}.not-found-label{font-family:var(--font-mono);letter-spacing:.08em;color:var(--accent);margin:0 0 16px;font-size:13px}.not-found-body{color:var(--muted);margin:12px 0 4px;font-size:18px}.not-found-body-en{font-family:var(--font-mono);color:var(--muted);margin:0 0 48px;font-size:14px}.not-found-nav{border-top:1px solid var(--line)}.not-found-nav a{border-bottom:1px solid var(--line);min-height:56px;color:var(--fg);justify-content:space-between;align-items:center;font-size:17px;text-decoration:none;display:flex}.not-found-nav a:hover{color:var(--accent)}.not-found-nav .arrow{color:var(--muted)}.resume-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 24px;margin-bottom:32px;display:flex}.resume-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.resume-preview{border-radius:4px;display:block}.resume-preview img{border-radius:4px;width:100%;max-width:none;height:auto;display:block}html[data-theme=dark] .resume-preview{outline:1px solid var(--line);box-shadow:0 12px 32px -12px #000000b3}.main-home{padding-top:var(--hero-pt,72px);padding-bottom:0}.hero{display:var(--hero-display,flex);align-items:var(--hero-align,center);gap:var(--hero-gap,40px 56px);flex-wrap:wrap;margin-bottom:56px}.hero-text{min-width:0;display:var(--hero-text-display,flex);flex-direction:column;flex:999 520px;gap:20px}.hero-label{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0;font-size:13px}.hero-name{font-size:var(--h1-size,56px);letter-spacing:-.03em;margin:0;font-weight:700;line-height:1.1}.hero-name-alt{color:var(--muted);font-weight:500}.hero-intro{max-width:34em;font-size:var(--intro-size,20px);margin:0;line-height:1.7}.hero-now{border-top:1px solid var(--line);flex-direction:column;gap:6px;max-width:34em;margin-top:4px;padding-top:16px;display:flex}.hero-now p{margin:0}.hero-now-label{letter-spacing:.08em;color:var(--muted);font-size:12px}.hero-now-text{font-size:17px}.hero-photo{--kb-hold:6s;--kb-scale:1.12;aspect-ratio:4/5;isolation:isolate;border-radius:var(--radius-lg);background:var(--surface);flex:280px;width:100%;max-width:340px;position:relative;overflow:hidden}.kb-frame{object-fit:cover;object-position:var(--focus,50% 50%);width:100%;max-width:none;height:100%;max-height:none;transform-origin:var(--focus,50% 50%);opacity:0;animation-name:var(--kb-name);animation-duration:calc(var(--kb-hold) * var(--kb-count));animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:calc(var(--kb-hold) * (var(--i) - .2));position:absolute;inset:0}@keyframes kb-3{0%{opacity:0;z-index:2;transform:scale(1)}6.667%{opacity:1;z-index:2}33.333%{z-index:2}33.343%{z-index:1}40%{opacity:1;z-index:1;transform:scale(var(--kb-scale))}40.01%{opacity:0;z-index:1;transform:scale(1)}to{opacity:0;z-index:1;transform:scale(1)}}@keyframes kb-4{0%{opacity:0;z-index:2;transform:scale(1)}5%{opacity:1;z-index:2}25%{z-index:2}25.01%{z-index:1}30%{opacity:1;z-index:1;transform:scale(var(--kb-scale))}30.01%{opacity:0;z-index:1;transform:scale(1)}to{opacity:0;z-index:1;transform:scale(1)}}@keyframes kb-5{0%{opacity:0;z-index:2;transform:scale(1)}4%{opacity:1;z-index:2}20%{z-index:2}20.01%{z-index:1}24%{opacity:1;z-index:1;transform:scale(var(--kb-scale))}24.01%{opacity:0;z-index:1;transform:scale(1)}to{opacity:0;z-index:1;transform:scale(1)}}@keyframes kb-6{0%{opacity:0;z-index:2;transform:scale(1)}3.333%{opacity:1;z-index:2}16.667%{z-index:2}16.677%{z-index:1}20%{opacity:1;z-index:1;transform:scale(var(--kb-scale))}20.01%{opacity:0;z-index:1;transform:scale(1)}to{opacity:0;z-index:1;transform:scale(1)}}.kb-pause{right:var(--kb-pause-inset,6px);bottom:var(--kb-pause-inset,6px);z-index:3;width:var(--tap-min);height:var(--tap-min);cursor:pointer;justify-content:center;align-items:center;display:flex;position:absolute}.kb-pause input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.kb-pause span{width:var(--kb-pause-size,30px);height:var(--kb-pause-size,30px);background:var(--photo-control-bg);color:var(--photo-control-fg);pointer-events:none;border-radius:999px;justify-content:center;align-items:center;display:flex}.kb-pause svg{width:var(--kb-pause-icon,14px);height:var(--kb-pause-icon,14px)}.kb-pause:hover span{background:var(--photo-control-bg-hover)}.kb-pause:has(input:focus-visible) span{outline:2px solid var(--accent);outline-offset:2px}.kb-pause .ic-play,.kb-pause:has(input:checked) .ic-pause{display:none}.kb-pause:has(input:checked) .ic-play{display:block}.hero-photo:has(.kb-pause input:checked) .kb-frame{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.kb-frame{animation:none}.kb-frame:first-child{opacity:1}.kb-pause{display:none}}.home-section{margin-bottom:72px}.rail-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-bottom:20px;display:flex}.rail-title{align-items:baseline;gap:12px;display:flex}.rail-title h2{letter-spacing:-.01em;margin:0;font-size:22px}.rail-title .list-count{font-size:13px}.rail-tools{align-items:center;gap:8px;display:flex}.rail-all{padding:10px 8px;font-size:15px}.rail-btn{width:var(--tap-min);height:var(--tap-min);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--fg);display:var(--rail-btn,inline-flex);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0}.rail-btn:hover{background:var(--surface)}.rail{scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent;gap:20px;margin:0;padding:0 0 16px;list-style:none;display:flex;overflow-x:auto}@media (hover:hover) and (pointer:fine){.rail>li{cursor:var(--rail-cursor,grab)}.rail[data-dragging],.rail[data-dragging] *{cursor:grabbing}}.rail[data-dragging]{-webkit-user-select:none;user-select:none}.rail h3{letter-spacing:-.01em;margin:0}.rail h3 a{color:var(--fg);text-decoration:none}.rail h3 a:hover{color:var(--accent)}.card-desc{color:var(--muted);margin:0}.thumb-p img,.thumb-b img{object-fit:cover;width:100%;max-width:none;height:100%;max-height:none;display:block}.rail .media-fallback{padding:var(--rail-fallback-pad,16px);font-size:var(--rail-fallback-size,18px)}.card-p{flex:var(--card-flex,0 0 min(400px, 85%));scroll-snap-align:start;flex-direction:var(--card-dir,column);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;overflow:hidden}.thumb-p{aspect-ratio:16/9;background:var(--surface);border-bottom:var(--thumb-bb,1px solid var(--line));border-right:var(--thumb-br,0);display:block}.card-body{gap:var(--card-gap,10px);min-width:0;padding:var(--card-pad,20px 22px 24px);flex-direction:column;flex-grow:1;display:flex}.card-head{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.card-p h3{font-size:var(--card-title,21px)}.card-tags{display:var(--tags-display,flex);margin-top:auto}.card-b{flex:var(--card-flex,0 0 min(400px, 85%));scroll-snap-align:start;display:var(--card-display,flex);gap:var(--card-gap-b,12px);flex-direction:column}.thumb-b{aspect-ratio:3/2;border-radius:var(--radius-lg);background:var(--surface);display:block;overflow:hidden}.card-b h3{font-size:var(--card-title-b,20px);line-height:1.4}@media (width<=46rem){.site-nav{flex-basis:100%;order:3}:root{--nav-pad-x:10px;--entry-h1:30px;--project-h1:32px;--post-cover-ar:16 / 9;--post-desc-pt:0;--project-row-pad:32px;--project-row-h2:22px;--main-404-pt:56px;--h1-size:40px;--hero-pt:48px;--intro-size:18px;--hero-display:grid;--hero-gap:16px 20px;--hero-align:start;--hero-text-display:contents;--rail-btn:none;--card-flex:0 0 auto;--card-dir:row;--thumb-bb:0;--thumb-br:1px solid var(--line);--card-pad:12px 14px;--card-gap:6px;--card-title:17px;--tags-display:none;--card-display:grid;--card-gap-b:4px 12px;--card-title-b:17px;--rail-fallback-pad:8px;--rail-fallback-size:13px;--rail-cursor:auto;--kb-pause-inset:0px;--kb-pause-size:24px;--kb-pause-icon:12px}.hero{grid-template-columns:minmax(0,1fr) 120px;grid-template-areas:"label label""name name""intro intro""now photo"}.hero-without-now{grid-template-rows:auto 1fr auto;grid-template-areas:"label photo""name photo""intro intro"}.hero-label{grid-area:label}.hero-name{grid-area:name}.hero-intro{grid-area:intro}.hero-now{grid-area:now}.hero-photo{grid-area:photo;align-self:start}.rail{flex-direction:column}.thumb-p{flex:0 0 96px}.card-b{grid-template-columns:96px minmax(0,1fr)}.thumb-b{grid-row:1/4;align-self:start}.card-desc{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}