.examples-fresh-article{--fresh-accent: var(--accent);--background: var(--fresh-ink);--layer: var(--fresh-raised);--foreground: var(--fresh-paper);--foreground-feint: var(--fresh-muted);--border: var(--fresh-line);--code-bg: var(--fresh-raised);--code-border: var(--fresh-line);width:100vw;max-width:none;margin:0 calc(50% - 50vw);padding:0 0 clamp(80px,10vw,144px);display:block;background:var(--fresh-ink);color:var(--fresh-paper)}.examples-fresh-article--ui{--ui-brand: var(--lab-blueberry);--ui-brand-text: oklch(.55 .18 255);--ui-ink: var(--lab-ink);--ui-paper: oklch(.97 .01 255);--fresh-accent: var(--ui-brand);--fresh-muted: color-mix(in oklch, var(--ui-ink) 52%, var(--ui-paper));--fresh-line: color-mix(in oklch, var(--ui-ink) 12%, var(--ui-paper));--fresh-raised: color-mix(in oklch, var(--ui-ink) 4%, var(--ui-paper));--background: var(--ui-paper);--layer: var(--fresh-raised);--foreground: var(--ui-ink);--foreground-feint: var(--fresh-muted);--border: var(--fresh-line);--code-bg: var(--fresh-raised);--code-border: var(--fresh-line);overflow-x:clip;background:var(--ui-paper);color:var(--ui-ink)}.examples-fresh-article--ui .fresh-section-heading :is(h1,h2,h3),.examples-fresh-article--ui .fresh-section-index>a,.examples-fresh-article--ui .fresh-section-action{color:var(--ui-ink)}.examples-fresh-article--ui .fresh-pricing-plan:not([data-featured=true]){--fresh-paper: var(--ui-ink);color:var(--ui-ink)}.examples-fresh-article--ui .fresh-item-thumbnail-title{color:var(--ui-ink)}.examples-fresh-article--ui .fresh-item-thumbnail-action>:is(button,a):not([data-saved=true]){color:var(--ui-ink)}.examples-fresh-article--ui .fresh-item-thumbnail-action>:is(button,a):disabled{color:var(--fresh-muted)}.examples-fresh-header{--examples-fresh-header-edge: max( var(--fresh-grid-content-edge), calc( (100vw - var(--fresh-grid-max-width)) / 2 + var(--fresh-grid-gutter) ) );--fresh-line: color-mix(in oklch, var(--fresh-paper) 22%, transparent);--fresh-muted: color-mix(in oklch, var(--fresh-paper) 58%, transparent);padding-inline:var(--examples-fresh-header-edge);border:0;box-sizing:border-box}.examples-fresh-header-field,.examples-fresh-header-field>canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.examples-fresh-header-field>canvas{display:block}.examples-fresh-header .fresh-article-header-meta>span,.examples-fresh-header .fresh-article-header-copy{background:var(--fresh-ink)}.examples-fresh-header .fresh-article-header-meta>span{padding:8px 10px}.examples-fresh-header .fresh-article-header-meta a{color:inherit;text-decoration:none}.examples-fresh-header .fresh-article-header-meta a:hover,.examples-fresh-header .fresh-article-header-meta a:focus-visible{color:var(--fresh-paper)}.examples-fresh-header .fresh-article-header-meta a:focus-visible{outline:2px solid currentColor;outline-offset:3px}.examples-fresh-header .fresh-article-header-copy{padding:clamp(20px,3vw,36px);box-sizing:border-box}.examples-fresh-header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px}.examples-fresh-header-actions .tut-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px}.examples-fresh-header-actions .tut-meta-item{width:auto}.examples-fresh-byline{display:flex;align-items:center;justify-content:flex-end;gap:14px}.examples-fresh-header--ui{--fresh-line: color-mix(in oklch, var(--ui-ink) 14%, var(--ui-paper));--fresh-muted: color-mix(in oklch, var(--ui-ink) 58%, var(--ui-paper));background:var(--ui-paper);color:var(--ui-ink)}.examples-fresh-header--ui:before{background:color-mix(in oklch,var(--ui-paper) 18%,transparent)}.examples-fresh-header--ui .fresh-article-header-meta>span,.examples-fresh-header--ui .fresh-article-header-copy{border:1px solid var(--fresh-line);background:var(--ui-paper);color:var(--ui-ink)}.examples-fresh-header--ui .fresh-article-header-meta>span{color:var(--ui-ink)}.examples-fresh-header--ui .fresh-article-header-copy{position:relative}.examples-fresh-header--ui .fresh-article-header-copy:before{content:"";position:absolute;z-index:0;top:-1px;right:-1px;bottom:-1px;left:-1px;background-image:linear-gradient(to right,var(--ui-brand) 14px,transparent 14px,transparent calc(100% - 14px),var(--ui-brand) calc(100% - 14px)),linear-gradient(to right,var(--ui-brand) 14px,transparent 14px),linear-gradient(to bottom,var(--ui-brand) 14px,transparent 14px,transparent calc(100% - 14px),var(--ui-brand) calc(100% - 14px)),linear-gradient(to bottom,var(--ui-brand) 14px,transparent 14px);background-position:top left,bottom right,top left,bottom right;background-repeat:no-repeat;background-size:100% 1px,100% 1px,1px 100%,1px 100%;pointer-events:none}.examples-fresh-header--ui .fresh-article-header-copy>*{position:relative;z-index:1}.examples-fresh-header--ui .fresh-article-header-title-row :is(h1,h2){color:var(--ui-ink)}.examples-fresh-header--ui .fresh-article-header-support>p{color:var(--fresh-muted)}.examples-fresh-header--ui .fresh-article-header-meta a:hover,.examples-fresh-header--ui .fresh-article-header-meta a:focus-visible{color:var(--ui-brand-text)}.examples-fresh-main{width:min(100%,var(--fresh-grid-max-width));margin-inline:auto;padding:clamp(56px,7vw,96px) var(--fresh-grid-gutter) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--fresh-grid-gap);row-gap:clamp(64px,9vw,120px);box-sizing:border-box}.examples-fresh-main>:is(.tut-example,.sc){grid-column:2 / 12;width:100%;min-width:0;max-width:100%;margin-top:clamp(-128px,-9vw,-96px);position:relative;z-index:2}.examples-fresh-main>.ex-article-attr{grid-column:4 / 11;width:100%;max-width:none;margin:calc(clamp(64px,9vw,120px)*-.65) 0 0}.examples-fresh-main>.ex-walkthrough,.examples-fresh-main>.ex-article-strip:not(.ui-comp-section--related){grid-column:1 / -1;width:100%;max-width:none;margin:0}.examples-fresh-main .ex-article-strip .ex-list{gap:var(--fresh-grid-gap);align-items:start}.examples-fresh-main .ex-article-strip .ex-card-item,.examples-fresh-main .ex-article-strip .ex-card--fresh{width:100%}.examples-fresh-main>.ex-source{grid-column:4 / 11;width:100%;max-width:none;margin:0}.examples-fresh-main>:is(.tut-example,.sc)+.ex-source{margin-top:calc(20px - clamp(64px,9vw,120px))}.examples-fresh-main>.ex-ship{grid-column:4 / 11;width:100%;max-width:none;margin:0}.examples-fresh-main>.examples-fresh-upsell{grid-column:1 / -1;width:100%;margin:0}@media(min-width:1201px){.examples-fresh-article--ui .examples-fresh-main--ui>:is(.ex-walkthrough,.ex-article-strip,.examples-fresh-upsell){grid-column:3 / -1}}.examples-fresh-article--ui .examples-fresh-upsell{--fresh-raised: var(--ui-ink);--fresh-paper: var(--ui-paper);--fresh-muted: color-mix(in oklch, var(--ui-paper) 58%, var(--ui-ink));--fresh-line: color-mix(in oklch, var(--ui-paper) 18%, var(--ui-ink))}.examples-fresh-main .tut-example-frame,.examples-fresh-main .tut-example-frame-inner,.examples-fresh-main .tut-example-surface,.examples-fresh-main .sc-frame,.examples-fresh-main .sc-surface{width:100%;min-width:0;max-width:100%}.examples-fresh-main .tut-example-surface iframe{width:100%;min-width:0;max-width:100%;min-height:420px;display:block;border:0}.examples-fresh-main .ex-walkthrough{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--fresh-grid-gap);align-items:start;scroll-margin-top:112px}.examples-fresh-main .ex-walkthrough>.section-header{grid-column:4 / 11}.examples-fresh-main .examples-fresh-toc{grid-column:1 / 3;grid-row:2;position:sticky;top:96px}.examples-fresh-main .ex-walkthrough>.tut-content{grid-column:1 / -1;grid-row:2;width:100%;max-width:none;margin-top:24px}.examples-fresh-main .ex-walkthrough .fresh-article-content :is(h2,h3,h4)[id]{scroll-margin-top:112px}.examples-fresh-main .tut-gate-fresh{grid-column:3 / 11;margin-top:-110px;position:relative;z-index:3}.examples-fresh-main .tut-gate-fresh .fresh-product-callout-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}.examples-fresh-main .tut-gate-fresh :is(.fresh-product-callout-readout,.fresh-product-callout-action){grid-column:1;grid-row:auto}.examples-fresh-main .tut-gate-fresh-outline{grid-column:4 / 10;padding:24px;border:1px solid var(--fresh-line);background:var(--fresh-raised)}.tut-gate-fresh-actions,.examples-fresh-upsell-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.examples-fresh-main .ex-source-code pre.shiki{border-color:var(--fresh-line);background:var(--fresh-raised)}@media(max-width:1000px){.examples-fresh-main>:is(.tut-example,.sc),.examples-fresh-main>.ex-article-attr,.examples-fresh-main>.ex-source,.examples-fresh-main>.ex-ship{grid-column:2 / 12}.examples-fresh-main .examples-fresh-toc{grid-column:1 / -1;grid-row:2;position:static;margin:20px 0 0}.examples-fresh-main .ex-walkthrough>.tut-content{grid-row:3}}@media(max-width:800px){.examples-fresh-header{padding-top:24px;padding-inline:var(--fresh-grid-gutter)}.examples-fresh-header-actions{align-items:flex-start}.examples-fresh-header-actions .tut-meta,.examples-fresh-byline{justify-content:flex-start}.examples-fresh-main{grid-template-columns:minmax(0,1fr);row-gap:56px}.examples-fresh-main>:is(.tut-example,.sc),.examples-fresh-main>.ex-article-attr,.examples-fresh-main>.ex-walkthrough,.examples-fresh-main>.ex-source,.examples-fresh-main>.ex-ship,.examples-fresh-main>.ex-article-strip,.examples-fresh-main>.examples-fresh-upsell{grid-column:1}.examples-fresh-main>.ex-article-attr{margin-top:-32px}.examples-fresh-main>:is(.tut-example,.sc)+.ex-source{margin-top:-36px}.examples-fresh-main .ex-walkthrough{grid-template-columns:minmax(0,1fr)}.examples-fresh-main .ex-walkthrough>.section-header,.examples-fresh-main .examples-fresh-toc,.examples-fresh-main .ex-walkthrough>.tut-content{grid-column:1}.examples-fresh-main .tut-gate-fresh,.examples-fresh-main .tut-gate-fresh-outline{grid-column:1 / -1}.examples-fresh-main .tut-example-surface iframe{min-height:300px}}