:root,[data-theme=light]{--accent:#2563eb;--accent-dark:#1d4ed8;--accent-soft:#2563eb1a;--black:15, 23, 42;--gray:100, 116, 139;--gray-light:226, 232, 240;--gray-dark:51, 65, 85;--surface:255, 255, 255;--surface-muted:248, 250, 252;--border:226, 232, 240;--code-bg:226, 232, 240;--pre-bg:15, 23, 42;--pre-fg:255, 255, 255;--box-shadow:0 1px 2px rgba(var(--black), 4%), 0 4px 12px rgba(var(--black), 6%);--box-shadow-lg:0 4px 6px rgba(var(--black), 5%), 0 12px 28px rgba(var(--black), 10%);color-scheme:light}[data-theme=dark]{--accent:#60a5fa;--accent-dark:#93c5fd;--accent-soft:#60a5fa26;--black:248, 250, 252;--gray:148, 163, 184;--gray-light:51, 65, 85;--gray-dark:203, 213, 225;--surface:30, 41, 59;--surface-muted:15, 23, 42;--border:51, 65, 85;--code-bg:51, 65, 85;--pre-bg:2, 6, 23;--pre-fg:226, 232, 240;--box-shadow:0 1px 2px #0003, 0 4px 12px #0000004d;--box-shadow-lg:0 4px 6px #00000040, 0 12px 28px #00000059;color-scheme:dark}:root{--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--container:1100px;--container-narrow:720px;--header-height:4rem}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-mitr), "Mitr", "Noto Sans Thai", sans-serif;text-align:left;background:rgb(var(--surface-muted));color:rgb(var(--gray-dark));flex-direction:column;min-height:100vh;margin:0;padding:0;font-size:1.0625rem;line-height:1.7;display:flex}a{color:var(--accent);text-decoration:none;transition:color .15s}a:hover{color:var(--accent-dark)}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{color:rgb(var(--black));letter-spacing:-.02em;margin:0 0 .5rem;font-weight:700;line-height:1.25}h1{font-size:clamp(2rem,4vw,2.75rem)}h2{font-size:clamp(1.5rem,3vw,2rem)}h3{font-size:clamp(1.15rem,2vw,1.35rem)}h4{font-size:1.125rem}p{margin:0 0 1rem}strong,b{font-weight:700}code{background:rgb(var(--code-bg));border-radius:4px;padding:.15em .4em;font-size:.9em}pre{border-radius:var(--radius-md);background:rgb(var(--pre-bg));color:rgb(var(--pre-fg));padding:1.25rem;overflow-x:auto}pre>code{all:unset}blockquote{border-left:3px solid var(--accent);color:rgb(var(--gray));margin:0 0 1.5rem;padding:0 0 0 1.25rem;font-size:1.1rem}hr{border:none;border-top:1px solid rgb(var(--border));margin:2rem 0}textarea,input{font-family:inherit;font-size:1rem}table{border-collapse:collapse;width:100%}.page-main{width:100%;max-width:var(--container);flex:1;margin:0 auto;padding:2.5rem 1.25rem 4rem}.page-main--narrow{max-width:var(--container-narrow)}.page-header{margin-bottom:2.5rem}.page-header p{max-width:42rem;color:rgb(var(--gray));margin:.75rem 0 0;font-size:1.05rem}.hero{text-align:center;padding:2rem 0 3rem}.hero__title{margin-bottom:.5rem}.hero__intro{max-width:38rem;color:rgb(var(--gray));margin:0 auto 1.75rem;font-size:1.1rem;line-height:1.75}.hero__actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.btn{border-radius:var(--radius-sm);justify-content:center;align-items:center;padding:.7rem 1.35rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .15s,color .15s,border-color .15s,transform .15s;display:inline-flex}.btn--primary{background:rgb(var(--black));color:rgb(var(--surface));border:1px solid rgb(var(--black))}.btn--primary:hover{background:rgb(var(--gray-dark));border-color:rgb(var(--gray-dark));color:rgb(var(--surface));transform:translateY(-1px)}.btn--secondary{background:rgb(var(--surface));color:rgb(var(--black));border:1px solid rgb(var(--border))}.btn--secondary:hover{border-color:rgb(var(--gray));color:rgb(var(--black));transform:translateY(-1px)}.section-title{text-align:center;margin-bottom:2rem}.card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1.5rem;margin:0;padding:0;list-style:none;display:grid}.card{background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--radius-md);flex-direction:column;height:100%;transition:box-shadow .2s,transform .2s,border-color .2s;display:flex;overflow:hidden}.card:hover{box-shadow:var(--box-shadow-lg);border-color:rgba(var(--gray), .5);transform:translateY(-2px)}.card__link{height:100%;color:inherit;flex-direction:column;text-decoration:none;display:flex}.card__link:hover{color:inherit}.card__media{aspect-ratio:16/9;background:rgb(var(--gray-light));overflow:hidden}.card__media img{object-fit:cover;border-radius:0;width:100%;height:100%;display:block}.card__body{flex-direction:column;flex:1;gap:.35rem;padding:1.15rem 1.25rem 1.25rem;display:flex}.card__title{color:rgb(var(--black));margin:0;line-height:1.3}.card__desc{color:rgb(var(--gray));flex:1;margin:0;font-size:.925rem;line-height:1.55}.card__meta{color:rgb(var(--gray));margin:.25rem 0 0;font-size:.85rem}.card-grid--blog .card:first-child{grid-column:1/-1}.card-grid--blog .card:first-child .card__media{aspect-ratio:21/9}.card-grid--blog .card:first-child .card__title{font-size:clamp(1.35rem,3vw,1.75rem)}.article{max-width:var(--container-narrow);margin:0 auto}.article__hero{border-radius:var(--radius-lg);box-shadow:var(--box-shadow-lg);margin-bottom:2rem;overflow:hidden}.article__hero img{border-radius:0;width:100%;display:block}.article__header{text-align:center;border-bottom:1px solid rgb(var(--border));margin-bottom:2rem;padding-bottom:1.5rem}.article__date{color:rgb(var(--gray));margin-bottom:.75rem;font-size:.9rem}.article__updated{margin-top:.25rem;font-style:italic}.article__meta{flex-wrap:wrap;justify-content:center;gap:.75rem;margin:1rem 0;display:flex}.article__meta a{font-size:.9rem;font-weight:600}.tag-list{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;display:flex}.tag{color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:.25rem .75rem;font-size:.8rem;font-weight:600}.prose{color:rgb(var(--gray-dark))}.prose p{margin-bottom:1.5rem}.prose h2,.prose h3{margin-top:2rem}.site-header{z-index:100;background:rgba(var(--surface), .92);backdrop-filter:blur(10px);border-bottom:1px solid rgb(var(--border));position:sticky;top:0}.site-header__inner{max-width:var(--container);min-height:var(--header-height);justify-content:space-between;align-items:center;gap:1rem;margin:0 auto;padding:0 1.25rem;display:flex}.site-header__brand{letter-spacing:-.02em;margin:0;font-size:1.05rem;font-weight:700}.site-header__brand a{color:rgb(var(--black));text-decoration:none}.site-header__brand a:hover{color:var(--accent)}.site-header__nav{align-items:center;gap:.25rem;display:flex}.site-header__link{color:rgb(var(--gray-dark));border-radius:var(--radius-sm);padding:.5rem .75rem;font-size:.95rem;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.site-header__link:hover{color:var(--accent);background:var(--accent-soft)}.site-header__link.active{color:var(--accent);background:var(--accent-soft);font-weight:600}.site-header__actions{align-items:center;gap:.75rem;display:flex;position:relative}.site-header__social{align-items:center;gap:.35rem;display:flex}.site-header__social a{color:rgb(var(--gray));border-radius:var(--radius-sm);padding:.35rem;transition:color .15s,background .15s;display:flex}.site-header__social a:hover{color:var(--accent);background:var(--accent-soft)}.lang-switch{border-radius:var(--radius-sm);color:rgb(var(--gray-dark));border:1px solid rgb(var(--border));background:rgb(var(--surface));padding:.35rem .7rem;font-size:.85rem;font-weight:600;text-decoration:none;transition:color .15s,border-color .15s,background .15s}.lang-switch:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.theme-toggle{border:1px solid rgb(var(--border));border-radius:var(--radius-sm);background:rgb(var(--surface));width:2.25rem;height:2.25rem;color:rgb(var(--gray-dark));cursor:pointer;justify-content:center;align-items:center;padding:0;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.theme-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.theme-toggle__icon{font-size:1rem;line-height:1}.theme-toggle__icon--moon,[data-theme=dark] .theme-toggle__icon--sun{display:none}[data-theme=dark] .theme-toggle__icon--moon{display:inline}.nav-toggle{display:none}.site-footer{background:rgb(var(--surface));border-top:1px solid rgb(var(--border));margin-top:auto;padding:2.5rem 1.25rem}.site-footer__inner{max-width:var(--container);text-align:center;color:rgb(var(--gray));flex-direction:column;align-items:center;gap:1rem;margin:0 auto;font-size:.925rem;display:flex}.site-footer__social{gap:.75rem;display:flex}.site-footer__social a{color:rgb(var(--gray));border-radius:var(--radius-sm);padding:.35rem;transition:color .15s,background .15s;display:flex}.site-footer__social a:hover{color:var(--accent);background:var(--accent-soft)}.sr-only{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;position:absolute!important}@media (width<=768px){body{font-size:1rem}.page-main{padding:1.75rem 1rem 3rem}.hero{padding:1.25rem 0 2rem}.nav-toggle{display:block;position:relative}.nav-toggle summary{cursor:pointer;border:1px solid rgb(var(--border));border-radius:var(--radius-sm);background:rgb(var(--surface));width:2.5rem;height:2.5rem;color:rgb(var(--black));justify-content:center;align-items:center;list-style:none;display:flex}.nav-toggle summary::-webkit-details-marker{display:none}.nav-toggle summary:before{content:"☰";font-size:1.1rem;line-height:1}.nav-toggle[open] summary:before{content:"✕"}.site-header__nav--desktop{display:none}.nav-toggle__panel{background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--radius-md);min-width:12rem;box-shadow:var(--box-shadow-lg);flex-direction:column;gap:.15rem;padding:.5rem;display:flex;position:absolute;top:calc(100% + .5rem);right:0}.nav-toggle__panel .site-header__link{padding:.65rem .85rem;display:block}.site-header__social--desktop{display:none}.card-grid--blog .card:first-child .card__media{aspect-ratio:16/9}}@media (width>=769px){.nav-toggle{display:none}.site-header__nav--desktop{display:flex}}