section[data-astro-cid-4dh7c4wu] pc-scroller[data-astro-cid-4dh7c4wu],section[data-astro-cid-4dh7c4wu] p[data-astro-cid-4dh7c4wu]{margin-block-end:var(--pc-content-spacing)}section[data-astro-cid-4dh7c4wu] pc-scroller[data-astro-cid-4dh7c4wu] table[data-astro-cid-4dh7c4wu] .name[data-astro-cid-4dh7c4wu],section[data-astro-cid-4dh7c4wu] pc-scroller[data-astro-cid-4dh7c4wu] table[data-astro-cid-4dh7c4wu] .default[data-astro-cid-4dh7c4wu],section[data-astro-cid-4dh7c4wu] pc-scroller[data-astro-cid-4dh7c4wu] table[data-astro-cid-4dh7c4wu] .arguments[data-astro-cid-4dh7c4wu],section[data-astro-cid-4dh7c4wu] pc-scroller[data-astro-cid-4dh7c4wu] table[data-astro-cid-4dh7c4wu] .event-detail[data-astro-cid-4dh7c4wu]{white-space:nowrap}section[data-astro-cid-4dh7c4wu] pc-scroller[data-astro-cid-4dh7c4wu] table[data-astro-cid-4dh7c4wu] .description[data-astro-cid-4dh7c4wu]{min-inline-size:40ch}section[data-astro-cid-4dh7c4wu] pc-scroller[data-astro-cid-4dh7c4wu] table[data-astro-cid-4dh7c4wu] .type-info[data-astro-cid-4dh7c4wu] b[data-astro-cid-4dh7c4wu]{font-weight:var(--pc-font-weight-semibold)}.api-documentation .api-section pc-scroller table .reflects{color:var(--pc-color-success-on-quiet)}.api-documentation .api-section pc-scroller table .does-not-reflect{color:var(--pc-color-danger-on-quiet)}.code-demo[data-astro-cid-4cxtsjja]{background-color:var(--pc-color-surface-lowered);border:var(--pc-border-width-s) var(--pc-border-style) var(--pc-color-neutral-border-quiet);border-radius:var(--pc-border-radius-l);inline-size:100%;isolation:isolate;margin-block-end:var(--pc-content-spacing);position:relative;overflow:visible}.code-demo[data-astro-cid-4cxtsjja],.pc-light[data-astro-cid-4cxtsjja].code-demo,.pc-light .code-demo[data-astro-cid-4cxtsjja]{--pc-color-syntax-entity-name:var(--pc-color-purple-20);--pc-color-text-normal-inverse:oklch(100% 0 0);--pc-color-mix-syntax:10%}.pc-dark[data-astro-cid-4cxtsjja].code-demo,.pc-dark .code-demo[data-astro-cid-4cxtsjja]{--pc-color-syntax-entity-name:var(--pc-color-purple-70);--pc-color-text-normal-inverse:oklch(0% 0 0);--pc-color-mix-syntax:20%}.preview-block[data-astro-cid-4cxtsjja]{background-color:var(--pc-color-surface-default);border-start-start-radius:var(--pc-border-radius-l);border-start-end-radius:var(--pc-border-radius-l);min-inline-size:20rem;max-inline-size:100%;position:relative;overflow:visible}.resize-handle[data-astro-cid-4cxtsjja]{border-inline-start:var(--pc-border-width-s) var(--pc-border-style) var(--pc-color-neutral-border-quiet);cursor:ew-resize;justify-content:center;align-items:center;inline-size:1.75rem;display:flex;position:absolute;inset-block:0;inset-inline-end:0}.preview-content-container[data-astro-cid-4cxtsjja]{padding:var(--pc-spacing-xxl);block-size:100%;inline-size:100%;padding-inline-end:calc(var(--pc-spacing-xxl) + 1.75rem);position:relative;overflow:visible}.code-block[data-astro-cid-4cxtsjja]{background-color:var(--pc-color-surface-raised);border-block-start:var(--pc-border-width-s) var(--pc-border-style) var(--pc-color-neutral-border-quiet);interpolate-size:allow-keywords;max-block-size:0;transition:max-block-size .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.code-block[data-astro-cid-4cxtsjja].open{max-block-size:max-content;transition:max-block-size .45s cubic-bezier(.2,1,.3,1)}.code-block[data-astro-cid-4cxtsjja] [data-astro-cid-4cxtsjja]:is(pre,code){font-size:var(--pc-font-size-s);line-height:var(--pc-line-height-normal);background-color:#0000;border-radius:0;overflow:hidden;margin:0!important;padding:0!important}.code-block[data-astro-cid-4cxtsjja] .shiki[data-astro-cid-4cxtsjja]{max-inline-size:100%;font-size:var(--pc-font-size-xs);line-height:var(--pc-line-height-normal);background-color:#0000;overflow-x:auto;padding-block:var(--pc-spacing-l)!important}.code-block[data-astro-cid-4cxtsjja] .shiki[data-astro-cid-4cxtsjja]:focus-visible{outline:var(--pc-focus-ring);outline-offset:var(--pc-focus-ring-offset);animation:inset-focus-ring-animation var(--pc-transition-medium) cubic-bezier(.33, 1, .68, 1)}.code-block[data-astro-cid-4cxtsjja] .shiki[data-astro-cid-4cxtsjja] code[data-astro-cid-4cxtsjja] .line[data-astro-cid-4cxtsjja]{display:block}.code-block[data-astro-cid-4cxtsjja] .shiki[data-astro-cid-4cxtsjja] code[data-astro-cid-4cxtsjja] .line[data-astro-cid-4cxtsjja] .code[data-astro-cid-4cxtsjja]{padding-inline:var(--pc-spacing-l)}.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]{z-index:1;position:absolute;inset-block-start:var(--pc-spacing-s);inset-inline-end:var(--pc-spacing-s)}.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]::part(button){background-color:color-mix(in oklab, var(--pc-color-surface-raised), transparent 35%);opacity:0;transition:all var(--pc-transition-fast) ease-in-out}@media (hover:hover){.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]::part(button):hover{background-color:color-mix(in oklab, color-mix(in oklab, var(--pc-color-surface-raised), transparent 10%), var(--pc-color-mix-hover))}}.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]::part(button):focus-visible{background-color:color-mix(in oklab, color-mix(in oklab, var(--pc-color-surface-raised), transparent 10%), var(--pc-color-mix-hover))}.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]::part(button):active{background-color:color-mix(in oklab, color-mix(in oklab, var(--pc-color-surface-raised), transparent 5%), var(--pc-color-mix-active))}@media (hover:hover){.code-block[data-astro-cid-4cxtsjja]:hover pc-copy-button[data-astro-cid-4cxtsjja]::part(button),.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]::part(button):active,.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]:state(success)::part(button),.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]:state(error)::part(button){opacity:1}}.code-block[data-astro-cid-4cxtsjja]:has(>:focus-visible) pc-copy-button[data-astro-cid-4cxtsjja]::part(button),.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]::part(button):focus-visible{opacity:1}@media (hover:none){.code-block[data-astro-cid-4cxtsjja] pc-copy-button[data-astro-cid-4cxtsjja]::part(button){opacity:1}}.code-block[data-astro-cid-4cxtsjja].open+.toggle-block[data-astro-cid-4cxtsjja]{border-block-start:var(--pc-border-width-s) var(--pc-border-style) var(--pc-color-neutral-border-quiet)}.toggle-block[data-astro-cid-4cxtsjja]{background-color:var(--pc-color-surface-default);border-end-end-radius:var(--pc-border-radius-l);border-end-start-radius:var(--pc-border-radius-l);justify-content:center;align-items:center;display:flex}.toggle-block[data-astro-cid-4cxtsjja]:has(.codepen-button) pc-button[data-astro-cid-4cxtsjja]:first-child{inline-size:85%}.toggle-block[data-astro-cid-4cxtsjja]:not(:has(.codepen-button)) pc-button[data-astro-cid-4cxtsjja]{inline-size:100%}.toggle-block[data-astro-cid-4cxtsjja] .codepen-button[data-astro-cid-4cxtsjja]{border-inline-start:var(--pc-border-width-s) var(--pc-border-style) var(--pc-color-neutral-border-quiet);flex-grow:1;inline-size:15%;min-inline-size:5rem}.toggle-block[data-astro-cid-4cxtsjja]:has(.codepen-button) pc-button[data-astro-cid-4cxtsjja]::part(base){border-radius:0;border-end-start-radius:var(--pc-border-radius-l)}.toggle-block[data-astro-cid-4cxtsjja]:not(:has(.codepen-button)) pc-button[data-astro-cid-4cxtsjja]::part(base){border-radius:var(--pc-border-radius-l);border-start-start-radius:0;border-start-end-radius:0}.toggle-block[data-astro-cid-4cxtsjja] pc-button[data-astro-cid-4cxtsjja].codepen-button::part(base){border-end-end-radius:var(--pc-border-radius-l);border-end-start-radius:0}.toggle-block[data-astro-cid-4cxtsjja] pc-button[data-astro-cid-4cxtsjja] pc-icon[data-astro-cid-4cxtsjja]{transition:transform .5s cubic-bezier(.16,1,.3,1)}.code-block[data-astro-cid-4cxtsjja].open .toggle-block[data-astro-cid-4cxtsjja] pc-button[data-astro-cid-4cxtsjja] pc-icon[data-astro-cid-4cxtsjja]{transition:transform .45s cubic-bezier(.16,1,.3,1)}@keyframes inset-focus-ring-animation{0%{outline-offset:0;outline-width:0}50%{outline-width:calc(var(--pc-focus-ring-width) * 2);outline-offset:calc(-1 * (var(--pc-focus-ring-width) * 2))}to{outline-width:var(--pc-focus-ring-width);outline-offset:calc(-1 * var(--pc-focus-ring-width))}}@media (hover:none),screen and (width<=600px){.preview-block[data-astro-cid-4cxtsjja]{min-inline-size:100%;max-inline-size:100%}.preview-content-container[data-astro-cid-4cxtsjja]{padding-inline-end:var(--pc-spacing-xxl)}.resize-handle[data-astro-cid-4cxtsjja]{display:none}}.color-palette{gap:1rem var(--pc-spacing-xs);grid-template-columns:200px repeat(11,1fr);margin-block:2rem;margin-inline:0;display:grid;& .color-palette-name{font-size:var(--pc-font-size-m);font-weight:var(--pc-font-weight-semibold);grid-template-columns:repeat(11,1fr);& code{font-size:var(--pc-font-size-xs)}}& .color-palette-swatch-container{font-size:var(--pc-font-size-xs);text-align:center}}.color-palette-swatch{border-radius:var(--pc-border-radius-m);align-items:center;min-block-size:3rem;display:flex}.color-mix-demo{background-image:linear-gradient(to right, color-mix(in oklab, transparent, var(--mix-color)) 25%, color-mix(in oklab, var(--pc-color-primary-fill-loud), var(--mix-color)) 25%, color-mix(in oklab, var(--pc-color-primary-fill-loud), var(--mix-color)) 75%, var(--pc-color-primary-fill-loud) 75%, var(--pc-color-primary-fill-loud));color:var(--pc-color-primary-on-loud);text-align:center;border:none;justify-content:center}@media screen and (width<=768px){.color-palette{grid-template-columns:repeat(6,1fr);& .color-palette-name{grid-column-start:span 6}}}.shadow-demo{border-radius:var(--pc-border-radius-m);background-color:#0000;block-size:4rem;inline-size:4rem;margin-inline:auto}.spacing-demo{--dot-size:.75rem;margin-inline:var(--dot-size);background-color:var(--pc-color-neutral-fill-normal);border-radius:var(--pc-border-radius-s);justify-content:space-between;align-items:center;block-size:2rem;display:flex;&:before{content:"";aspect-ratio:1;inline-size:var(--dot-size);block-size:var(--dot-size);background-color:var(--pc-color-neutral-on-normal);border-radius:var(--pc-border-radius-circle);margin-inline-start:calc(var(--dot-size) * -1)}&:after{content:"";aspect-ratio:1;inline-size:var(--dot-size);block-size:var(--dot-size);background-color:var(--pc-color-neutral-on-normal);border-radius:var(--pc-border-radius-circle);margin-inline-end:calc(var(--dot-size) * -1)}}.transition-demo{background-color:var(--pc-color-neutral-fill-normal);border-radius:var(--pc-border-radius-m);cursor:pointer;block-size:2.25rem;transition:inherit;position:relative;overflow:hidden;&:after{content:"";background-color:var(--pc-color-primary-fill-loud);border-radius:var(--pc-border-radius-m);block-size:100%;inline-size:0;transition:inline-size inherit ease-in-out;position:absolute;inset-block-start:0;inset-inline-start:0}@media (hover:hover){&:hover:after{inline-size:100%}}@media (hover:none){&:active:after{inline-size:100%}}}.preview-wrapper{padding:var(--pc-spacing-xs);border:var(--pc-border-width-s) dashed var(--pc-color-neutral-border-normal);border-radius:var(--pc-border-radius-m);min-block-size:3em;& .preview-block:not(:has(~.code-block,~.toggle-block)){aspect-ratio:1;background-color:var(--pc-color-neutral-fill-loud);border-radius:var(--pc-border-radius-s);min-block-size:1em}}