:root{--page-width:min(45rem, calc(100% - 2rem));--small-page-width:30rem;--large-page-width:min(calc(100vw - 2rem), 75rem);--header-height:8rem;--footer-height:5rem;color-scheme:light dark;--accent-color:light-dark(#40a02b, #a6e3a1);--background:light-dark(#eff1f5, #1e1e2e);--background-sec:light-dark(#e6e9ef, #181825);--background-tri:light-dark(#ccd0da, #313244);--foreground-color:light-dark(#4c4f69, #cdd6f4);--foreground-sec:light-dark(#7c7f93, #9399b2);--border:1.5px solid;--shadow:0 0.2rem 1.6rem light-dark(#00000040, #000000b0);--highlight:light-dark(#dc8a78,#f5e0dc)}:root{font-family:inter,noto sans thai,sans-serif}code{font-family:jetbrains mono,ayuthaya,monospance;font-size:.8em;line-height:1rem}pre>code{font-size:normal}@font-face{font-family:inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/font/Inter-Italic-Latin.woff2)format('woff2');unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/font/Inter-Latin.woff2)format('woff2');unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:jetbrains mono;font-style:italic;font-weight:100 800;font-display:swap;src:url(/font/JetBrainsMono-Italic-Latin.woff2)format('woff2');unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:jetbrains mono;font-style:normal;font-weight:100 800;src:url(/font/JetBrainsMono-Latin.woff2)format('woff2');unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:noto sans thai;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/font/NotoSansThai-Thai.woff2)format('woff2');unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:ayuthaya;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/font/Ayuthaya.woff2)format('woff2');unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:material symbols;font-style:normal;font-weight:400;font-display:block;src:url(/font/MaterialSymbolFill-Stripped.woff2)format('woff2')}.icon{color:var(--foreground-color);font-family:material symbols;font-weight:400;font-style:normal;font-size:1.2rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-moz-font-feature-settings:'liga';-moz-osx-font-smoothing:grayscale;position:relative}body{position:relative;background:var(--background);color:var(--foreground-color);line-height:1.5;margin:0;min-height:100vh;container-type:inline-size}header,main,footer{margin:0 auto;padding:0 1rem;width:var(--page-width)}main{min-height:calc(100vh - var(--footer-height) - var(--header-height))}footer{font-size:small;line-height:.625rem;text-align:center;color:var(--foreground-sec);a { color: var(--foreground-sec); }}main>div.wider{position:relative;width:var(--large-page-width);left:calc((var(--page-width) - var(--large-page-width) + 2rem)/2)}main>img{max-width:40rem}hr{border:none;border-top:var(--border);border-color:var(--foreground-sec)}a{color:var(--foreground-color);text-decoration-line:underline;text-underline-offset:2px;text-decoration-thickness:2px}h1,h2,h3,h4,h5,h6{color:var(--accent-color);text-decoration:none}menu{padding-left:0;margin:0;list-style-type:none}input{background:var(--background-tri)}button{cursor:pointer;background:0 0}input,button{font-family:inherit;font-size:inherit;color:inherit;border:none;border-radius:.2rem;padding:.5rem}blockquote{margin-left:1.5rem;padding-left:1rem;border-left:4px solid var(--foreground-color)}.heading-block{position:relative;border-bottom:var(--border);border-color:var(--foreground-sec);padding-top:.5rem;.heading { display: inline; margin-bottom: 0; padding-right: 2rem; } .heading-anchor { display: none; position: absolute; bottom: 0; right: 0; text-decoration: none; padding: 0 0.5rem; }}.heading-block:hover .heading-anchor{display:block}#site-title{display:inline-block;font-size:1.2rem;font-weight:700;text-decoration:none;color:var(--accent-color);padding:1rem;sup { font-size: x-small; font-weight: initial; color: var(--foreground-sec); }}nav{z-index:9999;position:sticky;left:calc(50% - (var(--page-width))/2);top:1rem;margin:1rem;padding:0 1rem;background:var(--background-sec);width:calc(var(--page-width) - 2rem);border-radius:.4rem;box-shadow:var(--shadow)}#menu-icons-group{position:absolute;right:1rem;top:50%;transform:translateY(-50%)}.menu-icons{font-size:large;padding:.5rem;border-radius:.2rem;aspect-ratio:1}.menu-icons:hover,.menu-icons-close,#menu-nav-wide>li:hover{background:var(--background-tri)}.menu-nav-icon,.menu-hidden{display:none}.menu-nav-icon{top:.5rem;@container(width < 560px){display: inline;
  }}.menu-icons-close{display:none}.menu-theme{display:grid}.menu-options{button, li { padding: 0.5rem 1rem; margin: 0.5rem; border-radius: 0.2rem; align-content: center; } a { padding: 0.5rem; text-decoration: none; }}.menu-island,.island{width:max-content;position:absolute;top:calc(100% + 2rem);right:-1rem;background:var(--background-sec);border-radius:.4rem;box-shadow:var(--shadow)}.menu-group:focus-within{.menu-icons { position: absolute; z-index: -1; } .menu-hidden, .menu-close, #menu-nav-mobile { display: inline; }}.menu-group:focus-within+.menu-icons-close{display:inline}#menu-nav-wide{display:inline-flex;border-left:1px solid var(--foreground-sec);padding-left:1rem;li { padding: 0; margin: 0; } @container (width < 560px){ display: none; }}#menu-nav-mobile{display:none;position:absolute;top:calc(100% + 1rem);left:0;background:var(--background-sec);border-radius:.4rem;box-shadow:var(--shadow)}.menu-group:first-of-type:focus-within~#menu-nav-mobile{@container(width < 560px){display: inline;
  }}.island input{margin:.5rem}summary{cursor:pointer}code{background:var(--background-tri);border-radius:.4rem;padding:0 .4rem .2rem}pre{padding:1rem;border-radius:.4rem;overflow-x:auto;code { display: block; width: fit-content; background: inherit; padding: 0; padding-right: 1rem; }}.img-16-9{img { width: 100%; aspect-ratio: 16/9; }}.tags{font-size:small}.tag{position:relative;background:var(--background-tri);border-radius:.4rem;padding:.2rem .4rem;margin-right:.4rem;text-decoration:none}img{border-radius:.2rem;object-fit:cover}img.inline{object-fit:contain;float:left;margin:0 2rem}picture{text-align:center;img { display: block; width: 100%; }}.figure{margin:0;text-align:center;picture { display: block; } figcaption { color: var(--foreground-sec); }}#cover{img { max-width: 100%; }}.full-width-block{position:relative;width:100vw;margin:1rem 0;padding:0 1rem;left:calc((min(100vw,var(--page-width)) - 100vw)/2)}.codeblock{line-height:1.2em;position:relative}.codeblock-copy{aspect-ratio:1;background:var(--background);border:none;cursor:pointer;border-radius:.2rem;position:absolute;top:.8rem;right:.8rem;path { fill: var(--foreground-color); }}.codeblock-copy:hover{background:var(--background-tri)}.text-green{color:light-dark(#40a02b,#a6e3a1)}#breadcrumbs{font-size:small;color:var(--foreground-sec);span:not(:first-child)::before { content:'/'; } a { padding:0.5rem; color:var(--foreground-sec); text-decoration:none; }}.metadata-group{.metadata { padding-right: 1rem; .icon { position: relative; top: 0.2rem; } }}.sec,.sec .icon{color:var(--foreground-sec)}@media print{:root{--background:white;--background-sec:white;--background-tri:white;--foreground-color:black;--foreground-sec:black;--accent-color:black}nav{display:none}.tag{border:1px solid #000}}