.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-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-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>.tut-example{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>:is(.ex-walkthrough,.ex-article-strip){grid-column:1 / -1;width:100%;max-width:none;margin:0}.examples-fresh-main>.ex-source{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}.examples-fresh-main .tut-example-frame,.examples-fresh-main .tut-example-frame-inner,.examples-fresh-main .tut-example-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}.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>.tut-example,.examples-fresh-main>.ex-article-attr,.examples-fresh-main>.ex-source{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-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>.tut-example,.examples-fresh-main>.ex-article-attr,.examples-fresh-main>.ex-walkthrough,.examples-fresh-main>.ex-source,.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 .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}}