.frame:where(.astro-esl3dtll){container-type:inline-size}.grid:where(.astro-esl3dtll){gap:var(--s-6) var(--s-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));display:grid}.grid:where(.astro-esl3dtll)[data-feature]{grid-template-columns:repeat(2,minmax(0,1fr))}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child{grid-column:1/-1}.kicker:where(.astro-esl3dtll){gap:var(--s-2);color:var(--muted);font:400 10px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;align-items:baseline;display:flex}.number:where(.astro-esl3dtll){color:var(--link)}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child .title:where(.astro-esl3dtll){font:500 22px/1.2 var(--font-sans);letter-spacing:-.01em}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child .caption:where(.astro-esl3dtll) p:where(.astro-esl3dtll){max-width:52ch;font-size:12px}@container (width>=56rem){.grid:where(.astro-esl3dtll)[data-feature]{grid-template-columns:repeat(4,minmax(0,1fr))}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child{grid-area:span 2/span 2}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child .screen:where(.astro-esl3dtll){aspect-ratio:auto;border-bottom:0;flex:1;min-height:0}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child .caption:where(.astro-esl3dtll){z-index:1;gap:var(--s-2);padding:var(--s-7) var(--s-5) var(--s-5);background:linear-gradient(to top, color-mix(in srgb, var(--ground) 94%, transparent) 30%, transparent);pointer-events:none;position:absolute;inset:auto 0 0}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child .caption:where(.astro-esl3dtll) :where(.astro-esl3dtll):is(a,ul){pointer-events:auto}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child .caption:where(.astro-esl3dtll) p:where(.astro-esl3dtll){color:var(--text-2)}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child .open:where(.astro-esl3dtll){top:var(--s-3);right:var(--s-3);bottom:auto}}@container (width<=34rem){.grid:where(.astro-esl3dtll)[data-feature]{gap:var(--s-3);overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;grid-template-columns:none;grid-auto-columns:86%;grid-auto-flow:column;overflow-x:auto}.grid:where(.astro-esl3dtll)[data-feature]::-webkit-scrollbar{display:none}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll){scroll-snap-align:start}.grid:where(.astro-esl3dtll)[data-feature]>.example:where(.astro-esl3dtll):first-child{grid-column:auto}}.example:where(.astro-esl3dtll){border:1px solid var(--rule);border-radius:2px;flex-direction:column;min-width:0;transition:border-color .15s;display:flex;position:relative;overflow:hidden}.screen:where(.astro-esl3dtll){aspect-ratio:16/10;border-bottom:1px solid var(--rule);background:var(--ground);position:relative;overflow:hidden}.example:where(.astro-esl3dtll):hover{border-color:var(--accent)}.example:where(.astro-esl3dtll):has(:focus-visible){outline:1px solid var(--accent);outline-offset:2px}canvas:where(.astro-esl3dtll){width:100%;height:100%;display:block}.wait:where(.astro-esl3dtll){box-sizing:border-box;max-width:calc(100% - 2 * var(--s-4));padding:var(--s-2) var(--s-3);border:1px solid var(--rule-strong);background:var(--ground);color:var(--text);text-align:center;pointer-events:none;font-size:12px;font-family:var(--font-mono);border-radius:2px;transition:opacity .2s;position:absolute;top:50%;left:50%;translate:-50% -50%}.wait:where(.astro-esl3dtll):empty{display:none}.example:where(.astro-esl3dtll).live .wait:where(.astro-esl3dtll){opacity:0}.open:where(.astro-esl3dtll){right:var(--s-2);bottom:var(--s-2);z-index:1;gap:var(--s-1);padding:3px var(--s-2);border:1px solid var(--rule-strong);background:color-mix(in srgb, var(--ground) 82%, transparent);backdrop-filter:blur(6px);color:var(--text);font:11px / 1.5 var(--font-mono);pointer-events:none;opacity:0;border-radius:2px;align-items:center;transition:opacity .25s,translate .25s,border-color .15s,color .15s;display:flex;position:absolute;translate:0 4px}.arrow:where(.astro-esl3dtll){transition:translate .15s}.example:where(.astro-esl3dtll).live:is(:hover,:has(:focus-visible)) .open:where(.astro-esl3dtll){opacity:1;border-color:var(--accent);color:var(--link);translate:0}.example:where(.astro-esl3dtll).live:hover .arrow:where(.astro-esl3dtll){translate:2px}@media (hover:none){.example:where(.astro-esl3dtll).live .open:where(.astro-esl3dtll){opacity:1;transition-delay:.4s;translate:0}}@media (prefers-reduced-motion:reduce){.open:where(.astro-esl3dtll),.arrow:where(.astro-esl3dtll){transition:none;translate:none}}.caption:where(.astro-esl3dtll){padding:var(--s-3);gap:var(--s-1);display:grid}.title:where(.astro-esl3dtll){font:500 12px/1.5 var(--font-mono);margin:0}.title:where(.astro-esl3dtll) a:where(.astro-esl3dtll){color:var(--text);text-decoration:none}.example:where(.astro-esl3dtll):hover .title:where(.astro-esl3dtll) a:where(.astro-esl3dtll){color:var(--link)}.title:where(.astro-esl3dtll) a:where(.astro-esl3dtll):focus-visible{outline:none}.title:where(.astro-esl3dtll) a:where(.astro-esl3dtll):after{content:"";position:absolute;inset:0}.caption:where(.astro-esl3dtll) p:where(.astro-esl3dtll){color:var(--muted);font:400 11px/1.6 var(--font-mono);margin:0}ul:where(.astro-esl3dtll){align-items:center;gap:var(--s-1);margin:var(--s-2) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.more:where(.astro-wcfda4nz){gap:var(--s-3) var(--s-5);margin-top:var(--s-5);color:var(--muted);font-size:var(--sl-text-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.more:where(.astro-wcfda4nz)>*{margin:0}