@layer components{.playground[data-astro-cid-4pibx22y]{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.5rem 2.5rem;padding:clamp(1.25rem,3vw,2rem);font-size:.875rem;display:grid}.controls[data-astro-cid-4pibx22y]{align-content:start;gap:1.25rem;display:grid}fieldset[data-astro-cid-4pibx22y]{border:0;gap:.5rem;min-inline-size:0;margin:0;padding:0;display:grid}legend[data-astro-cid-4pibx22y]{font-variation-settings:var(--heading-width);margin-block-end:.5rem;padding:0;font-weight:700}.colors[data-astro-cid-4pibx22y]{grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));gap:.75rem 1rem}label[data-astro-cid-4pibx22y]{flex-wrap:wrap;align-items:center;gap:.25rem .75rem;display:flex}label[data-astro-cid-4pibx22y] code[data-astro-cid-4pibx22y]{overflow-wrap:anywhere;inline-size:fit-content;margin-block-start:.125rem;display:block}.color[data-astro-cid-4pibx22y]{flex-wrap:nowrap}.color[data-astro-cid-4pibx22y] span[data-astro-cid-4pibx22y]{flex:1 1 0;min-inline-size:0}input[data-astro-cid-4pibx22y][type=color]{background:var(--color-bg);border:1px solid var(--color-rule);border-radius:var(--radius);cursor:pointer;flex:none;block-size:2rem;inline-size:2.75rem;padding:.125rem}.range[data-astro-cid-4pibx22y] span[data-astro-cid-4pibx22y]{flex-basis:100%}input[data-astro-cid-4pibx22y][type=range]{flex:8rem;min-inline-size:0}output[data-astro-cid-4pibx22y]{font-variant-numeric:tabular-nums;min-inline-size:4.5ch}button[data-astro-cid-4pibx22y]{color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-rule);border-radius:var(--radius);cursor:pointer;justify-self:start;padding:.5rem 1rem;&:hover{border-color:var(--color-text-muted)}}.preview[data-astro-cid-4pibx22y]{align-content:start;align-self:start;gap:1rem;min-inline-size:0;display:grid;@media (width>=48rem){top:var(--sticky-top);position:sticky}}.preview-images[data-astro-cid-4pibx22y]{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}.choices[data-astro-cid-4pibx22y]{flex-wrap:wrap;gap:.5rem 1.25rem;display:flex;& label{gap:.5rem}}.snippet[data-astro-cid-4pibx22y]{color:#e6edf3;background:#0d1117;margin:0;overflow-x:auto}.sketch[data-astro-cid-f7eqx4en]{block-size:auto;inline-size:100%;display:block}.screen[data-astro-cid-f7eqx4en]{fill:color-mix(in oklab, var(--color-text) 6%, var(--color-bg));stroke:color-mix(in oklab, var(--color-text) 30%, transparent)}.image[data-astro-cid-f7eqx4en]{fill:color-mix(in oklab, var(--color-text) 20%, var(--color-bg))}.control[data-astro-cid-f7eqx4en],.caption[data-astro-cid-f7eqx4en]{fill:color-mix(in oklab, var(--color-text) 70%, var(--color-bg))}.counter[data-astro-cid-f7eqx4en]{fill:var(--color-bg)}.on[data-astro-cid-f7eqx4en],.on[data-astro-cid-f7eqx4en] *{fill:var(--color-accent)}.image[data-astro-cid-f7eqx4en].on{fill:color-mix(in oklab, var(--color-accent) 35%, transparent)}.example[data-astro-cid-ye3hgs2n]{align-content:start;gap:1rem;min-inline-size:0;display:grid;& pre{margin:0;margin-block-start:auto}}.head[data-astro-cid-ye3hgs2n]{grid-template-columns:6rem minmax(0,1fr);align-items:start;gap:1rem;display:grid}.visual[data-astro-cid-ye3hgs2n]{aspect-ratio:3/2;color:var(--color-accent);background:var(--color-surface);border-radius:var(--radius);place-items:center;display:grid;&:has(.sketch){background:0 0}}.text[data-astro-cid-ye3hgs2n]{gap:.25rem;display:grid;& :is(h3,h4){letter-spacing:-.01em;font-size:1.0625rem}& p{color:var(--color-text-muted);font-size:.9375rem}}.photos[data-astro-cid-2karrnms]{aspect-ratio:3/2;grid-auto-rows:1fr;gap:.375rem;display:grid;&[data-count="2"]{grid-template-columns:1fr 1fr}&[data-count="3"]{grid-template-columns:2fr 1fr;&>astro-image-zoom>:first-child{grid-row:span 2}}}.reference[data-astro-cid-neip5xn7]{border-block-start:1px solid var(--color-rule);font-size:.9375rem;container-type:inline-size;&>div[data-astro-cid-neip5xn7]{border-block-end:1px solid var(--color-rule);gap:.25rem 1.5rem;padding-block:.875rem;display:grid;@container (width>=36rem){grid-template-columns:minmax(0,16rem) 1fr;& dd{grid-column:2}}}& code{overflow-wrap:anywhere}}.meta[data-astro-cid-neip5xn7]{color:var(--color-text-muted);font-size:.8125rem}.toc[data-astro-cid-p33bl5ka]{font-size:.875rem;@media (width>=64rem){top:var(--sticky-top);align-self:start;position:sticky}& ol{margin:0;padding:0;list-style:none;display:grid}&>ol[data-astro-cid-p33bl5ka]{gap:.75rem}& ol ol{margin-block-start:.25rem}& a{color:var(--color-text-muted);border-inline-start:2px solid var(--color-rule);padding-block:.1875rem;padding-inline-start:.875rem;text-decoration:none;display:block;&:hover{color:var(--color-text)}&[aria-current]{color:var(--color-text);border-inline-start-color:var(--color-accent)}}& ol ol a{padding-inline-start:1.625rem}&>ol[data-astro-cid-p33bl5ka]>li[data-astro-cid-p33bl5ka]>a[data-astro-cid-p33bl5ka]{font-weight:600}&>ol[data-astro-cid-p33bl5ka]>li[data-astro-cid-p33bl5ka]:has([aria-current])>a[data-astro-cid-p33bl5ka]{color:var(--color-text)}}.docs[data-astro-cid-37beepxv]{max-inline-size:calc(var(--width-wide) + 2 * var(--gutter));padding-inline:var(--gutter);gap:2rem 3.5rem;margin-inline:auto;display:grid;@media (width>=64rem){grid-template-columns:12rem minmax(0,1fr)}}.intro[data-astro-cid-37beepxv]{grid-column:1/-1;gap:1rem;display:grid;& h1{letter-spacing:-.035em;font-size:clamp(2.5rem,1.5rem + 3.5vw,4rem);line-height:1}}.content[data-astro-cid-37beepxv]{grid-template-columns:[full-start wide-start text-start]minmax(0,58rem)[text-end wide-end full-end]}.note[data-astro-cid-37beepxv]{color:var(--color-text-muted);border-inline-start:2px solid var(--color-accent);gap:.75rem;padding-inline-start:1.25rem;display:grid;& strong{color:var(--color-text)}}.sources[data-astro-cid-37beepxv]{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.5rem 1rem;display:grid;& img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);inline-size:100%}}.source[data-astro-cid-37beepxv]{align-content:start;gap:.5rem;display:grid}.examples[data-astro-cid-37beepxv]{gap:3rem 2rem;margin:0;padding:0;display:grid;@media (width>=40rem){grid-template-columns:repeat(2,minmax(0,1fr))}}.card[data-astro-cid-37beepxv]{--photo-radius:0;--focus-offset:-4px;background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius);overflow:hidden}.card-body[data-astro-cid-37beepxv]{gap:.5rem;padding:1.25rem;display:grid;&>p[data-astro-cid-37beepxv]:not(.label){color:var(--color-text-muted)}}.card-thumbs[data-astro-cid-37beepxv]{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-block-start:.5rem;display:grid}.theme-example[data-astro-cid-37beepxv]{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));align-items:start;gap:1rem 1.5rem;display:grid;&>*,&>astro-image-zoom>*{min-inline-size:0}}.default-layout[data-astro-cid-37beepxv]{align-items:center;gap:1rem 2rem;margin:0;display:grid;@media (width>=40rem){grid-template-columns:minmax(0,16rem) minmax(0,1fr)}& figcaption{gap:.5rem;font-size:.9375rem;display:grid}& ul{color:var(--color-text-muted);gap:.25rem;margin:0;padding-inline-start:1.25rem;display:grid}}}