:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d0f14;--bg-elev:#14171e;--surface:#181c25;--fg:#e7e3d6;--fg-soft:#b9b4a4;--fg-mute:#6b675c;--line:#232732;--line-soft:#1a1d26;--accent:#fbbf24;--accent-deep:#f59e0b;--link:#67e8f9;--link-hover:#a5f3fc;--string:#9bd06a;--keyword:#f472b6;--comment:#5c6370;--step--1:.78rem;--step-0:1rem;--step-1:1.1rem;--step-2:1.3rem;--step-3:1.55rem;--step-4:2rem;--step-5:2.5rem;--measure:62ch;--gutter:clamp(1rem, 4.5vw, 2rem);--container:68rem;--mono:"JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}@media (prefers-color-scheme:light){:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f5f5;--bg-elev:#ececec;--surface:#e3e3e3;--fg:#4a148c;--fg-soft:#006064;--fg-mute:#6b6b6b;--line:#d6d6d6;--line-soft:#e5e5e5;--accent:#c2185b;--accent-deep:#880e4f;--link:#1565c0;--link-hover:#0d47a1;--string:#2e7d32;--keyword:#ad1457;--comment:#6b6b6b}}@media (width>=36rem){:root{--step-0:1rem;--step-1:1.18rem;--step-2:1.45rem;--step-3:1.85rem;--step-4:2.4rem;--step-5:3.2rem}}@media (width>=64rem){:root{--step-3:2rem;--step-4:2.8rem;--step-5:4rem}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}ul,ol{padding:0;list-style:none}img,svg{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}input{font:inherit;color:inherit}html{font-family:var(--sans);color:var(--fg);background:var(--bg);scroll-behavior:smooth;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:5rem;font-size:100%;line-height:1.6}body{font-size:var(--step-0);background:radial-gradient(circle at 1px 1px, var(--line-soft) 1px, transparent 0) 0 0/28px 28px, var(--bg);min-height:100dvh;overflow-x:hidden}#root{flex-direction:column;min-height:100dvh;display:flex}h1,h2,h3,h4{font-family:var(--mono);letter-spacing:-.01em;color:var(--fg);text-wrap:balance;font-weight:500;line-height:1.15}h1{font-size:var(--step-5);letter-spacing:-.035em;font-weight:600}h2{font-size:var(--step-3);font-weight:500}h3{font-size:var(--step-1);font-weight:600}h4{font-size:var(--step-0);font-weight:600}p{max-width:var(--measure);text-wrap:pretty}a{color:var(--link);text-decoration:underline;-webkit-text-decoration-color:color-mix(in oklab, var(--link) 35%, transparent);text-decoration-color:color-mix(in oklab, var(--link) 35%, transparent);text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .18s,text-decoration-color .18s}a:hover{color:var(--link-hover);-webkit-text-decoration-color:var(--link-hover);text-decoration-color:var(--link-hover)}code,kbd,samp{font-family:var(--mono);font-size:.92em}::selection{background:var(--accent);color:var(--bg)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}main:focus{outline:none}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.skip-link{z-index:100;background:var(--accent);color:var(--bg);font-family:var(--mono);font-size:var(--step--1);padding:.6rem 1rem;font-weight:600;text-decoration:none;transition:inset-block-start .15s;position:absolute;inset-block-start:-100px;inset-inline-start:.75rem}.skip-link:focus{color:var(--bg);inset-block-start:.75rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline-start:max(var(--gutter), env(safe-area-inset-left));padding-inline-end:max(var(--gutter), env(safe-area-inset-right))}.section{padding-block:clamp(2.25rem,6vw,4.5rem)}.section-heading{border-block-end:1px solid var(--line);font-size:var(--step-3);flex-wrap:wrap;align-items:baseline;gap:.25em .6em;margin-block-end:clamp(1.25rem,3vw,2rem);padding-block-end:.75rem;display:flex}.section-heading__hash{color:var(--accent);font-weight:400}.section-heading__ext{color:var(--fg-mute);font-size:var(--step--1);letter-spacing:0;margin-inline-start:auto;font-weight:400}.page-header{padding-block:clamp(2.5rem,8vw,5rem) clamp(1.5rem,4vw,2.5rem)}.page-header h1{margin-block:.5rem 1rem}.page-header__lede{color:var(--fg-soft);font-size:var(--step-1)}.breadcrumb{font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute);flex-wrap:wrap;gap:.5ch;display:flex}.breadcrumb a{color:var(--fg-mute);-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line)}.breadcrumb a:hover{color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.breadcrumb li+li:before{content:"/";margin-inline-end:.5ch}.eyebrow{font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute);letter-spacing:.02em;flex-wrap:wrap;align-items:center;gap:.4em 1em;font-weight:500;display:flex}.prose{max-width:var(--measure);color:var(--fg-soft);line-height:1.7}@media (width>=36rem){.prose{font-size:var(--step-1)}}.tag-list{flex-wrap:wrap;gap:.4rem;display:flex}.tag-list>li,.tag-list .tag{border:1px solid var(--line);background:var(--bg-elev);font-family:var(--mono);font-size:var(--step--1);color:var(--fg-soft);border-radius:2px;align-items:center;padding:.1rem .5rem;line-height:1.6;display:inline-flex}button.tag{transition:color .18s,border-color .18s}button.tag:hover{color:var(--fg);border-color:var(--fg-mute)}button.tag[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.bullets{gap:.4rem;display:grid}.bullets>li{padding-inline-start:1.25em;position:relative}.bullets>li:before{content:"›";color:var(--accent);font-family:var(--mono);position:absolute;inset-inline-start:0}.bullets--inline{font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute);flex-wrap:wrap;gap:.25rem 1.25rem;display:flex}.cards{gap:1rem;display:grid}@media (width>=48rem){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}.card{border:1px solid var(--line);background:var(--bg-elev);border-radius:4px;flex-direction:column;gap:.85rem;padding:clamp(1.1rem,3vw,1.5rem);transition:border-color .18s,transform .18s;display:flex}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.see-more{font-family:var(--mono);font-size:var(--step--1);color:var(--accent);text-decoration-style:dashed;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.see-more:hover{color:var(--accent-deep);-webkit-text-decoration-color:var(--accent-deep);text-decoration-color:var(--accent-deep)}.more>summary{cursor:pointer;font-family:var(--mono);font-size:var(--step--1);color:var(--fg-soft);list-style:none}.more>summary::-webkit-details-marker{display:none}.more>summary:before{content:"[+] ";color:var(--accent)}.more[open]>summary:before{content:"[−] "}.rule{border:0;border-block-start:1px solid var(--line);height:0;margin:0}.btn{border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-family:var(--mono);font-size:var(--step--1);white-space:nowrap;border-radius:0;justify-content:center;align-items:center;gap:.5em;padding:.55rem 1.1rem;font-weight:600;text-decoration:none;transition:background-color .18s,border-color .18s,color .18s;display:inline-flex}.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}.btn--quiet{color:var(--fg);border-color:var(--line);background:0 0}.btn--quiet:hover{color:var(--accent);border-color:var(--accent);background:0 0}.marker{background:var(--accent);flex:none;width:.5em;height:.5em;display:inline-block}.marker--done{background:var(--string)}.field{border:1px solid var(--line);background:var(--bg-elev);width:100%;font-family:var(--mono);font-size:var(--step--1);color:var(--fg);border-radius:2px;padding:.55rem .75rem;transition:border-color .18s}.field::placeholder{color:var(--fg-mute)}.field:hover{border-color:var(--fg-mute)}.field:focus-visible{border-color:var(--accent);outline-offset:1px}.page-header__actions{flex-wrap:wrap;align-items:center;gap:1rem;margin-block-start:1.5rem;display:flex}.codelab-content>*+*{margin-block-start:1.1em}.codelab-content h3{font-size:var(--step-1);margin-block-start:2em}.codelab-content h4{margin-block-start:1.6em}.codelab-content strong{color:var(--fg);font-weight:600}.codelab-content :not(pre)>code{border:1px solid var(--line);background:var(--surface);color:var(--fg);overflow-wrap:anywhere;border-radius:2px;padding:.08em .35em;font-size:.86em}.codelab-content ul{gap:.4em;display:grid}.codelab-content ul>li{padding-inline-start:1.25em;position:relative}.codelab-content ul>li:before{content:"›";color:var(--accent);font-family:var(--mono);position:absolute;inset-inline-start:0}.codelab-content ul ul{margin-block-start:.4em}.codelab-content ol{counter-reset:step;gap:.4em;display:grid}.codelab-content ol>li{counter-increment:step;padding-inline-start:2.25em;position:relative}.codelab-content ol>li:before{content:counter(step, decimal-leading-zero);color:var(--accent);font-family:var(--mono);font-size:.86em;line-height:1.95;position:absolute;inset-inline-start:0}.codelab-content img{border:1px solid var(--line);border-radius:4px;height:auto}.codelab-content hr{border:0;border-block-start:1px dashed var(--line)}.codelab-content table{border-collapse:collapse;width:100%;font-size:var(--step--1)}.codelab-content th,.codelab-content td{border-block-end:1px solid var(--line);text-align:start;padding:.4rem .6rem}.codelab-content th{font-family:var(--mono);color:var(--fg);font-weight:500}.codelab-content .btn{margin-block:.25em}.code{max-width:calc(100vw - 2 * var(--gutter));border:1px solid var(--line);background:var(--bg-elev);border-radius:4px;overflow:hidden}.code__bar{border-block-end:1px solid var(--line);font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute);justify-content:space-between;align-items:center;padding:.3rem .4rem .3rem .85rem;display:flex}.code__copy{color:var(--fg-mute);border:1px solid #0000;border-radius:2px;padding:.1rem .5rem;transition:color .18s,border-color .18s}.code__copy:hover{color:var(--accent);border-color:var(--line)}.code__copy[data-copied]{color:var(--string)}.code pre{tab-size:2;margin:0;padding:.9rem 1rem;font-size:.8rem;line-height:1.65;overflow-x:auto}.code code{color:var(--fg);font-size:inherit}.hljs-comment,.hljs-quote,.hljs-meta{color:var(--comment);font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-literal,.hljs-name,.hljs-tag{color:var(--keyword)}.hljs-string,.hljs-regexp,.hljs-attr,.hljs-attribute,.hljs-template-tag,.hljs-symbol{color:var(--string)}.callout{border:1px solid var(--line);border-inline-start:2px solid var(--string);background:var(--bg-elev);border-radius:2px;padding:.85rem 1rem;font-size:.94em;display:block}.callout--negative{border-inline-start-color:var(--accent)}.callout__label{font-family:var(--mono);font-size:var(--step--1);color:var(--string);margin-block-end:.3rem;font-weight:600;display:block}.callout--negative .callout__label{color:var(--accent)}.toast{z-index:60;inset-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));border:1px solid var(--line);border-block-start:2px solid var(--accent);background:var(--bg-elev);font-family:var(--mono);font-size:var(--step--1);color:var(--fg-soft);border-radius:2px;gap:.6rem;padding:1rem 1.1rem;animation:.25s both toast-in;display:grid;position:fixed;inset-block-end:calc(1rem + env(safe-area-inset-bottom))}@media (width>=36rem){.toast{width:22rem;inset-inline-start:auto}}.toast__title,.toast strong{color:var(--fg);font-weight:600}.toast__actions{gap:.6rem;margin-block-start:.2rem;display:flex}.toast__actions .btn{padding:.4rem .85rem}@keyframes toast-in{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}.site-footer{padding-block:2.5rem calc(1.5rem + env(safe-area-inset-bottom));border-block-start:1px solid var(--line);font-family:var(--mono);font-size:var(--step--1);margin-block-start:auto}.site-footer__cols{gap:2rem;padding-block-end:2rem;display:grid}@media (width>=36rem){.site-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}.site-footer__title{font-size:var(--step--1);color:var(--fg-mute);margin-block-end:.75rem;font-weight:500}.site-footer__title:before{content:"// "}.site-footer address{font-style:normal}.site-footer__list{gap:.4rem;display:grid}.site-footer__list span{color:var(--fg-mute)}.site-footer__list span:before{content:"— "}.site-footer__copy{border-block-start:1px dashed var(--line);max-width:none;color:var(--fg-mute);padding-block-start:1.25rem}.brand{font-family:var(--mono);font-size:var(--step--1)}@media (width>=36rem){.brand{font-size:var(--step-0)}}.brand{letter-spacing:-.02em;color:var(--fg);white-space:nowrap;font-weight:600;text-decoration:none}.brand:hover{color:var(--fg)}.brand__prompt{color:var(--accent)}.site-header{z-index:50;border-block-end:1px solid var(--line);background:color-mix(in oklab, var(--bg) 82%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding-block-start:env(safe-area-inset-top);position:sticky;top:0}.site-header__bar{flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:3.5rem;display:flex}.site-header__toggle{place-items:center;width:2.5rem;height:2.5rem;margin-inline-end:-.5rem;display:grid}@media (width>=36rem){.site-header__toggle{display:none}}.site-header__bars{gap:4px;width:18px;display:grid}.site-header__bars span{background:var(--fg);height:1px;transition:transform .18s,opacity .18s;display:block}.site-header__toggle[aria-expanded=true] .site-header__bars span:first-child{transform:translateY(5px)rotate(45deg)}.site-header__toggle[aria-expanded=true] .site-header__bars span:nth-child(2){opacity:0}.site-header__toggle[aria-expanded=true] .site-header__bars span:nth-child(3){transform:translateY(-5px)rotate(-45deg)}.site-nav{font-family:var(--mono);font-size:var(--step--1)}.site-nav ul{gap:1.5rem;display:flex}.site-nav a{color:var(--fg-soft);padding-block:.25rem;text-decoration:none;display:inline-block;position:relative}.site-nav a:after{content:"";background:var(--accent);transform-origin:0;height:1px;transition:transform .18s;position:absolute;inset-block-end:0;inset-inline:0;transform:scaleX(0)}.site-nav a:hover,.site-nav a.active{color:var(--fg)}.site-nav a:hover:after,.site-nav a.active:after{transform:scaleX(1)}@media (width<=35.999rem){.site-nav{visibility:hidden;flex-basis:100%;max-height:0;transition:max-height .25s,visibility .25s;overflow:hidden}.site-nav[data-open=true]{visibility:visible;max-height:12rem}.site-nav ul{flex-direction:column;gap:0;padding-block:.25rem .75rem}.site-nav li+li{border-block-start:1px dashed var(--line)}.site-nav a{padding-block:.7rem;display:block}.site-nav a:after{display:none}.site-nav a.active{color:var(--accent)}}.codelab{padding-block:clamp(1.5rem,5vw,3rem) clamp(2.5rem,6vw,4.5rem)}.codelab__loading{font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute);margin-block-start:1rem}.codelab__title{font-size:var(--step-4);margin-block:.6rem .75rem}.codelab__meta{max-width:none;font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute);flex-wrap:wrap;gap:.25rem 1.5rem;display:flex}.codelab__meta span:nth-child(2){color:var(--fg-soft)}.codelab__progress{background:var(--line);width:100%;height:1px;color:var(--accent);appearance:none;border:0;margin-block:1.25rem clamp(1.5rem,4vw,2.5rem);display:block}.codelab__progress::-webkit-progress-bar{background:var(--line)}.codelab__progress::-webkit-progress-value{background:var(--accent);transition:width .25s}.codelab__progress::-moz-progress-bar{background:var(--accent)}.codelab__body{gap:1.5rem;display:grid}@media (width>=64rem){.codelab__body{grid-template-columns:16rem minmax(0,1fr);align-items:start;gap:3rem}.codelab__steps{top:calc(4.5rem + env(safe-area-inset-top));max-height:calc(100dvh - 6rem);position:sticky;overflow-y:auto}}.codelab__steps-toggle{border:1px solid var(--line);background:var(--bg-elev);width:100%;font-family:var(--mono);font-size:var(--step--1);color:var(--fg);border-radius:2px;justify-content:space-between;padding:.6rem .85rem;display:flex}@media (width>=64rem){.codelab__steps-toggle{display:none}}.codelab__steps-marker{color:var(--accent)}.codelab__step-heading{font-size:var(--step-3);scroll-margin-top:calc(5rem + env(safe-area-inset-top));display:block}.codelab__step-heading:focus{outline:none}.codelab__controls{max-width:var(--measure);border-block-start:1px solid var(--line);justify-content:space-between;gap:1rem;margin-block-start:2.5rem;padding-block-start:1.5rem;display:flex}.codelab__feedback{font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute);margin-block-start:1.25rem}.step-list{font-family:var(--mono);font-size:var(--step--1)}@media (width<=63.999rem){.step-list{border:1px solid var(--line);background:var(--bg-elev);border-block-start-style:dashed;margin-block-start:-1px;padding:.25rem 0;display:none}.step-list[data-open=true]{display:block}}@media (width>=64rem){.step-list{border-inline-start:1px solid var(--line)}}.step-list__link{color:var(--fg-mute);grid-template-columns:2.25ch minmax(0,1fr) auto;gap:.85ch;padding:.5rem .85rem;line-height:1.45;text-decoration:none;transition:color .18s;display:grid;position:relative}.step-list__link:hover{color:var(--fg)}.step-list__link[data-state=visited]{color:var(--fg-soft)}.step-list__link[data-state=current]{color:var(--fg)}.step-list__link[data-state=current] .step-list__num{color:var(--accent)}.step-list__link[data-state=current]:before{content:"";inset-inline-start:-4px;background:var(--accent);width:7px;height:7px;position:absolute;top:.95em}@media (width<=63.999rem){.step-list__link[data-state=current]:before{width:5px;height:5px;inset-inline-start:.3rem}}.step-list__min{color:var(--fg-mute)}.codelab-card h3{font-size:var(--step-2);font-weight:500}.codelab-card__title{color:var(--fg);text-decoration:none}.codelab-card__title:hover{color:var(--accent)}.codelab-card__summary{color:var(--fg-soft)}.codelab-card__meta{font-family:var(--mono);font-size:var(--step--1);flex-wrap:wrap;gap:.25rem 1.5rem;display:flex}.codelab-card__meta div{gap:.6ch;display:flex}.codelab-card__meta dt{color:var(--fg-mute)}.codelab-card__meta dd{color:var(--fg)}.codelab-card__foot{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-block-start:auto;padding-block-start:.5rem;display:flex}.codelab-card__status{font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute);align-items:center;gap:.6ch;display:inline-flex}.home-list{padding-block-start:0}.home-filters{gap:.85rem;margin-block-end:1.5rem;display:grid}@media (width>=48rem){.home-filters{grid-template-columns:minmax(0,20rem) 1fr;align-items:center}}.tag-list>.home-filters__tag{background:0 0;border:0;padding:0}.home-filters .tag{padding:.1rem .5rem}.home-status{font-family:var(--mono);font-size:var(--step--1);color:var(--fg-mute)}.home-status .see-more{-webkit-text-decoration:underline dashed;text-decoration:underline dashed}