:root{--ui-spacing:.25rem;--ui-primary:var(--color-deep-dark);--ui-container:64rem;--ui-container-narrow:48rem;--ui-container-narrow-very:36rem;--ui-header-logo-inverted:1;--ui-header-height:calc(var(--ui-spacing)*14);--ui-header-height-collapsed:calc(var(--ui-spacing)*12);--color-surface-container:#f9f9f9;--color-surface-container-glass:#f9f9f9de;--color-on-surface-container:#111;--color-inverse-surface-container:#111;--color-on-inverse-surface-container:#f9f9f9;--color-primary:#1a1a1a;--color-primary-strong:#3e3e3e;--color-on-primary:#eee;--color-on-primary-weak:#ebebeb;--color-secondary:#efefef;--color-secondary-strong:#dfdfdf;--color-on-secondary:#2e2e2e;--color-container:#f8f8f8;--color-on-container:#0e0e0e;--color-outline-very-intense:#a0a0a0;--color-outline-intense:silver;--color-outline:#d9d9d9;--color-accent:#06f;--color-accent-strong:#0055d5;--color-inverse:#f60;--color-inverse-strong:#d55500;--font-sans:"Fira Sans","Noto Sans Thai Looped",sans-serif;--font-sans--font-feature-settings:"liga","calt";--font-mono:"Fira Mono","SF Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-serif:"Linux Libertine","Georgia","Source Serif 4",Georgia,Garamond,"Times New Roman",Times,"Noto Serif Thai",serif;--ease-fluid:.2,0,0,1;--ease-fluid-in:.6,.2,.7,.4;--ease-out-back:.34,1.56,.64,1}@media screen and (prefers-color-scheme:dark){:root{--color-surface-container:#111;--color-surface-container-glass:#111111de;--color-on-surface-container:#eee;--color-inverse-surface-container:#eee;--color-on-inverse-surface-container:#111;--color-primary:#eee;--color-primary-strong:#dadada;--color-on-primary:#1a1a1a;--color-on-primary-weak:#292929;--color-secondary:#1d1d1d;--color-secondary-strong:#2f2f2f;--color-on-secondary:#e4e4e4;--color-container:#1f1f1f;--color-on-container:#dfdfdf;--color-outline-very-intense:#4d4d4d;--color-outline-intense:#3e3e3e;--color-outline:#2d2d2d}}@keyframes ring{0%{outline:0 solid var(--ui-ring-color);outline-offset:var(--ui-ring-offset)}25%{outline:12px solid var(--ui-ring-color);outline-offset:var(--ui-ring-offset)}to{outline:var(--ui-ring-size) solid var(--ui-ring-color);outline-offset:var(--ui-ring-offset)}}*{box-sizing:border-box}:focus-visible{--ui-ring-size:2px;--ui-ring-color:var(--color-accent);--ui-ring-offset:2px;animation:ring .5s cubic-bezier(var(--ease-fluid));outline:var(--ui-ring-size) solid var(--ui-ring-color);outline-offset:var(--ui-ring-offset)}.btn,button{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}body,main{background:var(--color-surface-container);color:var(--color-on-surface-container);font-family:var(--font-sans);line-height:1.35;margin:0;padding:0}img{border-radius:calc(var(--ui-spacing)*1);display:block;max-width:100%}a{color:unset;text-decoration:none}code,kbd,pre,tt{font-family:var(--font-mono);font-size:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:400}h1{font-size:1.8em}h2{font-size:1.5em}h3{font-size:1.25em}h4{font-size:1.1em}h5{font-size:1em}h6{font-size:.9em}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}.text-accent{color:var(--color-accent)}.web-header-container{overflow:visible;position:sticky;top:0;width:100%;z-index:100}.hamburger-menu-header,.web-header{box-sizing:border-box;display:flex;flex-direction:row;height:var(--ui-header-height-collapsed);position:sticky;top:0;z-index:998}@media screen and (min-width:1024px){.hamburger-menu-header,.web-header{height:var(--ui-header-height)}}.hamburger-menu-header.hamburger-menu-header-bg,.web-header.web-header-bg{background:var(--color-secondary);border-bottom:1px solid var(--color-outline);color:var(--color-on-secondary)}.web-header-logo-banner{align-content:center;background:var(--color-accent);height:100%}.web-header-logo-banner>.web-header-logo{border-radius:0}.web-header-title{display:none;font-size:16px;font-weight:700;margin:0;margin-inline:calc(var(--ui-spacing)*2);visibility:hidden}@media screen and (min-width:480px){.web-header-title{display:block;visibility:visible}}@media screen and (max-width:479px){.web-header-logo-banner>.web-header-logo{height:var(--ui-header-height-collapsed);width:var(--ui-header-height-collapsed)}}.article,.web-footer-content,.web-nav{width:100%}.article.article-special h1,.article.article-special h2,.article.article-special h3,.article.article-special h4,.article.article-special h5,.article.article-special h6{border-bottom:1px solid var(--color-outline-very-intense)}.web-footer-title{font-size:32px;margin-block:.4em}.web-footer-links-container>.web-footer-link-title,.web-footer-notice{font-family:var(--font-mono);font-size:12px}.web-footer-links-container>.web-footer-link-title{text-transform:uppercase}.web-footer-links{list-style:none;margin:0;padding:0}.web-footer-link{width:100%}.web-footer-link a{display:block;margin-block:.5em;width:100%}.web-footer-links-container-container{display:flex}.web-heading{align-items:center;display:flex;flex-direction:row;height:100%;justify-content:space-between;margin:0 auto;max-width:var(--ui-container);padding:0 calc(var(--ui-spacing)*4);width:100%}.web-heading .web-heading-left-section{display:flex;justify-content:start}.web-heading .web-heading-left-section,.web-heading .web-heading-right-section{align-items:center;flex-direction:row;height:100%;width:-moz-fit-content;width:fit-content}.web-heading .web-heading-right-section{display:none;justify-content:end}@media screen and (min-width:1024px){.web-heading .web-heading-right-section{display:flex}}p{margin-block:1em}.font-hero{font-size:40px;font-weight:700;line-height:1.3;margin-block:.2em}.font-hero-desc{font-size:20px;font-weight:500}.web-title{margin-block:.5em;transition-duration:.1s;transition-property:color;transition-timing-function:cubic-bezier(var(--ease-fluid))}.web-title a{cursor:pointer}.web-title .link-inline-icon{margin-left:.5rem;opacity:.5;transition-duration:.1s;transition-property:opacity margin;transition-timing-function:cubic-bezier(var(--ease-fluid));-webkit-user-select:none;-moz-user-select:none;user-select:none}.web-title:hover .link-inline-icon{margin-left:1rem;opacity:1}.web-title:active a{color:var(--color-primary)}.web-title:focus-visible a{text-decoration:underline}.web-title.link{color:var(--ui-text)}.web-nav-title{--web-nav-title-shadow:0px 0px 16px var(--ui-bg);font-size:18px}.web-hero-post{align-items:center;display:flex;flex-direction:column;text-align:center}.web-section{margin-block:calc(var(--ui-spacing)*16);margin-inline:auto;max-width:var(--ui-container);padding-inline:calc(var(--ui-spacing)*4)}.web-section.web-section-split{display:flex;flex-direction:column;gap:calc(var(--ui-spacing)*4)}.web-section.web-section-split .about-me-photo-grid{display:grid;gap:calc(var(--ui-spacing)*1);grid-template-columns:repeat(1,minmax(0,1fr))}.web-section.web-section-big-text{font-size:20px;line-height:1.5}.article.article-footer a:hover{background:var(--color-on-primary);color:var(--color-primary)}.article.article-footer .web-footer-link>a:hover{background:none;color:var(--color-on-primary);text-decoration:underline;text-decoration-style:dotted}.article.article-footer{background:var(--color-inverse-surface-container);color:var(--color-on-inverse-surface-container);padding-block:calc(var(--ui-spacing)*12)}.article.article-footer.article-footer-no-bg{background:transparent;color:inherit}.article.article-footer .web-footer-link>a:active{text-decoration-style:solid}.article.article-footer>.web-section{display:flex;margin-block:0}@media screen and (min-width:768px){.web-section.web-section-split{flex-direction:row;gap:calc(var(--ui-spacing)*8)}.web-section.web-section-split>.web-section-pane:first-child:not(:only-child){width:35%}.web-section.web-section-split>.web-section-pane:last-child:not(:only-child){width:65%}}.web-section.web-section-narrow{max-width:var(--ui-container-narrow)}.web-section.web-section-narrow-very{max-width:var(--ui-container-narrow-very)}.about-me-photo-grid{display:grid;gap:calc(var(--ui-spacing)*1);grid-template-columns:repeat(1,minmax(0,1fr))}.about-me-photo-grid>img{aspect-ratio:16/9;height:100%;-o-object-fit:cover;object-fit:cover}@media screen and (min-width:768px){.about-me-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.card-container{background:var(--color-container);border:1px solid var(--color-outline-intense);border-radius:calc(var(--ui-spacing)*1);box-shadow:0 1px 1px #0000001a;color:var(--color-on-container);display:flex;flex-direction:column;list-style:none;margin-block:1em;margin-left:0;overflow:hidden}.card,.card-container>li{margin-left:0}.card{align-items:center;background:var(--ui-bg-muted);display:flex;flex-direction:column;height:100%}.card.disabled{cursor:not-allowed;opacity:.5;pointer-events:none;z-index:1}.card>h3{font-size:24px;-webkit-line-clamp:1}.card>h3,.card>p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;z-index:1}.card>p{margin:0;width:100%;-webkit-line-clamp:2}.card>img{aspect-ratio:16/9;border-radius:0;-o-object-fit:cover;object-fit:cover;width:100%}.card>.iconify,.card>.material-symbols-outlined{background:var(--color-primary);color:var(--color-on-primary);height:calc(var(--ui-spacing)*16);width:calc(var(--ui-spacing)*16)}.card>.material-symbols-outlined{align-content:center;font-size:48px;font-variation-settings:"opsz" 48;text-align:center}.card>.card-content{display:block;padding:calc(var(--ui-spacing)*3);width:100%}.card>.card-content h3{margin:0}.card:hover{background:var(--color-secondary)}.card-container>.card:not(:only-child):not(:last-child){border-bottom:1px solid var(--color-outline)}.card.card-always-long{flex-direction:row}@media screen and (min-width:640px){.card,.card.card-always-long{flex-direction:row}.card>img{margin-bottom:0;max-width:calc(var(--ui-spacing)*64)}.card>.card-content{padding-inline:calc(var(--ui-spacing)*4)}}.hamburger-toggle{all:unset;align-items:center;cursor:pointer;display:flex;height:100%;justify-content:center;visibility:visible;width:calc(var(--ui-spacing)*9)}.hamburger-toggle:hover{background:var(--color-secondary)}.hamburger-toggle.placeholder{background:none}@media screen and (min-width:1024px){.hamburger-toggle.no-autohide{display:flex!important;visibility:visible!important}.hamburger-toggle{display:none;visibility:hidden}}.hamburger-menu{background:#fff;height:100vh;left:0;max-width:20rem;position:fixed;top:0;transform-origin:top right;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(var(--ease-fluid));z-index:1000}.hamburger-menu,.hamburger-menu>.nav-wrapper{display:flex;flex-direction:column;width:100%}.hamburger-menu>.nav-wrapper{align-items:end;list-style-type:none;margin:0;overflow-y:scroll;padding:0 calc(var(--ui-spacing)*4)}.hamburger-menu>.nav-wrapper>.nav-button,.hamburger-menu>.nav-wrapper>.nav-link{display:flex;margin-left:0;width:100%}.hamburger-menu>.nav-wrapper>.nav-link>.hamburger-btn-square,.hamburger-menu>.nav-wrapper>.nav-link>a{align-items:center;display:flex;height:calc(var(--ui-spacing)*12);padding-inline:calc(var(--ui-spacing)*4);width:100%}.hamburger-menu>.nav-wrapper>.nav-link>a.router-link-exact-active{color:var(--color-accent)}.hamburger-menu>.nav-wrapper>.nav-link>.hamburger-btn-square{aspect-ratio:1/1;justify-content:center;width:unset}.hamburger-menu>.nav-wrapper>.nav-link:not(:only-child):not(:last-child){border-bottom:1px solid var(--color-outline)}.hamburger-menu>.nav-wrapper>.nav-button{display:flex;justify-content:flex-end;margin-left:calc(var(--ui-spacing)*0);max-width:18rem;width:100%}.hamburger-menu.hamburger-menu-hidden{transform:translate(-100%);visibility:hidden}.hamburger-backdrop-overlay{background:#000;inset:0;opacity:.5;position:fixed;z-index:999}.nav-links{display:flex;height:100%}@media screen and (min-width:768px){.nav-links{display:hidden}}ul.nav-wrapper{margin:0}.nav-links>.nav-wrapper{display:flex;flex-direction:row;height:100%;list-style-type:none}.nav-links>.nav-wrapper>.nav-link{align-content:center;font-size:14px;font-weight:400;height:100%;margin:0}.nav-links>.nav-wrapper>.nav-link>a{align-items:center;cursor:pointer;display:flex;height:100%;padding-inline:calc(var(--ui-spacing)*3)}.nav-links>.nav-wrapper>.nav-link>a.router-link-exact-active,.nav-links>.nav-wrapper>.nav-link>a:hover{border-top:2px solid var(--color-accent);color:var(--color-accent);padding-bottom:2px}.nav-links>.nav-wrapper>.nav-link>a:active{opacity:.9}code,kbd,pre,samp,tt{font-size:1em}.link,.prose a{color:var(--ui-text);text-decoration:underline}.link:hover,.prose a:hover{background:var(--color-on-surface-container);color:var(--color-surface-container);text-decoration:none}.link:active,.prose a:active{opacity:.8}.link.link-no-underline,.prose h2>a{text-decoration:none}a.btn,button.btn{cursor:pointer}.btn{--ui-btn-bg:var(--color-surface-container);--ui-btn-bg-active:var(--color-secondary);--ui-btn-text:var(--color-on-surface-container);--ui-btn-border-width:1px;--ui-btn-border-color:var(--color-outline);--ui-btn-border-style:solid;--ui-btn-height:calc(var(--ui-spacing)*10);--ui-btn-padding-x:calc(var(--ui-spacing)*4);--ui-btn-radius:calc(var(--ui-btn-height)/2);align-items:center;background:var(--ui-btn-bg);border-color:var(--ui-btn-border-color);border-radius:var(--ui-btn-radius);border-style:var(--ui-btn-border-style);border-width:var(--ui-btn-border-width);color:var(--ui-btn-text);display:flex;height:var(--ui-btn-height);padding-inline:var(--ui-btn-padding-x);width:-moz-fit-content;width:fit-content}.btn:active{background:var(--ui-btn-bg-active)}.btn.btn-primary{--ui-btn-bg:var(--color-primary);--ui-btn-bg-active:var(--color-primary-strong);--ui-btn-text:var(--color-on-primary);--ui-btn-border-width:0}.btn.btn-secondary{background:var(--color-secondary);color:var(--color-on-secondary);padding-inline:calc(var(--ui-spacing)*2.5)}.btn.btn-sm{font-size:14px;height:calc(var(--ui-spacing)*8)}.btn.btn-sm .material-symbols-outlined{font-size:20px;font-variation-settings:"opsz" 20}.prose-blog-pretext{font-family:var(--font-mono);font-size:12px;text-transform:uppercase}.post-container{display:flex;flex-direction:column-reverse}@media screen and (min-width:1024px){.post-container{display:flex;flex-direction:row}}.prose{flex:3;font-weight:400;width:100%}.prose p,li{line-height:1.5}.prose hr,hr{border:none;border-bottom:1px solid var(--color-outline-intense);height:1px}.prose hr,.prose li,hr{margin-block:1em}.prose h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);scroll-margin-top:80px}.prose img{margin-block:calc(var(--ui-spacing)*3)}.prose-toc{flex:1;max-width:320px;width:100%}@media screen and (min-width:1024px){.prose-toc{margin-left:calc(var(--ui-spacing)*5)}}.post-cover{display:flex;flex-direction:column;gap:1.5rem}.post-cover>.img-cover{aspect-ratio:4/3;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}@media screen and (min-width:640px){.post-cover{flex-direction:row-reverse;justify-content:flex-end}.post-cover>.img-cover{max-width:55%}}.post-more-info{font-family:var(--font-mono);font-size:12px;margin:0;margin-top:calc(var(--ui-spacing)*2)}.toc{position:sticky;top:calc(var(--ui-header-height) + var(--ui-spacing)*4)}.toc>.toc-text{font-weight:700;margin-block:.5em}.toc>ul{list-style:none;margin:0;padding:0}.toc .toc-link-indent-3{margin-left:calc(var(--ui-spacing)*3)}.toc .toc-link-indent-4{margin-left:calc(var(--ui-spacing)*6)}.web-dismissible-banner{background:var(--color-primary);color:var(--color-on-primary);padding:.75rem;position:sticky;text-align:center;width:100%}.web-dismissible-banner>.web-dismissible-banner-content{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin:0 auto;max-width:var(--ui-container);padding:0 calc(var(--ui-spacing)*4);text-align:start}.tree-link-card{align-items:center;background:var(--color-primary);border-radius:calc(var(--ui-spacing)*2);color:var(--color-on-primary);display:flex;height:calc(var(--ui-spacing)*14);margin-bottom:calc(var(--ui-spacing)*1);padding:0 calc(var(--ui-spacing)*6);padding-left:calc(var(--ui-spacing)*14)}.tree-link-card:has(.material-symbols-outlined),.tree-link-card:has(.tree-link-card-img){padding-left:calc(var(--ui-spacing)*2)}.tree-link-card:focus-visible,.tree-link-card:hover{background:var(--color-inverse);color:var(--color-on-inverse)}.tree-link-card:active{opacity:.8}.tree-link-card .material-symbols-outlined,.tree-link-card-img{align-items:center;border-radius:50%;display:flex;height:calc(var(--ui-spacing)*10);justify-content:center;margin-right:calc(var(--ui-spacing)*2);width:calc(var(--ui-spacing)*10)}.tree-link-card:focus-visible .material-symbols-outlined,.tree-link-card:hover .material-symbols-outlined{background:var(--color-container);font-variation-settings:"FILL" 1}.tree-link-card-content{display:flex;flex-direction:column}.tree-link-card-content-desc{color:var(--color-outline-very-intense);font-size:12px}.tree-link-card:focus-visible .tree-link-card-content-desc,.tree-link-card:hover .tree-link-card-content-desc{color:var(--color-primary-strong)}a.tree-link-card{cursor:pointer}.frosted-glass-backdrop-dynamic{backdrop-filter:blur(36px);-webkit-backdrop-filter:(36px);background:var(--color-surface-container-glass);inset:0;position:fixed;z-index:-10}pre.codebox{background:var(--color-inverse-surface-container);border-radius:calc(var(--ui-spacing)*2);color:var(--color-on-inverse-surface-container);font-family:var(--font-mono);font-size:12px;padding:calc(var(--ui-spacing)*3)}