:root{--paper: #fbfbf9;--paper-2: #eef0f3;--ink: #101722;--muted: #3e4754;--rule: #d7dbe1;--accent: #2445c2;--accent-soft: #e3e9fb;--marigold: #f2b230;--display: "Bricolage Grotesque", "IBM Plex Sans Thai", system-ui, sans-serif;--body: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--gutter: clamp(16px, 4vw, 56px);--max: 1240px;--radius-s: 6px;--radius-l: 14px;color-scheme:light}:root[data-theme=dark]{--paper: #121620;--paper-2: #1b2130;--ink: #f3f5f8;--muted: #c0c7d2;--rule: #2f3747;--accent: #93abff;--accent-soft: #1f2a4a;--marigold: #f5bd45;color-scheme:dark}@media(prefers-color-scheme:dark){:root:not([data-theme]){--paper: #121620;--paper-2: #1b2130;--ink: #f3f5f8;--muted: #c0c7d2;--rule: #2f3747;--accent: #93abff;--accent-soft: #1f2a4a;--marigold: #f5bd45;color-scheme:dark}}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}:root:lang(th){--display: "IBM Plex Sans Thai", "Bricolage Grotesque", system-ui, sans-serif;--body: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif}@view-transition{navigation:auto}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.7 var(--body);font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}:lang(th) body{line-height:1.85}img,video,svg{display:block;max-width:100%}a{color:inherit}button{font:inherit;color:inherit}p{margin:0}ul,ol{margin:0;padding:0;list-style:none}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}::selection{background:var(--marigold);color:#16191f}.skip{position:fixed;left:16px;top:16px;z-index:50;transform:translateY(calc(-100% - 24px));padding:10px 14px;background:var(--ink);color:var(--paper);border-radius:var(--radius-s);text-decoration:none}.skip:focus-visible{transform:none}.h2{margin:0;font:650 clamp(2rem,1.3rem + 2.6vw,3.5rem)/1.04 var(--display);font-variation-settings:"wdth" 100,"opsz" 72;letter-spacing:-.015em;text-wrap:balance}:lang(th) .h2{font-weight:600;line-height:1.25;letter-spacing:0}.section-head{display:grid;gap:14px;max-width:46ch;margin-bottom:clamp(40px,6vw,72px)}.section-head p{color:var(--muted);font-size:1.1875rem}.section-head-row{max-width:none;grid-template-columns:1fr auto;align-items:end;gap:24px}.section-head-row>div{display:grid;gap:14px;max-width:46ch}.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom / 100% 1px no-repeat;padding-bottom:2px;transition:background-size .22s var(--ease-out),color .16s ease}@media(hover:hover)and (pointer:fine){.text-link:hover{color:var(--accent);background-size:40% 1px}}.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:16px var(--gutter);background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid transparent;transition:border-color .2s ease}.site-header[data-scrolled]{border-bottom-color:var(--rule)}.mark{view-transition-name:mark;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 .875rem/1 var(--display);letter-spacing:.02em;text-decoration:none}.site-nav{display:flex;gap:4px;margin-left:auto}.site-nav a{position:relative;padding:8px 12px;border-radius:999px;font-size:1rem;font-weight:500;text-decoration:none;color:var(--ink);transition:color .16s ease,background-color .16s ease}.site-nav a[aria-current=page]{color:var(--ink);background:var(--paper-2)}@media(hover:hover)and (pointer:fine){.site-nav a:hover{color:var(--ink)}}.lang{min-width:56px;height:40px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:transparent;font-weight:600;font-size:.9375rem;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,transform .12s var(--ease-out)}.lang:active{transform:scale(.96)}@media(hover:hover)and (pointer:fine){.lang:hover{border-color:var(--ink)}}.lang span{display:inline-block}.theme{display:grid;place-items:center;width:40px;height:40px;margin-left:4px;border:1px solid var(--rule);border-radius:50%;background:transparent;cursor:pointer;transition:border-color .16s ease,transform .12s var(--ease-out)}.theme:active{transform:scale(.94)}@media(hover:hover)and (pointer:fine){.theme:hover{border-color:var(--ink)}}.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.theme .i-moon{fill:currentColor;stroke:none}.theme .i-sun{display:none}[data-theme=dark] .theme .i-sun{display:block}[data-theme=dark] .theme .i-moon{display:none}@media(max-width:720px){.site-nav a:not([href*=projects]):not([href="/"]){display:none}.site-header{gap:12px}}.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;transition:transform .14s var(--ease-out),background-color .16s ease,color .16s ease,border-color .16s ease}.btn:active{transform:scale(.97)}.btn-solid{background:var(--ink);color:var(--paper)}.btn-line{border:1px solid var(--rule)}@media(hover:hover)and (pointer:fine){.btn-solid:hover{background:var(--accent)}.btn-line:hover{border-color:var(--ink)}}main>section{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;min-height:calc(100svh - 72px);padding-block:clamp(32px,6vw,72px) clamp(56px,8vw,96px)}.hero-hello{color:var(--muted);font-size:1.125rem;margin-bottom:8px}.hero-name{margin:0 0 28px;font:600 clamp(2.75rem,1rem + 5.2vw,5.75rem)/1.02 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.025em}.name-line{display:block;white-space:nowrap}.name-line:nth-child(2){color:var(--accent)}.char{display:inline-block;will-change:transform}.hero-lede{max-width:40ch;font-size:clamp(1.125rem,1rem + .35vw,1.3125rem);line-height:1.55;text-wrap:pretty}:lang(th) .hero-lede{line-height:1.8}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.hero-facts{margin-top:28px;max-width:60ch;border-top:1px solid var(--rule)}.hero-facts li{border-bottom:1px solid var(--rule)}.hero-facts a{display:grid;gap:2px;padding:12px 4px;text-decoration:none;font-size:1rem;line-height:1.5;transition:background-color .16s ease}.fact-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 16px}.hero-facts b{font-weight:600;color:var(--accent)}.hero-facts small{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}.hero-facts span{color:var(--muted);text-wrap:pretty}@media(hover:hover)and (pointer:fine){.hero-facts a:hover{background:var(--paper-2)}.hero-facts a:hover span{color:var(--ink)}}.tree{position:relative;margin:0;aspect-ratio:1 / 1.02;width:100%;max-width:540px;justify-self:end;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 0) 0 0 / 22px 22px;border-radius:var(--radius-l)}.tree-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.tree-edges path{fill:none;stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:2;transition:stroke .2s ease,stroke-width .2s ease}.tree-edges path.is-hot{stroke:var(--accent);stroke-width:3}.tree-edges circle{fill:var(--accent)}.tree-node{position:absolute;transform:translate(-50%,-50%);display:grid;gap:2px;text-align:left;padding:12px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 1px 0 var(--rule),0 10px 24px -14px color-mix(in srgb,var(--ink) 35%,transparent)}.tree-root{left:50%;top:14%;display:flex;align-items:center;gap:12px;padding:14px 20px 14px 14px;background:var(--ink);color:var(--paper);border-color:var(--ink);font:650 1.0625rem/1.2 var(--display);white-space:nowrap}.tree-fx{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--marigold);color:#16191f;font-style:italic;font-weight:700}.tree-driver{width:max-content;max-width:37%;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .2s var(--ease-out)}.tree-driver:active{transform:translate(-50%,-50%) scale(.97)}.tree-driver[data-node=eng]{left:19%;top:47%}.tree-driver[data-node=product]{left:81%;top:47%}.tree-driver[data-node=analytics]{left:30%;top:79%}.tree-driver[data-node=ds]{left:70%;top:79%}.tree-driver.is-hot{border-color:var(--accent);background:var(--accent-soft)}.tree-label{font:650 1.0625rem/1.2 var(--display)}.tree-detail{font-size:.875rem;color:var(--muted);line-height:1.4}@media(max-width:960px){.hero{grid-template-columns:1fr;min-height:0}.tree{justify-self:center;max-width:520px}}@media(max-width:480px){.tree{aspect-ratio:1 / 1.2}.tree-driver{max-width:42%;padding:10px 12px}.tree-driver[data-node=eng]{left:22%;top:46%}.tree-driver[data-node=product]{left:78%;top:46%}.tree-driver[data-node=analytics]{left:30%;top:80%}.tree-driver[data-node=ds]{left:70%;top:80%}.tree-root{font-size:.9375rem}.tree-detail{font-size:.8125rem}}.watch{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(56px,9vw,120px)}.watch-copy{display:grid;gap:18px;justify-items:start}.watch-copy p{color:var(--muted);font-size:1.125rem;max-width:40ch}.player{position:relative;overflow:hidden;border-radius:var(--radius-l);background:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 80%,var(--paper));box-shadow:0 40px 80px -48px color-mix(in srgb,var(--ink) 70%,transparent)}.player-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;color:color-mix(in srgb,var(--paper) 55%,transparent);font-size:.75rem}[data-theme=dark] .player{background:#0c0e11}[data-theme=dark] .player-bar{color:#8a9099}.player-bar i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,currentColor 45%,transparent)}.player-bar span{margin-left:10px}.player video{width:100%;aspect-ratio:16 / 9;object-fit:cover;background:#0c0e11}.player-play{position:absolute;left:50%;top:calc(50% + 18px);width:84px;height:84px;margin:-42px 0 0 -42px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;background:var(--marigold);color:#16191f;box-shadow:0 12px 30px -10px #00000080;transition:transform .2s var(--ease-out),opacity .2s ease}.player-play svg{width:34px;height:34px;fill:currentColor;margin-left:4px}.player-play:active{transform:scale(.95)}@media(hover:hover)and (pointer:fine){.player-play:hover{transform:scale(1.06)}}.player.is-playing .player-play{opacity:0;transform:scale(.9);pointer-events:none}@media(max-width:860px){.watch{grid-template-columns:1fr}.player-play{width:64px;height:64px;margin:-32px 0 0 -32px}.player-play svg{width:26px;height:26px}}.journey{padding-block:clamp(56px,9vw,120px)}.timeline{position:relative}.rail{position:absolute;top:8px;bottom:8px;left:calc(var(--date-col) + 11px);width:2px;background:var(--rule);border-radius:2px}.rail-fill{position:absolute;inset:0;background:var(--accent);border-radius:2px;transform-origin:top;transform:scaleY(0)}.timeline{--date-col: 168px}.stop{position:relative;display:grid;grid-template-columns:var(--date-col) 24px minmax(0,1fr);column-gap:clamp(20px,3vw,40px);padding-bottom:clamp(48px,7vw,88px)}.stop:last-child{padding-bottom:0}.stop-date{padding-top:2px;text-align:right;font:500 1.0625rem/1.3 var(--body);font-variant-numeric:tabular-nums;color:var(--muted)}.stop-date b{display:block;color:var(--ink);font:700 1.5rem/1.15 var(--display)}.stop-dot{position:relative;z-index:1;justify-self:center;margin-top:6px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--rule);transition:border-color .26s ease,background-color .26s ease,transform .26s var(--ease-out)}.stop.is-reached .stop-dot{border-color:var(--accent);background:var(--accent);transform:scale(1.15)}.stop[data-kind=study] .stop-dot{border-radius:4px}.stop-body{max-width:68ch}.stop-kind{font-size:.9375rem;font-weight:500;color:var(--muted);margin-bottom:6px}.stop-kind:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:1px}.stop[data-kind=study] .stop-kind:before{background:var(--marigold);border-radius:2px}.stop-role{margin:0;font:650 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.2 var(--display);letter-spacing:-.01em;text-wrap:balance}:lang(th) .stop-role{line-height:1.3}.stop-org{margin-top:4px;color:var(--muted)}.stop-org strong{color:var(--ink);font-weight:600}.stop-note{margin-top:14px;font-size:1.0625rem}.stop-bullets{margin-top:20px;display:grid;gap:14px}.stop-bullets li{position:relative;padding-left:22px;text-wrap:pretty}.stop-bullets li:before{content:"";position:absolute;left:0;top:.8em;width:10px;height:2px;background:var(--accent)}.stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}.stack li{padding:4px 12px;border-radius:999px;font-size:.875rem;font-weight:500;background:var(--paper-2);color:var(--ink)}.stat{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:20px;padding:16px 20px;border-radius:var(--radius-s);background:var(--accent-soft)}.stat-num{font:750 clamp(2.25rem,1.6rem + 2vw,3.25rem)/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}.stat-label{font-weight:500;font-size:1.0625rem}.stop-next .stop-dot{border-style:dashed;border-color:var(--accent)}.stop-next .stop-role{color:var(--accent)}@media(max-width:720px){.timeline{--date-col: 0px}.rail{left:11px}.stop{grid-template-columns:24px minmax(0,1fr);column-gap:18px}.stop-date{grid-column:2;grid-row:1;text-align:left;margin-bottom:10px}.stop-date b{display:inline;font-size:1.125rem;margin-right:6px}.stop-dot{grid-column:1;grid-row:1}.stop-body{grid-column:2}}.skills{padding-block:clamp(56px,9vw,120px);border-top:1px solid var(--rule)}.skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}.skill-col h3{margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--ink);font:650 1.1875rem/1.25 var(--display)}.skill-col li{padding:8px 0;border-bottom:1px solid var(--rule)}.certs{margin-top:clamp(32px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}.certs h3{margin:0;font:600 1rem/1 var(--body);color:var(--muted)}.certs li{padding:6px 14px;border:1px solid var(--rule);border-radius:999px;font-weight:500}.certs ul{display:flex;flex-wrap:wrap;gap:8px}@media(max-width:900px){.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.skill-grid{grid-template-columns:1fr}}.selected{padding-block:clamp(56px,9vw,120px);border-top:1px solid var(--rule)}.work-list,.project-list{border-top:1px solid var(--ink)}.work-item{border-bottom:1px solid var(--rule)}.work-link{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:24px;align-items:baseline;padding:28px 4px;text-decoration:none;transition:background-color .2s ease,padding 0ms}.work-title{font:650 clamp(1.5rem,1.2rem + 1.2vw,2.125rem)/1.15 var(--display);letter-spacing:-.015em}.work-ctx{display:block;margin-top:8px;font:500 1rem/1.3 var(--body);color:var(--muted);letter-spacing:0}.work-sum{color:var(--muted);max-width:52ch}.work-stat{font:700 1.125rem/1 var(--display);color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}.work-arrow{display:inline-block;width:18px;height:18px;margin-left:10px;vertical-align:-2px;transition:transform .22s var(--ease-out)}@media(hover:hover)and (pointer:fine){.work-link:hover .work-title{color:var(--accent)}.work-link:hover .work-arrow{transform:translate(3px,-3px)}}@media(max-width:820px){.work-link{grid-template-columns:1fr;gap:10px}}.contact{max-width:var(--max);margin:clamp(48px,8vw,96px) auto 0;padding:clamp(64px,10vw,140px) var(--gutter) 32px;border-top:1px solid var(--rule)}.contact-title{margin:0;max-width:14ch;font:700 clamp(2.5rem,1.2rem + 4.6vw,5.25rem)/1 var(--display);font-variation-settings:"wdth" 95,"opsz" 96;letter-spacing:-.025em;text-wrap:balance}:lang(th) .contact-title{line-height:1.2;letter-spacing:0;font-weight:600;max-width:18ch}.contact-body{margin-top:20px;color:var(--muted);font-size:1.125rem}.contact-email{display:inline-block;margin-top:28px;font:600 clamp(1.25rem,.9rem + 1.6vw,2.25rem)/1.2 var(--display);text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--marigold),var(--marigold)) left 92% / 100% .18em no-repeat;transition:background-size .26s var(--ease-out)}@media(hover:hover)and (pointer:fine){.contact-email:hover{background-size:100% .6em}}.contact-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}.contact-links a{display:inline-flex;align-items:center;height:44px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;font-weight:500;transition:border-color .16s ease,background-color .16s ease,color .16s ease}@media(hover:hover)and (pointer:fine){.contact-links a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}}.footer-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(64px,9vw,120px);padding-top:20px;border-top:1px solid var(--rule);font-size:.9375rem;color:var(--muted)}.page-head{padding-block:clamp(40px,8vw,104px) clamp(32px,5vw,56px)}.page-title{margin:0;font:750 clamp(3.5rem,1.5rem + 9vw,10rem)/.85 var(--display);font-variation-settings:"wdth" 92,"opsz" 96;letter-spacing:-.035em}:lang(th) .page-title{line-height:1.15;letter-spacing:0;font-weight:700}.page-lede{margin-top:24px;max-width:48ch;font-size:1.1875rem;color:var(--muted);text-wrap:pretty}.feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;padding-block:16px clamp(56px,9vw,112px)}.feature-copy{display:grid;gap:16px;align-content:start}.feature-tag{font-size:1rem;color:var(--accent);font-weight:600}.feature-title{margin:0;font:750 clamp(2.5rem,1.6rem + 3vw,4.25rem)/1 var(--display);letter-spacing:-.025em}.feature-sum{font-size:1.125rem;text-wrap:pretty}.feature-points{display:grid;gap:10px;margin-top:4px}.feature-points li{position:relative;padding-left:26px}.feature-points li:before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border:2px solid var(--accent);border-radius:3px}.feature-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}@media(max-width:900px){.feature{grid-template-columns:1fr}}.all-projects{padding-bottom:24px}.filter-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}.filter{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.filter-label{margin-right:8px;color:var(--muted);font-size:.9375rem}.filter button{height:40px;padding:0 16px;border-radius:999px;cursor:pointer;border:1px solid var(--rule);background:transparent;font-weight:500;transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .12s var(--ease-out)}.filter button:active{transform:scale(.96)}.filter button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}@media(hover:hover)and (pointer:fine){.filter button:not([aria-pressed=true]):hover{border-color:var(--ink)}}.filter-count{color:var(--muted);font-size:.9375rem;font-variant-numeric:tabular-nums}.project{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:32px 4px;border-bottom:1px solid var(--rule)}.project[hidden]{display:none}.project-year{font:600 1rem/1.4 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}.project-head h3{margin:0;font:650 clamp(1.5rem,1.2rem + 1vw,2.125rem)/1.15 var(--display);letter-spacing:-.015em;text-wrap:balance}.project-ctx{margin-top:8px;color:var(--muted);font-size:1rem}.project-stat{display:inline-block;margin-top:12px;padding:4px 10px;border-radius:var(--radius-s);background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.9375rem}.project-body .stack{margin-top:14px}.project-body p{text-wrap:pretty}.project-empty{padding:48px 0;color:var(--muted)}@media(max-width:820px){.project{grid-template-columns:1fr;gap:10px}}.js [data-reveal]{opacity:0}@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}