:root{--color-bg: #e9eaef;--color-bg-elevated: #f3f4f8;--color-text: #1a1a1a;--color-text-muted: #5c6370;--color-link: #2563eb;--color-link-strong: #1d4ed8;--color-border: #d5d8e2;--color-surface: #dfe2ea;--color-surface-2: #d5d8e2;--color-fill-muted: var(--color-surface);--color-code-bg: #d8dce6;--color-accent: #b4235a;--color-accent-soft: rgba(180, 35, 90, .12);--color-dot-grid: rgba(0, 0, 0, .09);--title-focus: oklch(.52 .15 290);--gradient-word: linear-gradient( 108deg, oklch(.55 .17 286) 0%, oklch(.53 .16 292) 50%, oklch(.51 .15 298) 100% );--gradient-word-fallback: #6b5ce7;--font-serif: "Georgia", "Times New Roman", serif;--font-sans: Inter, Roboto, sans-serif;--max-width: 1100px;--space-page: 4rem;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--shadow-soft: 0 10px 30px rgba(0, 0, 0, .06);--shadow-lift: 0 18px 50px rgba(0, 0, 0, .1);--hero-atmosphere-top: calc(9.5rem + 60px) ;--hero-atmosphere-bottom: 0;--hero-atmosphere-fade-start: 50%;--hero-atmosphere-fade-end: 100%;--chart-1: oklch(.398 .07 227.392);--chart-2: oklch(.6 .118 184.704);--chart-3: oklch(.646 .222 41.116)}@media(max-width:767px){:root{--hero-atmosphere-top: calc(16rem + 60px) }}html.dark{--color-bg: #03051c;--color-bg-elevated: #03051c;--color-surface: #03051c;--color-surface-2: #03051c;--color-fill-muted: #03051c;--color-border: #2a3368;--color-code-bg: #0c1130;--color-dot-grid: rgba(160, 172, 220, .12);--hero-glow-a: oklch(.32 .1 286 / .55);--hero-glow-b: oklch(.28 .08 268 / .45);--hero-glow-c: oklch(.26 .06 248 / .35);--hero-glow-bloom: 12%;--title-focus: oklch(.78 .09 285);--gradient-word: linear-gradient( 108deg, oklch(.9 .11 286) 0%, oklch(.92 .09 272) 50%, oklch(.94 .07 255) 100% );--gradient-word-fallback: #c4b5fd;--color-text: #e8eaf4;--color-text-muted: #949cbd;--color-link: #7eb4ff;--color-link-strong: #a8cdff;--color-accent: #f472b6;--color-accent-soft: rgba(244, 114, 182, .14);--shadow-soft: 0 10px 30px rgba(0, 0, 0, .35);--shadow-lift: 0 18px 50px rgba(0, 0, 0, .5)}*,*:before,*:after{box-sizing:border-box}html{font-size:18px;font-display:swap;scroll-behavior:smooth;background:var(--color-bg);overflow-x:clip}body{background:var(--color-bg);color:var(--color-text);transition:background-color .2s ease,color .1s ease}html,body{font-family:var(--font-sans);margin:0;padding:0;line-height:1.6;font-size:18px}a{color:var(--color-link);text-decoration:none}a:hover{text-decoration:none}a:not(.logo-link){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:color-mix(in oklab,currentColor 30%,transparent);transition:color .12s ease,text-decoration-color .12s ease}a:not(.logo-link):hover{color:var(--color-link-strong);text-decoration-color:color-mix(in oklab,currentColor 85%,transparent)}::selection{background:var(--color-accent-soft)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.content-wrapper{width:100%;max-width:var(--max-width);margin-left:auto;margin-right:auto;padding:0 var(--space-page)}@media(max-width:563px){.content-wrapper{padding:0 1rem}}h1{font-family:var(--font-serif);font-size:2.4em;font-weight:200;line-height:1.3;margin:0 0 1rem}.post-title{margin-bottom:2.5rem}h2{font-size:1.6em;font-weight:300;line-height:1.3;margin:0 0 .8em;scroll-margin-top:.5em}h3{font-size:1.1em;font-weight:400;line-height:1.6;margin:0 0 .6em;scroll-margin-top:.5em}h4{font-size:.8em;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin:0 0 .6em}p{color:var(--color-text-muted);margin:0 0 2em}.notes{font-size:.875rem;color:var(--color-text-muted)}code{background:var(--color-code-bg);border-radius:3px;padding:0 .2em;font-family:ui-monospace,monospace;font-size:.9em}button{font:inherit;cursor:pointer;border:none;background:none}button:focus{outline:none}button:focus-visible{outline:2px solid var(--color-link);outline-offset:2px}.site-header{position:static;background:transparent;border:none;padding-top:1.5rem;margin-bottom:7.5rem}@media(min-width:768px){.site-header{margin-bottom:1rem}}.site-header .content-wrapper{display:flex;align-items:center;justify-content:space-between;min-height:60px}.site-nav ul{display:flex;align-items:baseline;gap:1rem;list-style:none;margin:0;padding:0}.site-nav a{color:var(--color-text);opacity:.85}.site-nav a:hover{opacity:1;text-decoration:none}.site-nav a:not(.logo-link){position:relative;display:inline-block;padding:.25rem .75rem;border-radius:6px}.site-nav a.is-active:before{content:"";position:absolute;inset:0;background:var(--color-surface);border-radius:6px;z-index:-1}.logo-link{font-weight:500;margin-right:.5rem}.theme-toggle{padding:.75rem;border-radius:999px;line-height:0;color:var(--color-text)}.theme-toggle:hover{background:var(--color-surface)}.theme-toggle svg{width:1.25rem;height:1.25rem}.theme-toggle svg path{fill:currentColor}.theme-toggle .icon-sun,.theme-toggle .icon-moon{display:block}html:not(.dark) .theme-toggle .icon-moon{display:none}html.dark .theme-toggle .icon-sun{display:none}html.dark .site-nav a.is-active:before{background:transparent;box-shadow:inset 0 0 0 1px var(--color-border)}html.dark .theme-toggle:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--color-border)}html.dark .tag-btn.is-active,html.dark .tag-btn:hover{background:transparent;border-color:var(--color-link)}html.dark .post-preview-thumb{background:var(--color-bg)}html.dark .scroll-top{background:var(--color-bg);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-border)}.layout-main{margin-top:7rem;margin-bottom:4rem}.prose{max-width:650px;line-height:1.75}.prose img{display:block;max-width:100%;width:auto;height:auto;border-radius:6px}.prose pre{overflow-x:auto;padding:1rem;border-radius:6px;margin-bottom:2em}.prose pre code{background:none;padding:0}.prose figure{margin:2em 0}.prose figure img{margin-bottom:0}.prose figcaption{font-size:.875rem;color:var(--color-text-muted);margin-top:.5rem}.prose>:first-child{margin-top:0;padding-top:0}.prose h2{font-size:1.5em;font-weight:400;line-height:1.3333333;margin-top:1.4em;padding-top:20px;margin-bottom:.8em}.prose h3{font-size:1.25em;font-weight:400;line-height:1.6;margin-top:1.6em;margin-bottom:.6em}.prose h4{font-size:1em;line-height:1.6}html.dark .prose h2,html.dark .prose h3{font-weight:300}.prose h2,.prose h3{position:relative}.prose h2 .heading-anchor,.prose h3 .heading-anchor{color:inherit;text-decoration:none}.prose h2:hover .heading-anchor:before,.prose h3:hover .heading-anchor:before{content:"#";position:absolute;left:-1.875rem;padding-right:1rem;opacity:.5;color:var(--color-text-muted);transition:opacity .1s ease-in}.prose h2 .heading-anchor:hover:before,.prose h3 .heading-anchor:hover:before{opacity:1}@media(max-width:639px){.prose h2:hover .heading-anchor:before,.prose h3:hover .heading-anchor:before{content:none}}.prose blockquote{border-left:3px solid var(--color-border);padding-left:1rem;margin-left:0;color:var(--color-text-muted)}.article-wrapper{position:relative}.article-post{margin-bottom:8rem}.prose .toc{position:absolute;top:0;right:0;width:200px;height:100%;transition:opacity .2s ease-in-out}.prose .toc ol{position:sticky;top:60px;margin:0;padding:0;list-style:none}.prose .toc ol>li{padding-left:0;line-height:1.4;margin-bottom:.75rem}.prose .toc ol>li:before{content:none}.prose .toc a{font-weight:400;font-size:14px;color:var(--color-text-muted);text-decoration:none;display:block}.prose .toc a:hover{color:var(--color-text);text-decoration:none}.prose .toc a.is-active{font-weight:600;color:var(--color-text)}.prose>ol:not(.toc-level){margin-bottom:2.5em}@media screen and (max-width:1060px){.prose .toc{opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.article-wrapper .prose{max-width:none}.scroll-top{display:none}}.article-footer{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--color-border);padding:2rem 0;margin-top:2rem}.scroll-top{position:fixed;right:20px;bottom:20px;z-index:40;width:40px;height:40px;padding:0;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:pointer;background:#fff;color:#6b7280;box-shadow:0 1px 4px #0000001f;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.scroll-top:hover{opacity:.85}.scroll-top.is-visible{opacity:1;pointer-events:auto}.scroll-top.is-visible:hover{opacity:.85}.blog-intro{font-size:1.25rem;font-weight:300;margin-bottom:2.5rem}.blog-layout{display:flex;gap:3rem;justify-content:space-between}@media(max-width:900px){.blog-layout{flex-direction:column-reverse}}.tag-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem;position:sticky;top:5rem}.tag-btn{padding:.35rem .85rem;border-radius:999px;border:1px solid var(--color-border);font-size:.875rem;text-transform:capitalize;color:var(--color-text)}.tag-btn.is-active,.tag-btn:hover{background:var(--color-surface)}.post-list{list-style:none;margin:0;padding:0}.post-preview{display:block;color:inherit;margin-bottom:3rem}.post-preview:hover{text-decoration:none}.post-preview h2{font-family:var(--font-serif);font-size:1.35em;margin-bottom:.35em}.post-preview-inner{display:flex;gap:1.5rem}.post-preview-thumb{flex-shrink:0;width:120px;height:80px;border-radius:4px;overflow:hidden;background:var(--color-surface)}.post-preview-thumb img{width:100%;height:100%;object-fit:cover}.post-preview-desc{color:var(--color-text-muted);font-size:.95em;margin-bottom:.5em}.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;list-style:none;margin:0;padding:0}.work-card{border:1px solid var(--color-border);border-radius:8px;overflow:hidden;transition:border-color .15s}.work-card:hover{border-color:var(--color-link);text-decoration:none}.work-card-body{padding:1.25rem}.work-card h2{font-size:1.15em;margin-bottom:.5em}.lock-badge{font-size:.75rem;margin-left:.35em}.case-study-grid{display:grid;grid-template-columns:minmax(280px,1fr) 1fr;gap:2rem;margin:2rem 0 3rem}@media(max-width:900px){.case-study-grid{grid-template-columns:1fr}}.screenshot-gallery{display:flex;flex-direction:column;gap:1rem}.screenshot-item img{width:100%;border-radius:6px;border:1px solid var(--color-border)}.screenshot-item figcaption{font-size:.875rem;color:var(--color-text-muted);margin-top:.35rem}