:root{--font-display:"Titan One";--font-body:"Outfit", "IBM Plex Sans Thai", system-ui, sans-serif;--bg:#fbfbff;--check:#eef0fb;--ink:#1b1f4b;--ink-soft:#4a4f7a;--blue:#3557ef;--blue-deep:#2442d6;--pink:#ff4fc3;--blue-fill:#3557ef;--pink-fill:#d1168f;--pink-text:#d1168f;--lavender:#dcd8fb;--lavender-strong:#c9c3f7;--surface:#fff;--on-accent:#fff;--shadow:0 18px 40px -18px #3557ef59;--radius-lg:28px;--radius-md:18px;--gutter:clamp(16px, 4vw, 48px);--max:1200px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0d1028;--check:#141a3d;--ink:#eef0ff;--ink-soft:#a9aed8;--blue:#5b7cff;--blue-deep:#3f5ef0;--pink:#ff5fc8;--blue-fill:#3f5ef0;--pink-fill:#d1168f;--pink-text:#ff5fc8;--lavender:#222861;--lavender-strong:#2e3576;--surface:#161b40;--shadow:0 18px 40px -18px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0d1028;--check:#141a3d;--ink:#eef0ff;--ink-soft:#a9aed8;--blue:#5b7cff;--blue-deep:#3f5ef0;--pink:#ff5fc8;--blue-fill:#3f5ef0;--pink-fill:#d1168f;--pink-text:#ff5fc8;--lavender:#222861;--lavender-strong:#2e3576;--surface:#161b40;--shadow:0 18px 40px -18px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{margin:0}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}body{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55;transition:background-color .3s,color .3s;overflow-x:hidden}body:before{content:"";z-index:-1;pointer-events:none;background:conic-gradient(var(--check) 25%, transparent 0 50%, var(--check) 0 75%, transparent 0) 0 0 / 72px 72px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(40% 35% at 85% 20%,#000 0%,#0000 70%),radial-gradient(35% 30% at 10% 60%,#000 0%,#0000 70%),radial-gradient(40% 35% at 70% 95%,#000 0%,#0000 70%);mask-image:radial-gradient(40% 35% at 85% 20%,#000 0%,#0000 70%),radial-gradient(35% 30% at 10% 60%,#000 0%,#0000 70%),radial-gradient(40% 35% at 70% 95%,#000 0%,#0000 70%)}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}.display{font-family:var(--font-display), "Mitr", sans-serif;letter-spacing:.01em;color:var(--blue);font-weight:400;line-height:.95}:root[data-lang=th]{--font-display:"Mitr"}[data-lang=th] .display{font-weight:600;line-height:1.2}.container{width:min(var(--max), 100% - 2 * var(--gutter));margin-inline:auto}.section{padding-block:clamp(72px,12vw,140px);position:relative}.muted{color:var(--ink-soft)}.small{font-size:.9rem}.skip-link{z-index:200;background:var(--blue-fill);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;transition:top .2s;position:fixed;top:-60px;left:16px}.skip-link:focus{top:16px}main:focus{outline:none}:focus-visible{outline:3px solid var(--blue);outline-offset:3px}[data-lang=en] .t-th,[data-lang=th] .t-en{display:none}.pill{--pill-bg:var(--blue-fill);background:var(--pill-bg);color:var(--on-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--pill-bg) 25%, transparent);border-radius:999px;align-items:center;gap:14px;padding:8px 8px 8px 22px;font-size:.95rem;font-weight:600;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;display:inline-flex;position:relative;overflow:hidden}.pill:after{content:"";background:conic-gradient(#ffffff2e 25%, transparent 0 50%, #ffffff2e 0 75%, transparent 0) 0 0 / 12px 12px;width:70px;position:absolute;top:0;bottom:0;right:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000);mask-image:linear-gradient(90deg,#0000,#000)}.pill .pill-icon{z-index:1;background:#ffffff38;border-radius:50%;place-items:center;width:34px;height:34px;transition:transform .25s;display:grid;position:relative}.pill:hover{box-shadow:0 0 0 5px color-mix(in srgb, var(--pill-bg) 25%, transparent);transform:translateY(-2px)}.pill:hover .pill-icon{transform:translate(3px)}.pill.pink{--pill-bg:var(--pink-fill)}.sparkle{color:var(--pink);pointer-events:none;animation:3s ease-in-out infinite twinkle;position:absolute}.sparkle.blue{color:var(--blue)}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)rotate(0)}50%{opacity:.7;transform:scale(.7)rotate(20deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.prose{overflow-wrap:anywhere;line-height:1.75}.prose h1,.prose h2,.prose h3{margin:1.6em 0 .5em;line-height:1.25}.prose h2{color:var(--blue);font-size:1.6rem}.prose a{color:var(--blue);text-underline-offset:3px;text-decoration:underline}.prose img{border-radius:16px;margin:1em 0}.prose blockquote{border-left:4px solid var(--pink);background:var(--lavender);border-radius:0 12px 12px 0;margin:1em 0;padding:.5em 1em}.prose :not(pre)>code{background:var(--lavender);border-radius:6px;padding:.1em .4em;font-size:.9em}.prose pre{color:#e6e8ff;background:#14183a;border-radius:16px;padding:16px 18px;font-size:.88rem;line-height:1.6;overflow-x:auto}.prose pre code{font-family:ui-monospace,JetBrains Mono,monospace}.prose table{border-collapse:collapse;width:100%}.prose th,.prose td{border:1px solid var(--lavender-strong);padding:6px 10px}.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#ff7ad6}.hljs-string,.hljs-attr,.hljs-template-tag{color:#9fe4a8}.hljs-number,.hljs-built_in,.hljs-type{color:#ffc27a}.hljs-title,.hljs-title.function_,.hljs-section{color:#8fb0ff}.hljs-comment,.hljs-quote{color:#8088b8;font-style:italic}.hljs-variable,.hljs-params,.hljs-property{color:#e6e8ff}.hljs-meta,.hljs-symbol{color:#7fe0ff}.project-grid{grid-template-columns:repeat(2,1fr);gap:32px;display:grid}.post-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.post-frame{padding:18px;position:relative}.post-frame:before,.post-frame:after{content:"";border:2.5px dashed var(--blue);pointer-events:none;width:120px;height:60px;position:absolute}.post-frame:before{border-bottom:0;border-right:0;border-top-left-radius:20px;top:0;left:0}.post-frame:after{border-top:0;border-left:0;border-bottom-right-radius:20px;bottom:0;right:0}@media (width<=900px){.post-grid{grid-template-columns:1fr}}@media (width<=640px){.project-grid{grid-template-columns:1fr}}.page-head{padding-block:clamp(40px,8vw,80px) 40px}.page-title{margin:0 0 12px;font-size:clamp(3rem,8vw,5.6rem);display:inline-block;position:relative}.back{width:fit-content;color:var(--ink-soft);align-items:center;gap:8px;margin-bottom:20px;font-weight:600;display:flex}.back:hover{color:var(--blue)}.chips{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.chips a,.chips li>span{background:var(--lavender);border-radius:999px;padding:6px 16px;font-size:.9rem;font-weight:600;transition:background-color .2s,color .2s;display:inline-block}.chips a:hover{background:var(--lavender-strong)}.chips a.on{background:var(--blue-fill);color:#fff}.empty{text-align:center;border-radius:var(--radius-lg);background:var(--lavender);padding:40px}@view-transition{navigation:auto}::view-transition-old(root){animation:.3s cubic-bezier(.4,0,1,1) both vt-out}::view-transition-new(root){animation:.6s ease-out .1s both vt-in}@keyframes vt-out{to{opacity:0;transform:scale(.92)}}@keyframes vt-in{0%{opacity:0;transform:scale(1.06)}55%{opacity:1;transform:scale(.985)}80%{transform:scale(1.004)}to{transform:scale(1)}}.nav-bar{view-transition-name:site-nav}::view-transition-group(*.media){animation-duration:.6s;animation-timing-function:cubic-bezier(.3,1.1,.4,1)}::view-transition-old(*.media){object-fit:cover;height:100%;overflow:hidden}::view-transition-new(*.media){object-fit:cover;height:100%;overflow:hidden}::view-transition-old(*.media){opacity:0;animation:none}::view-transition-new(*.media){animation:none}html.theme-vt::view-transition-old(root){mix-blend-mode:normal;animation:none}html.theme-vt::view-transition-new(root){mix-blend-mode:normal;animation:none}html.theme-vt *{view-transition-name:none!important}@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}