: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:#b4235a1f;--color-dot-grid:#00000017;--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 #0000000f;--shadow-lift:0 18px 50px #0000001a;--hero-atmosphere-top:calc(1.5rem + 60px + 1rem + 7rem);--hero-atmosphere-bottom:0;--hero-atmosphere-fade-start:50%;--hero-atmosphere-fade-end:100%;--about-atmosphere-bleed-bottom:4rem;--about-atmosphere-fade-start:38%;--about-atmosphere-fade-end:100%;--about-cta-bg:linear-gradient(135deg, oklch(78% .13 290) 0%, oklch(74% .11 278) 40%, #d4e8ff 100%);--about-cta-fg:#03051c;--about-cta-ring:oklab(76.2633% -.0280927 -.119383/.45);--about-cta-focus:#a8cdff;--chart-1:oklch(39.8% .07 227.392);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(64.6% .222 41.116);--mermaid-node-bg:#f3f4f8;--mermaid-node-border:#c4cad6;--mermaid-node-text:#1a1a1a;--mermaid-subgraph-bg:#e8ebf2;--mermaid-subgraph-border:oklab(78.5448% -.00621938 -.0530954);--mermaid-subgraph-title:#5c6370;--mermaid-line:#7a8190;--mermaid-edge-label-bg:#f8f9fc;--mermaid-edge-label-text:#1a1a1a;--mermaid-accent:#2563eb;--mermaid-accent-soft:#e8eefb;--mermaid-c-light-bg:#f0f9ff;--mermaid-c-light-border:#7dd3fc;--mermaid-c-light-text:#0369a1;--mermaid-c-dark-bg:#eef2ff;--mermaid-c-dark-border:#6366f1;--mermaid-c-dark-text:#312e81;--mermaid-c-cluster-default-bg:oklab(90.4369% -.00281828 -.0282727);--mermaid-c-cluster-default-border:oklab(72.7083% -.0112076 -.0922303);--mermaid-c-cluster-product-bg:oklab(90.8853% -.0113975 -.0057437);--mermaid-c-cluster-product-border:oklab(74.6015% -.0474311 .0028922);--mermaid-c-source-bg:#f3f4f8;--mermaid-c-source-border:#6366f1;--mermaid-c-source-text:#3730a3;--mermaid-c-hub-bg:#e8eefb;--mermaid-c-hub-border:#2563eb;--mermaid-c-hub-text:#1e3a8a;--mermaid-c-web-bg:#dbeafe;--mermaid-c-web-border:#2563eb;--mermaid-c-web-text:#1e3a8a;--mermaid-c-ios-bg:#ede9fe;--mermaid-c-ios-border:#7c3aed;--mermaid-c-ios-text:#4c1d95;--mermaid-c-android-bg:#dcfce7;--mermaid-c-android-border:#16a34a;--mermaid-c-android-text:#14532d;--mermaid-c-accent-bg:#dcfce7;--mermaid-c-accent-border:#16a34a;--mermaid-c-accent-text:#14532d;--mermaid-c-attention-bg:#fff7ed;--mermaid-c-attention-border:#f97316;--mermaid-c-attention-text:#9a3412;--mermaid-c-info-bg:#dbeafe;--mermaid-c-info-border:#2563eb;--mermaid-c-info-text:#1e3a8a;--mermaid-c-muted-bg:#f3f4f6;--mermaid-c-muted-border:#9ca3af;--mermaid-c-muted-text:#4b5563;--mermaid-c-desktop-bg:#dbeafe;--mermaid-c-desktop-border:#3b82f6;--mermaid-c-desktop-text:#1e3a8a;--mermaid-c-mobile-bg:#f3e8ff;--mermaid-c-mobile-border:#a855f7;--mermaid-c-mobile-text:#581c87;--mermaid-c-fallback-link:#9ca3af;--case-highlight-bg:oklab(92.4192% -.0212625 .137004)}@media (width<=767px){:root{--hero-atmosphere-top:calc(1.5rem + 60px + 2.5rem + 3.5rem)}}@media (width>=1024px) and (width<=1799px){:root{--max-width:min(1200px, calc(100vw - 3rem));--space-page:2.25rem}}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:#a0acdc1f;--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(90% .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:#f472b624;--shadow-soft:0 10px 30px #00000059;--shadow-lift:0 18px 50px #00000080;--about-cta-bg:linear-gradient(135deg, oklch(66% .17 290) 0%, oklch(62% .15 275) 40%, #a8cdff 100%);--mermaid-node-bg:#0f1433;--mermaid-node-border:#3a4578;--mermaid-node-text:#e8eaf4;--mermaid-subgraph-bg:#0a0e28;--mermaid-subgraph-border:oklab(44.3799% -.00268389 -.0988648);--mermaid-subgraph-title:#949cbd;--mermaid-line:#6b7394;--mermaid-edge-label-bg:#0c1130;--mermaid-edge-label-text:#e8eaf4;--mermaid-accent:#7eb4ff;--mermaid-accent-soft:#121a3d;--mermaid-c-light-bg:#155e75;--mermaid-c-light-border:#67e8f9;--mermaid-c-light-text:#f0fdfa;--mermaid-c-dark-bg:#3730a3;--mermaid-c-dark-border:#a5b4fc;--mermaid-c-dark-text:#faf5ff;--mermaid-c-cluster-default-bg:oklab(25.9627% -.00137384 -.0622915);--mermaid-c-cluster-default-border:oklab(51.9312% -.00870176 -.103724);--mermaid-c-cluster-product-bg:oklab(26.107% -.0180149 -.0393754);--mermaid-c-cluster-product-border:oklab(52.3643% -.0586249 -.0349757);--mermaid-c-source-bg:#121a3d;--mermaid-c-source-border:#818cf8;--mermaid-c-source-text:#e0e7ff;--mermaid-c-hub-bg:#0f1d4a;--mermaid-c-hub-border:#7eb4ff;--mermaid-c-hub-text:#dbeafe;--mermaid-c-web-bg:#0f1d4a;--mermaid-c-web-border:#60a5fa;--mermaid-c-web-text:#dbeafe;--mermaid-c-ios-bg:#1e1033;--mermaid-c-ios-border:#a78bfa;--mermaid-c-ios-text:#ede9fe;--mermaid-c-android-bg:#052e16;--mermaid-c-android-border:#4ade80;--mermaid-c-android-text:#dcfce7;--mermaid-c-accent-bg:#052e16;--mermaid-c-accent-border:#4ade80;--mermaid-c-accent-text:#dcfce7;--mermaid-c-attention-bg:#431407;--mermaid-c-attention-border:#fb923c;--mermaid-c-attention-text:#ffedd5;--mermaid-c-info-bg:#0f1d4a;--mermaid-c-info-border:#60a5fa;--mermaid-c-info-text:#dbeafe;--mermaid-c-muted-bg:#111827;--mermaid-c-muted-border:#6b7280;--mermaid-c-muted-text:#d1d5db;--mermaid-c-desktop-bg:#0f1d4a;--mermaid-c-desktop-border:#60a5fa;--mermaid-c-desktop-text:#dbeafe;--mermaid-c-mobile-bg:#2e1065;--mermaid-c-mobile-border:#c084fc;--mermaid-c-mobile-text:#f3e8ff;--mermaid-c-fallback-link:#6b7394;--case-highlight-bg:color-mix(in oklab, #056af7 22%, var(--color-bg));--case-highlight-fg:var(--color-link-strong)}*,:before,:after{box-sizing:border-box}html{font-display:swap;scroll-behavior:smooth;background-color:var(--color-bg);color-scheme:light;font-size:18px}html:before{content:"";z-index:-1;background-color:var(--color-bg);pointer-events:none;position:fixed;inset:0}html.dark{color-scheme:dark}body{color:var(--color-text);background-color:#0000;transition:color .1s;overflow-x:hidden}html,body{font-family:var(--font-sans);margin:0;padding:0;font-size:18px;line-height:1.6}a{color:var(--color-link);text-decoration:none}a:hover{text-decoration:none}a:not(.logo-link){transition:color .12s}a:not(.logo-link):not(.home-footer__cta):hover{color:var(--color-link-strong);text-decoration-color:color-mix(in oklab, currentColor 85%, transparent)}::selection{background:var(--color-accent-soft)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.content-wrapper{width:100%;max-width:var(--max-width);padding:0 var(--space-page);margin-left:auto;margin-right:auto}@media (width<=563px){.content-wrapper{padding:0 1rem}}h1{font-family:var(--font-serif);margin:0 0 1rem;font-size:2.4em;font-weight:200;line-height:1.3}.post-title{margin-bottom:2.5rem}h2{margin:0 0 .8em;scroll-margin-top:.5em;font-size:1.6em;font-weight:300;line-height:1.3}h3{margin:0 0 .6em;scroll-margin-top:.5em;font-size:1.1em;font-weight:400;line-height:1.6}h4{text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin:0 0 .6em;font-size:.8em;font-weight:500}p{color:var(--color-text-muted);margin:0 0 2em}.notes{color:var(--color-text-muted);font-size:.875rem}code{background:color-mix(in oklab, var(--color-code-bg) 50%, var(--color-bg));border-radius:3px;padding:0 .2em;font-family:ui-monospace,monospace;font-size:.9em}button{font:inherit;cursor:pointer;background:0 0;border:none}button:focus{outline:none}button:focus-visible{outline:2px solid var(--color-link);outline-offset:2px}.site-header{background:0 0;border:none;margin-bottom:2.5rem;padding-top:1.5rem;position:static}@media (width>=768px){.site-header{margin-bottom:1rem}}.site-header .content-wrapper{justify-content:space-between;align-items:center;min-height:60px;display:flex}.site-nav ul{align-items:baseline;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.site-nav a{color:var(--color-text);opacity:.85}.site-nav a:hover{opacity:1;text-decoration:none}.site-nav a:not(.logo-link){gap:8px;padding:.25rem .75rem;transition:color .15s,opacity .15s;display:flex}.site-nav a.is-active{opacity:1;font-weight:500}.logo-link{margin-right:.5rem;font-weight:500}.theme-toggle{color:var(--color-text);border-radius:999px;padding:.75rem;line-height:0}.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,html.dark .theme-toggle .icon-sun{display:none}html.dark .theme-toggle:hover{box-shadow:inset 0 0 0 1px var(--color-border);background:0 0}html.dark .tag-btn.is-active,html.dark .tag-btn:hover{border-color:var(--color-link);background:0 0}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:2.25rem;padding-bottom:4rem}@media (width>=768px){.layout-main{margin-top:3.5rem}}.prose{max-width:650px;line-height:1.75}.prose img{border-radius:6px;max-width:100%;display:block}.prose pre{border:1px solid var(--color-border);background:var(--color-code-bg);border-radius:6px;margin-bottom:2em;padding:1rem;overflow-x:auto}.prose pre code{background:0 0;padding:0}.astro-code,.astro-code span{color:var(--shiki-light);background-color:var(--shiki-light-bg);font-style:var(--shiki-light-font-style);font-weight:var(--shiki-light-font-weight);text-decoration:var(--shiki-light-text-decoration)}html.dark .astro-code,html.dark .astro-code span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}.prose pre.astro-code{background-color:var(--color-code-bg)!important}.prose pre.astro-code span{background-color:#0000!important}.prose figure{margin:2em 0}.prose figure img{margin-bottom:0}.prose figcaption{color:var(--color-text-muted);margin-top:.5rem;font-size:.875rem}.prose>:first-child{margin-top:0;padding-top:0}.prose h2{margin-top:1.4em;margin-bottom:.8em;padding-top:20px;font-size:1.5em;font-weight:400;line-height:1.33333}.prose h3{margin-top:1.6em;margin-bottom:.6em;font-size:1.25em;font-weight:400;line-height:1.6}.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:"#";opacity:.5;color:var(--color-text-muted);padding-right:1rem;transition:opacity .1s ease-in;position:absolute;left:-1.875rem}.prose h2 .heading-anchor:hover:before,.prose h3 .heading-anchor:hover:before{opacity:1}@media (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);color:var(--color-text-muted);margin-left:0;padding-left:1rem}.prose ul{margin:0 0 2em;padding:0;list-style:none}.prose ul>li{color:var(--color-text-muted);margin-bottom:.5em;padding-left:1.25rem;line-height:1.75;position:relative}.prose ul>li:last-child{margin-bottom:0}.prose ul>li:before{content:"·";color:color-mix(in oklab, var(--color-text-muted) 55%, transparent);position:absolute;left:0}.prose ul>li strong{color:color-mix(in oklab, var(--color-text-muted) 55%, var(--color-text));font-weight:600}.prose>ol:not(.toc-level)>li{color:var(--color-text-muted);line-height:1.75}.prose>ol:not(.toc-level)>li strong{color:color-mix(in oklab, var(--color-text-muted) 55%, var(--color-text));font-weight:600}.prose .case-highlight{background:var(--case-highlight-bg);color:var(--case-highlight-fg,inherit);box-decoration-break:clone;border-radius:.15em;margin-inline:-.06em;padding:.08em .18em}.compare{grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0;display:grid}.compare--devices{grid-template-columns:minmax(0,2.75fr) minmax(0,1fr);align-items:start}.compare figure{margin:0}.compare img{border:1px solid var(--color-border);border-radius:6px;width:100%;display:block}.compare figcaption{color:color-mix(in oklab, var(--color-text-muted) 88%, var(--color-text));margin-top:.5rem;font-size:.8125rem;font-style:italic;line-height:1.55}.compare-label{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);margin:0 0 .35rem;font-size:.75rem;font-weight:600}@media (width<=640px){.compare{grid-template-columns:1fr}}.article-wrapper{position:relative}.article-post:not(.case-study){padding-bottom:3rem}.prose .toc{width:200px;height:100%;transition:opacity .2s ease-in-out;position:absolute;top:0;right:0}.prose .toc ol{margin:0;padding:0;list-style:none;position:sticky;top:60px}.prose .toc ol>li{margin-bottom:.75rem;padding-left:0;line-height:1.4}.prose .toc ol>li:before{content:none}.prose .toc a{color:var(--color-text-muted);font-size:14px;font-weight:400;text-decoration:none;display:block}.prose .toc a:hover{color:var(--color-text);text-decoration:none}.prose .toc a.is-active{color:var(--color-text);font-weight:600}.prose>ol:not(.toc-level){margin-bottom:2.5em}@media screen and (width<=1060px){.prose .toc{opacity:0;pointer-events:none;width:0;height:0;overflow:hidden}.article-wrapper .prose,.article-footer,.case-study-footer{max-width:none}.scroll-top{display:none}}.article-footer,.case-study-footer{border-top:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem 1.5rem;max-width:650px;margin-top:2.5rem;padding-top:1.25rem;font-size:.8125rem;line-height:1.4;display:flex}.article-footer a,.case-study-footer a{color:var(--color-text-muted);transition:color .12s}.article-footer a:hover,.article-footer a:focus-visible,.case-study-footer a:hover,.case-study-footer a:focus-visible{color:var(--color-link)}.article-footer .notes{font-size:inherit;color:color-mix(in oklab, var(--color-text-muted) 88%, var(--color-text));margin:0}.scroll-top{z-index:40;cursor:pointer;color:#6b7280;opacity:0;pointer-events:none;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:20px;line-height:1;transition:opacity .2s ease-in-out;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 1px 4px #0000001f}.scroll-top:hover{opacity:.85}.scroll-top.is-visible{opacity:1;pointer-events:auto}.scroll-top.is-visible:hover{opacity:.85}.blog-intro{margin-bottom:2.5rem;font-size:1.25rem;font-weight:300}.blog-layout{grid-template-columns:minmax(0,1fr) minmax(13rem,16rem);align-items:start;gap:3rem;display:grid}.blog-layout>section{width:100%;min-width:0}.blog-layout>aside{min-width:0}@media (width<=900px){.blog-layout{flex-direction:column-reverse;gap:2rem;display:flex}.tag-list{position:static}}.tag-list{flex-wrap:wrap;gap:.75rem;margin:0;padding:0;list-style:none;display:flex;position:sticky;top:5rem}.tag-btn{border:1px solid var(--color-border);text-transform:capitalize;color:var(--color-text);border-radius:999px;padding:.35rem .85rem;font-size:.875rem}.tag-btn.is-active,.tag-btn:hover{background:var(--color-surface)}.post-list{width:100%;margin:0;padding:0;list-style:none}.post-preview{color:inherit;margin-bottom:3rem;display:block}.post-preview:hover{text-decoration:none}.post-preview h2{font-family:var(--font-serif);margin-bottom:.35em;font-size:1.35em}.post-preview-inner{gap:1.5rem;display:flex}.post-preview-thumb{background:var(--color-surface);border-radius:4px;flex-shrink:0;width:120px;height:80px;overflow:hidden}.post-preview-thumb img{object-fit:cover;width:100%;height:100%}.post-preview-desc{color:var(--color-text-muted);margin-bottom:.5em;font-size:.95em}.work-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin:0;padding:0;list-style:none;display:grid}.work-card{border:1px solid var(--color-border);border-radius:8px;transition:border-color .15s;overflow:hidden}.work-card:hover{border-color:var(--color-link);text-decoration:none}.work-card-body{padding:1.25rem}.work-card h2{margin-bottom:.5em;font-size:1.15em}.case-study-grid{grid-template-columns:minmax(280px,1fr) 1fr;gap:2rem;margin:2rem 0 3rem;display:grid}@media (width<=900px){.case-study-grid{grid-template-columns:1fr}}.screenshot-gallery{flex-direction:column;gap:1rem;display:flex}.screenshot-item img{border:1px solid var(--color-border);border-radius:6px;width:100%}.screenshot-item figcaption{color:var(--color-text-muted);margin-top:.35rem;font-size:.875rem}