:root{--color-brand:#22baed;--color-brand-mid:#3d9ad4;--color-brand-deep:#237fad;--color-icon:#429ad1;--color-action:#1a5e87;--color-action-hover:#134766;--color-link:#1a6ea3;--color-link-hover:#134766;--color-text:#333333;--color-text-soft:#555555;--color-muted:#6b7378;--color-bg:#ffffff;--color-bg-soft:#f2f2f2;--color-border:#dddddd;--color-footer:#1c2833;--color-code-bg:#2b2b2b;--color-code-text:#e8e8e8;--color-focus:#f5a623;--font-sans:"Helvetica Neue", Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--text-xs:0.8125rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);--text-hero:clamp(2rem, 1.2rem + 3.4vw, 4rem);--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4.5rem;--radius-sm:3px;--radius-md:6px;--radius-phone:clamp(22px, 4vw, 50px);--shadow-header:0 0 10px #cccccc;--shadow-card:0 2px 10px rgba(0, 0, 0, 0.18);--shadow-card-hover:0 6px 20px rgba(0, 0, 0, 0.22);--shadow-phone:0 40px 80px rgba(0, 0, 0, 0.55);--container:1170px;--container-narrow:820px;--gutter:16px;--header-height:72px}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 8px);-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6;color:var(--color-text);background:var(--color-bg)}img,video,svg{max-width:100%;height:auto}a{color:var(--color-link)}a:hover{color:var(--color-link-hover)}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}h1,h2,h3,h4{line-height:1.25;color:var(--color-text)}h1{font-size:var(--text-2xl);margin:0 0 var(--space-5)}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:#fff;padding:var(--space-2)var(--space-4)}.skip-link:focus{top:var(--space-2)}a[target=_blank]::after{content:"\2009↗";font-size:.85em}.brand::after,.github-badge::after,.sponsor a::after{content:none!important}.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}.container-narrow{max-width:var(--container-narrow)}.section{padding:var(--space-8)0}.section-tight{padding:var(--space-6)0 var(--space-8)}.section-title{text-align:center;font-size:var(--text-2xl);font-weight:500;margin:0 0 var(--space-6)}.section-cta{text-align:center;margin:var(--space-6)0 0}.btn{display:inline-block;padding:10px 20px;border:0;border-radius:var(--radius-sm);background:var(--color-action);color:#fff;font:inherit;font-size:var(--text-sm);font-weight:600;line-height:1.5;text-decoration:none;cursor:pointer}.btn:hover,.btn:focus-visible{background:var(--color-action-hover);color:#fff}.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:var(--shadow-header)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-height);gap:var(--space-4)}.brand{display:block;line-height:0}.brand img{width:clamp(140px,14vw,180px);height:auto}.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--space-6)}.nav-link{color:var(--color-text);font-size:var(--text-sm);font-weight:600;text-decoration:none;padding:var(--space-2)0}.nav-link:hover,.nav-link[aria-current=page]{color:var(--color-action)}.nav-toggle{display:none}@media(max-width:860px){.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;cursor:pointer}.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:20px;height:2px;background:var(--color-text);position:relative;content:""}.nav-toggle-bars::before{position:absolute;top:-6px}.nav-toggle-bars::after{position:absolute;top:6px}.site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 8px 10px rgba(0,0,0,.12)}.site-nav.is-open{display:block}.site-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:var(--space-2)var(--gutter)var(--space-4)}.site-nav li a{display:block;padding:var(--space-3)0}.site-nav li .btn{text-align:center;margin-top:var(--space-2)}}.hero{position:relative;overflow:hidden;background:var(--color-brand-mid)url(/images/brand/hero-background.svg)50% 100%/cover no-repeat;padding:var(--space-7)0 var(--space-8);color:#fff}.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,7fr)minmax(0,3fr);gap:var(--space-6);align-items:end}.hero h1{color:#fff;font-size:var(--text-hero);font-weight:700;line-height:1.12;margin:0 0 var(--space-6)}.phone{position:relative;background:#000;border-radius:var(--radius-phone);padding:clamp(8px,1.4vw,18px)clamp(14px,3vw,44px);box-shadow:var(--shadow-phone),inset 0 0 10px #999;max-width:1e3px}.phone-screen{position:relative;overflow:hidden;border-radius:6px;background:#000;aspect-ratio:996/428}.phone-notch{position:absolute;left:calc(-1 * clamp(14px,3vw,44px));top:22%;bottom:22%;width:clamp(8px,1.6vw,22px);background:#000;border-radius:0 12px 12px 0;z-index:3}.demo-clip,.demo-clip>div,.demo-clip video{width:100%;height:100%}.demo-clip video{display:block;object-fit:cover;background:#000}.skip-ad{position:absolute;right:0;bottom:22%;z-index:4;padding:var(--space-2)var(--space-4);background:rgba(0,0,0,.75);color:#fff;border:1px solid rgba(255,255,255,.5);border-right:0;font:inherit;font-size:var(--text-sm);cursor:pointer;transform:translateX(100%);transition:transform .4s ease}.skip-ad.is-visible{transform:translateX(0)}.demo-menu{background:rgba(255,255,255,.95);color:var(--color-text);border-radius:var(--radius-md);padding:var(--space-5)var(--space-5)var(--space-6);box-shadow:var(--shadow-card)}.demo-menu ul{list-style:none;margin:0 0 var(--space-5);padding:0;position:relative}.demo-menu ul::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;background:#cfe8f6}.demo-menu li button{position:relative;display:block;width:100%;text-align:left;padding:var(--space-2)0 var(--space-2)28px;background:0 0;border:0;font:inherit;font-size:var(--text-sm);color:var(--color-text-soft);cursor:pointer}.demo-menu li button::before{content:"";position:absolute;left:2px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#cfe8f6;transition:transform .2s,background .2s}.demo-menu li button:hover{color:var(--color-action)}.demo-menu li button[aria-pressed=true]{color:var(--color-text);font-weight:600}.demo-menu li button[aria-pressed=true]::before{background:var(--color-brand);transform:scale(1.4)}.hero-blobs span{position:absolute;border-radius:50%;background:rgba(34,186,237,.55);animation:blob-float 18s ease-in-out infinite alternate}.hero-blobs span:nth-child(1){width:120px;height:90px;right:12%;top:18%}.hero-blobs span:nth-child(2){width:70px;height:60px;right:4%;top:55%;animation-duration:22s}.hero-blobs span:nth-child(3){width:90px;height:70px;left:8%;bottom:6%;background:rgba(255,255,255,.85);animation-duration:26s}.hero-blobs span:nth-child(4){width:50px;height:50px;left:40%;bottom:3%;animation-duration:20s}@keyframes blob-float{0%{transform:translate(0,0)scale(1)}50%{transform:translate(-30px,20px)scale(1.12,.92)}100%{transform:translate(20px,-25px)scale(.94,1.08)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-blobs span{animation:none}.skip-ad{transition:none}}@media(max-width:900px){.hero{padding:var(--space-6)0 var(--space-7);background-position:30% 100%}.hero-inner{grid-template-columns:1fr;align-items:start}.demo-menu ul{display:flex;flex-wrap:wrap;gap:var(--space-1)var(--space-4)}.demo-menu ul::before{display:none}.demo-menu li button{padding-left:20px}.demo-menu li button::before{left:0}.hero-blobs{display:none}}.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)var(--space-6)}.feature{text-align:center}.feature img{width:64px;height:64px;display:block;margin:0 auto var(--space-4)}.feature p{margin:0 auto;max-width:280px;font-size:var(--text-sm);color:var(--color-text-soft)}.feature p a{font-weight:600}@media(max-width:760px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:460px){.features{grid-template-columns:1fr}}.builder{background:var(--color-bg-soft)}.builder-head{position:relative;text-align:center;margin-bottom:var(--space-6)}.builder-head .section-title{margin-bottom:var(--space-3)}.builder-intro{max-width:760px;margin:0 auto;font-size:var(--text-sm);color:var(--color-text-soft)}.github-badge{position:absolute;right:0;top:-12px;display:block;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:var(--shadow-card);padding:4px}.github-badge img{display:block;width:100%;height:100%}.builder-grid{display:grid;grid-template-columns:minmax(0,7fr)minmax(0,5fr);gap:var(--space-6);align-items:start}.builder-video{background:#000;aspect-ratio:16/9}.builder-video>div,.builder-video video{width:100%;height:100%}.builder-video .fluid_video_wrapper{width:100%!important;height:100%!important;max-width:100%}.builder-preview{min-width:0}.builder-code pre{margin:var(--space-3)0 0;max-height:260px;overflow:auto;background:var(--color-code-bg);color:var(--color-code-text);padding:var(--space-4);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.75rem;line-height:1.5}.builder-copy{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-3)0 0}.copy-status{font-size:var(--text-sm);color:var(--color-action)}.tab-list{display:flex;flex-wrap:wrap;gap:var(--space-1)var(--space-5);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-5)}.tab{background:0 0;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:var(--space-2)0;font:inherit;font-size:var(--text-sm);color:var(--color-link);cursor:pointer}.tab.is-active{color:var(--color-text);font-weight:600;border-bottom-color:var(--color-action)}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)var(--space-5);margin-bottom:var(--space-5)}.check{position:relative;display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);cursor:pointer}.check input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}.check-box{flex:none;width:20px;height:20px;border:1px solid #a9a9a9;border-radius:var(--radius-sm);background:#fff;display:grid;place-items:center}.check input:checked+.check-box::after{content:"";width:10px;height:5px;border:solid var(--color-action);border-width:0 0 2px 2px;transform:translateY(-1px)rotate(-45deg)}.check input:focus-visible+.check-box{outline:3px solid var(--color-focus);outline-offset:2px}.field{margin:0 0 var(--space-4);border:0;padding:0;min-width:0}.field label,.field legend{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1);padding:0}.field input[type=text],.field input[type=url],.field input[type=number],.field textarea{width:100%;padding:var(--space-2)var(--space-3);border:1px solid #c8c8c8;border-radius:var(--radius-sm);font:inherit;font-size:var(--text-sm);background:#fff}.field input[type=file]{font-size:var(--text-sm);max-width:100%}.input-unit{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.field-note{display:block;color:var(--color-muted);margin-top:var(--space-1)}.field-error{color:#a4000f;font-size:var(--text-sm);margin:var(--space-2)0 0}.link-button{background:0 0;border:0;padding:0;margin-left:var(--space-2);color:var(--color-link);text-decoration:underline;font:inherit;font-size:var(--text-sm);cursor:pointer}.radio-list{display:grid;gap:var(--space-1)}.radio{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-sm)}@media(max-width:900px){.builder-grid{grid-template-columns:minmax(0,1fr)}.github-badge{position:static;margin:var(--space-4)auto 0}}@media(max-width:460px){.check-grid,.field-row{grid-template-columns:1fr}}.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}.card{position:relative;height:100%;background:#fff;box-shadow:var(--shadow-card);padding:var(--space-3);transition:box-shadow .2s,transform .2s}.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.card-image{display:block;width:100%;aspect-ratio:810/430;object-fit:cover}.card-body{padding:var(--space-4)var(--space-2)var(--space-2)}.card-title{font-size:var(--text-base);text-align:center;margin:0 0 var(--space-3)}.card-title a{color:var(--color-action);text-decoration:none}.card-title a::before{content:"";position:absolute;inset:0}.card:focus-within{outline:3px solid var(--color-focus);outline-offset:2px}.card-title a:focus-visible{outline:none}.card p{margin:0;font-size:var(--text-xs);color:var(--color-text-soft)}@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.cards{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}}.page-header{padding:var(--space-7)0 0;text-align:center}.page-header h1{margin:0}.article,.text-page,.faq-page{padding:var(--space-6)0 var(--space-8)}.article h1{margin-bottom:var(--space-5)}.back-link{text-align:right;font-size:var(--text-sm);margin:0 0 var(--space-4)}.back-link a{text-decoration:none}.article .back-link:last-child{margin:var(--space-6)0 0}.article-cover{margin:0 0 var(--space-6)}.article-cover img{display:block;width:100%}.prose{font-size:var(--text-base);color:var(--color-text-soft)}.prose h2{font-size:var(--text-xl);margin:var(--space-7)0 var(--space-4)}.prose h3{font-size:var(--text-lg);margin:var(--space-6)0 var(--space-3)}.prose h4{font-size:var(--text-base);margin:var(--space-5)0 var(--space-2)}.prose img{display:block;margin:var(--space-5)auto}.prose ul,.prose ol{padding-left:var(--space-5)}.prose li{margin:var(--space-1)0}.prose pre{background:var(--color-code-bg);color:var(--color-code-text);padding:var(--space-4);overflow:auto;border-radius:var(--radius-sm);font-size:.8125rem}.prose code{font-family:var(--font-mono);font-size:.9em}.prose table{width:100%;border-collapse:collapse;margin:var(--space-5)0;font-size:var(--text-sm);display:block;overflow-x:auto}.prose th,.prose td{border:1px solid var(--color-border);padding:var(--space-2)var(--space-3);text-align:left}.prose a{overflow-wrap:anywhere}.text-page h1{text-transform:none}.faq{display:grid;gap:var(--space-3)}.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff}.faq-item summary{list-style:none;cursor:pointer;padding:var(--space-4)var(--space-6)var(--space-4)var(--space-4);position:relative;background:#f5f5f5}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:"+";position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--color-action)}.faq-item[open] summary::after{content:"−"}.faq-item summary h2{display:inline;font-size:var(--text-base);font-weight:600;margin:0}.faq-answer{padding:var(--space-4)}.faq-answer p:first-child{margin-top:0}.faq-answer p:last-child{margin-bottom:0}.site-footer{background:var(--color-footer);color:#d6dbdf;font-size:var(--text-sm)}.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)var(--space-6);padding-top:var(--space-4);padding-bottom:var(--space-4)}.sponsor{display:flex;align-items:center;gap:var(--space-3);margin:0}.sponsor img{display:block;width:110px;height:auto}.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-5)}.footer-links a{color:#fff;text-decoration:none}.footer-links a:hover{text-decoration:underline;color:#fff}