.guide-example-open[data-astro-cid-7aj7nfie]{color:inherit;text-decoration:none;display:block}.guide-example-visual[data-astro-cid-7aj7nfie]{background:var(--surface-2);border:1px solid var(--line-strong);height:230px;color:var(--text);border-radius:12px;transition:border-color .2s;position:relative;overflow:hidden}.guide-example-visual[data-astro-cid-7aj7nfie] iframe{transform-origin:0 0;pointer-events:none;border:0;width:200%;height:460px;position:absolute;inset:0;transform:scale(.5)}.guide-preview-placeholder[data-astro-cid-7aj7nfie]{text-align:center;place-items:center;height:100%;padding:30px;font-size:18px;font-weight:500;display:grid}.guide-example-visual[data-astro-cid-7aj7nfie][data-ready=true] .guide-preview-placeholder[data-astro-cid-7aj7nfie]{visibility:hidden}.guide-example-visual[data-astro-cid-7aj7nfie] .guide-preview-label[data-astro-cid-7aj7nfie]{background:var(--surface);color:var(--text-2);padding:8px 12px;font-size:11px;position:absolute;bottom:0;right:0}.guide-example-open[data-astro-cid-7aj7nfie]:hover .guide-example-visual[data-astro-cid-7aj7nfie]{border-color:var(--accent-text)}.guide-example-card[data-astro-cid-7aj7nfie] a[data-astro-cid-7aj7nfie]:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}.guide-example-card[data-astro-cid-7aj7nfie] h3[data-astro-cid-7aj7nfie] a[data-astro-cid-7aj7nfie]{color:inherit;text-decoration:none}.guide-example-card[data-astro-cid-7aj7nfie] p[data-astro-cid-7aj7nfie]{color:var(--text-2);margin-block:8px 18px;font-size:12px;line-height:1.8}@media (prefers-reduced-motion:reduce){.guide-example-visual[data-astro-cid-7aj7nfie]{transition:none}}.guide-example-visual[data-astro-cid-7aj7nfie][data-motion-thumbnail] iframe{width:100%;height:100%;transform:none}@layer reset,base,components,responsive,imported-examples,example-gallery;@layer home-motion{body:has(>.examples-page){--mo-yellow:oklch(88% .18 96);--mo-ink:#0e1312;--mo-paper:#ededec;--mo-panel-line:#2b3332;--mo-panel-text:#a7adab;--mo-ease:cubic-bezier(.16, 1, .3, 1);--r-card:0px;--r-window:0px;--r-pill:0px;--bg:#f2f1ea;--surface:#fbfaf5;--surface-2:#e9e8df;--surface-3:#e0dfd5;--line:#d9d8ce;--line-strong:#bdbcb1;--text:#0e1312;--text-2:#474d4b;--text-3:#5f6563;--accent:#0e1312;--accent-text:#6b5900;--accent-soft:color-mix(in oklch, var(--mo-yellow) 45%, transparent);--selection:color-mix(in oklch, var(--mo-yellow) 60%, transparent);background:var(--bg);color:var(--text)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body:has(>.examples-page){--bg:#0e1312;--surface:#131a1a;--surface-2:#182021;--surface-3:#1f2828;--line:#232b2b;--line-strong:#38403f;--text:#ededec;--text-2:#a7adab;--text-3:#868d8b;--accent:var(--mo-yellow);--accent-text:var(--mo-yellow);--accent-soft:color-mix(in oklch, var(--mo-yellow) 22%, transparent);--selection:color-mix(in oklch, var(--mo-yellow) 32%, transparent)}}:root[data-theme=dark] body:has(>.examples-page){--bg:#0e1312;--surface:#131a1a;--surface-2:#182021;--surface-3:#1f2828;--line:#232b2b;--line-strong:#38403f;--text:#ededec;--text-2:#a7adab;--text-3:#868d8b;--accent:var(--mo-yellow);--accent-text:var(--mo-yellow);--accent-soft:color-mix(in oklch, var(--mo-yellow) 22%, transparent);--selection:color-mix(in oklch, var(--mo-yellow) 32%, transparent)}body:has(>.examples-page) .site-header{--hdr-bg:var(--mo-yellow);--hdr-ink:var(--mo-ink);--hdr-on-ink:var(--mo-paper);backdrop-filter:none;background:var(--hdr-bg);border-block-end-color:color-mix(in srgb, var(--hdr-ink) 14%, transparent);color:var(--hdr-ink)}body:has(>.examples-page) .brand,body:has(>.examples-page) .brand-period{color:var(--hdr-ink)}body:has(>.examples-page) .header-nav a{color:color-mix(in srgb, var(--hdr-ink) 72%, transparent);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:color .16s var(--mo-ease);font-size:11px}body:has(>.examples-page) .header-nav a:hover,body:has(>.examples-page) .header-nav a[aria-current]{color:var(--hdr-ink)}body:has(>.examples-page) .header-nav a[aria-current]:after{background:var(--hdr-ink)}body:has(>.examples-page) .theme-toggle{border-color:color-mix(in srgb, var(--hdr-ink) 32%, transparent);color:var(--hdr-ink);transition:background-color .16s var(--mo-ease), color .16s var(--mo-ease)}body:has(>.examples-page) .theme-toggle:hover{background:var(--hdr-ink);color:var(--hdr-bg)}body:has(>.examples-page) .header-nav .github-link{background:var(--hdr-ink);border-color:var(--hdr-ink);color:var(--hdr-on-ink);transition:background-color .16s var(--mo-ease), color .16s var(--mo-ease);padding:12px 18px}body:has(>.examples-page) .header-nav .github-link:hover{color:var(--hdr-ink);background:0 0}body:has(>.examples-page) :focus-visible{outline-color:var(--accent-text)}body:has(>.examples-page) .site-header :focus-visible{outline-color:var(--hdr-ink)}@supports (animation-timeline:view()) and (timeline-scope:--sg-hero){body:has(>.examples-page){timeline-scope:--sg-hero}.examples-hero{view-timeline-name:--sg-hero}body:has(>.examples-page) .site-header{animation:linear both sg-header-flip;animation-range:cover 0% cover calc(100% - var(--header-h));animation-timeline:--sg-hero}}@keyframes sg-header-flip{0%,99%{--hdr-bg:var(--mo-yellow);--hdr-ink:var(--mo-ink);--hdr-on-ink:var(--mo-paper)}to{--hdr-bg:var(--bg);--hdr-ink:var(--text);--hdr-on-ink:var(--bg)}}.examples-page{padding-block-start:0}.examples-hero{background:var(--mo-yellow);box-shadow:0 0 0 100vmax var(--mo-yellow);clip-path:inset(0 -100vmax);color:var(--mo-ink);grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(16px,2vw,28px);padding-block:clamp(24px,2.6vw,36px) clamp(40px,4.4vw,64px);display:grid}.examples-hero-panel{background:var(--mo-ink);color:var(--mo-paper);word-break:keep-all;flex-direction:column;min-inline-size:0;padding:clamp(28px,3.4vw,48px);display:flex}.examples-hero-meta{color:var(--mo-panel-text);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-block-end:clamp(28px,3vw,44px);font-size:11px;line-height:1.5;display:flex}.examples-hero-meta .examples-kicker{color:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit}.examples-hero-meta .examples-kicker>span{color:var(--mo-yellow);font-size:12px}.examples-hero-brand,.examples-hero h1{letter-spacing:-.04em;font-size:clamp(34px,3.6vw,52px);font-weight:700;line-height:1.04}.examples-hero-brand{color:var(--mo-yellow)}.examples-hero h1{color:var(--mo-paper);margin:0}.examples-hero .examples-description{color:var(--mo-panel-text);max-inline-size:46ch;margin-block:18px 30px;font-size:15px;line-height:1.55}.examples-hero .examples-search{border:1px solid var(--mo-panel-line);min-block-size:50px;transition:border-color .16s var(--mo-ease);background:0 0;border-radius:0;padding-inline:15px 0}.examples-hero .examples-search:focus-within{border-color:var(--mo-yellow);box-shadow:none}.examples-hero .examples-search>svg{color:var(--mo-panel-text)}.examples-hero .examples-search input{color:var(--mo-paper);font-size:13px}.examples-hero .examples-search input::placeholder{color:#868d8b}.examples-hero .examples-search button{background:var(--mo-yellow);color:var(--mo-ink);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;min-block-size:48px;transition:background-color .14s var(--mo-ease);border-radius:0;align-self:stretch;padding-inline:18px;font-size:11px}.examples-hero .examples-search button:hover{background:var(--mo-paper)}.examples-hero .examples-search button>span{color:inherit;opacity:.6}.examples-hero .examples-search :focus-visible{outline-color:var(--mo-yellow)}.examples-hero .examples-motion{border:1px solid var(--mo-panel-line);color:var(--mo-panel-text);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;min-block-size:50px;transition:border-color .16s var(--mo-ease), color .16s var(--mo-ease);background:0 0;border-radius:0;font-size:10px}.examples-hero .examples-motion:hover{border-color:var(--mo-paper);color:var(--mo-paper);background:0 0}.examples-hero-agent{color:var(--mo-panel-text);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:color .16s var(--mo-ease);border-block-end:1px solid;align-self:start;margin-block-start:24px;padding-block:3px;font-size:11px;line-height:1.6}.examples-hero-agent:hover{color:var(--mo-yellow)}.examples-hero-panel :focus-visible{outline-color:var(--mo-yellow)}.examples-hero-tiles{background:var(--mo-panel-line);grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr));align-self:stretch;gap:1px;padding:1px;display:grid}.examples-hero-tile{--tile-accent:var(--mo-yellow);background:var(--mo-ink);color:var(--mo-paper);min-inline-size:0;transition:background-color .2s var(--mo-ease), color .2s var(--mo-ease);flex-direction:column;padding:18px 20px 20px;display:flex}.examples-hero-tile:hover,.examples-hero-tile[aria-current]{--tile-accent:var(--mo-ink);background:var(--mo-yellow);color:var(--mo-ink)}.examples-hero-tile:focus-visible{outline:2px solid var(--mo-ink);outline-offset:-6px}.examples-tile-index{color:var(--tile-accent);font-family:var(--mono);letter-spacing:.1em;margin-block-start:14px;font-size:11px}.examples-hero-tile strong{letter-spacing:-.03em;margin-block:6px 4px;font-size:clamp(17px,1.5vw,21px);font-weight:700;line-height:1.2}.examples-hero-tile code{color:color-mix(in srgb, currentColor 62%, transparent);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.examples-tile-art{contain:layout paint;flex:1;min-block-size:96px;display:block;position:relative}.examples-tile-art i{display:block;position:absolute}[data-tile=border] .examples-tile-art i:first-child{border:1px solid color-mix(in srgb, currentColor 35%, transparent);block-size:52px;inline-size:52px;inset:calc(50% - 26px) auto auto calc(50% - 26px)}[data-tile=border] .examples-tile-art i:nth-child(2){animation:sg-tile-orbit 3.2s var(--mo-ease) infinite;background:var(--tile-accent);block-size:9px;inline-size:9px;inset:calc(50% - 30.5px) auto auto calc(50% - 30.5px)}[data-tile=border] .examples-tile-art i:nth-child(3){display:none}[data-tile=background] .examples-tile-art i{animation:sg-tile-sweep 2.8s var(--mo-ease) infinite;background:var(--tile-accent);transform-origin:0;block-size:10px;inline-size:68%;inset-inline-start:16%}[data-tile=background] .examples-tile-art i:first-child{inset-block-start:calc(50% - 25px)}[data-tile=background] .examples-tile-art i:nth-child(2){opacity:.7;animation-delay:.12s;inset-block-start:calc(50% - 5px)}[data-tile=background] .examples-tile-art i:nth-child(3){opacity:.45;animation-delay:.24s;inset-block-start:calc(50% + 15px)}[data-tile=text] .examples-tile-art i{animation:sg-tile-lift 2.4s var(--mo-ease) infinite;background:currentColor;block-size:30px;inline-size:16px;inset-block-start:calc(50% - 15px)}[data-tile=text] .examples-tile-art i:first-child{inset-inline-start:calc(50% - 32px)}[data-tile=text] .examples-tile-art i:nth-child(2){background:var(--tile-accent);animation-delay:.1s;inset-inline-start:calc(50% - 8px)}[data-tile=text] .examples-tile-art i:nth-child(3){animation-delay:.2s;inset-inline-start:calc(50% + 16px)}[data-tile=card] .examples-tile-art i:first-child{animation:sg-tile-rise 2.6s var(--mo-ease) infinite;border:1px solid;block-size:44px;inline-size:64px;inset:calc(50% - 26px) auto auto calc(50% - 32px)}[data-tile=card] .examples-tile-art i:nth-child(2){animation:sg-tile-rise 2.6s var(--mo-ease) infinite;background:var(--tile-accent);block-size:8px;inline-size:30px;inset:calc(50% - 16px) auto auto calc(50% - 22px)}[data-tile=card] .examples-tile-art i:nth-child(3){background:color-mix(in srgb, currentColor 35%, transparent);block-size:1px;inline-size:96px;inset:calc(50% + 28px) auto auto calc(50% - 48px)}@keyframes sg-tile-orbit{0%,to{translate:0}25%{translate:52px}50%{translate:52px 52px}75%{translate:0 52px}}@keyframes sg-tile-sweep{0%{scale:.15 1}45%,70%{scale:1}to{scale:.15 1}}@keyframes sg-tile-lift{0%,60%,to{translate:0}25%{translate:0 -12px}}@keyframes sg-tile-rise{0%,to{translate:0}40%,70%{translate:0 -10px}}:root[data-preview-motion=paused] .examples-tile-art i{animation:none}@media (prefers-reduced-motion:reduce){.examples-tile-art i{animation:none!important}}.examples-strip{background:var(--line);border-block-end:1px solid var(--line);grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 clamp(32px,4vw,56px);padding:0;list-style:none;display:grid}.examples-strip li{background:var(--bg);padding:22px clamp(16px,1.6vw,24px) 24px}.examples-strip strong{color:var(--accent-text);font-family:var(--mono);letter-spacing:.12em;margin-block-end:8px;font-size:11px;font-weight:500;display:block}.examples-strip span{color:var(--text-2);word-break:keep-all;font-size:13px;line-height:1.55;display:block}.examples-category-nav>a,.examples-source-filter select,.examples-more,.examples-empty,.example-expand,.example-category-label{border-radius:0}.examples-category-nav>a{transition:background-color .16s var(--mo-ease), color .16s var(--mo-ease)}.examples-category-nav>a[aria-current]{background:var(--mo-yellow);border-color:var(--mo-yellow);color:var(--mo-ink)}.examples-category-nav>a[aria-current] svg,.examples-category-nav>a[aria-current] .examples-nav-count{color:var(--mo-ink)}.examples-toolbar{border-block-start:1px solid var(--line);align-items:end;min-block-size:0;margin-block-end:22px;padding-block:20px 0}.examples-toolbar>div{align-items:baseline}.examples-toolbar h2{letter-spacing:-.035em;font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.1}.examples-result-count{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.examples-live{letter-spacing:.12em;font-size:10px}.examples-live>span{background:var(--accent-text)}.examples-page .examples-grid{gap:20px}.examples-page .example-card{background:var(--surface);border:1px solid var(--line);transition:border-color .18s var(--mo-ease);flex-direction:column;display:flex}.examples-page .example-card:hover,.examples-page .example-card:focus-within{border-color:var(--accent-text)}.examples-page .example-card-preview{border:0;border-block-end:1px solid var(--line);border-radius:0}.examples-page .example-card-caption{flex-direction:column;flex:1;padding:14px 16px 0;display:flex}.examples-page .example-card-title h3{letter-spacing:-.02em;font-size:14px;font-weight:700}.examples-page .example-card-title a{transition:color .16s var(--mo-ease)}.examples-page .example-category-label{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-size:9px}.examples-page .example-card-subtitle{margin-block-end:14px;font-size:12px}.examples-page .guide-example-card .example-card-caption p{margin-block:6px 16px}.examples-page .example-card-meta{border-block-start:1px solid var(--line);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:auto -16px 0;padding-inline:16px 8px;font-size:10px}.examples-page .example-interaction{transition:color .16s var(--mo-ease)}.examples-more{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:background-color .16s var(--mo-ease), color .16s var(--mo-ease);font-size:11px}.examples-more:hover{background:var(--mo-yellow);border-color:var(--mo-yellow);color:var(--mo-ink)}@media (width<=1199px){.examples-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.examples-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=900px){.examples-hero{grid-template-columns:minmax(0,1fr)}.examples-hero-tiles{grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr))}.examples-tile-art{min-block-size:84px}}@media (width<=599px){.examples-hero{padding-block:16px 32px}.examples-hero-panel{padding:24px 20px 26px}.examples-hero-meta{margin-block-end:24px}.examples-hero-brand,.examples-hero h1{font-size:32px}.examples-hero .examples-description{margin-block:14px 22px;font-size:14px}.examples-hero-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.examples-hero-tile{padding:14px 16px 16px}.examples-tile-art{min-block-size:76px}.examples-strip li{padding:16px 14px 18px}.examples-strip span{font-size:12px}.examples-page .examples-grid{gap:18px}}}.examples-page .example-card .guide-example-visual{border:0;border-block-end:1px solid var(--line);border-radius:0}