@zeix/ui-element/docs/assets/main.css

UIElement - a HTML-first library for reactive Web Components

:root{--content-max-width:48rem;--breakout-size:12rem;--space-xxs:.2361rem;--space-xs:.382rem;--space-s:.618rem;--space-m:1rem;--space-l:1.618rem;--space-xl:2.6179rem;--space-xxl:4.2358rem;--font-size-xs:clamp(.75rem,.125vw + .725rem,.7813rem);--font-size-s:clamp(.875rem,.25vw + .825rem,.9375rem);--font-size-m:clamp(1rem,.5vw + .9rem,1.125rem);--font-size-l:clamp(1.125rem,.75vw + .975rem,1.3125rem);--font-size-xl:clamp(1.3125rem,1vw + 1.1125rem,1.5625rem);--font-size-xxl:clamp(1.5rem,1.5vw + 1.2rem,1.875rem);--font-size-xxxl:clamp(1.75rem,2vw + 1.35rem,2.25rem);--line-height-xs:1;--line-height-s:1.2;--line-height-m:1.414;--line-height-l:1.618;--color-white:white;--color-black:black;--color-neutral-10:#ecebef;--color-neutral-20:#d8d6dd;--color-neutral-30:#c4c1ca;--color-neutral-40:#aeabb6;--color-neutral-50:#97939f;--color-neutral-60:#7e7b85;--color-neutral-70:#636169;--color-neutral-80:#46444a;--color-neutral-90:#242326;--color-blue-10:#e1eef8;--color-blue-20:#badef7;--color-blue-30:#8eccf6;--color-blue-40:#5fb9f0;--color-blue-50:#36a2de;--color-blue-60:#2488bd;--color-blue-70:#2a6a90;--color-blue-80:#2a4a5e;--color-blue-90:#1b252c;--color-purple-10:#eee9fa;--color-purple-20:#dfd0fb;--color-purple-30:#cfb5fe;--color-purple-40:#be99fa;--color-purple-50:#a97fe9;--color-purple-60:#8e69c6;--color-purple-70:#6e5597;--color-purple-80:#4b3e62;--color-purple-90:#26212d;--color-pink-10:#fde4ed;--color-pink-20:#fec5da;--color-pink-30:#fda3c7;--color-pink-40:#f283b2;--color-pink-50:#db689b;--color-pink-60:#b95482;--color-pink-70:#8f4666;--color-pink-80:#603647;--color-pink-90:#2e1e24;--color-orange-10:#fce7d7;--color-orange-20:#fccba6;--color-orange-30:#f8ae75;--color-orange-40:#ea934c;--color-orange-50:#d37a30;--color-orange-60:#b26523;--color-orange-70:#8a5122;--color-orange-80:#5d3b21;--color-orange-90:#2d2016;--color-green-10:#e8efd8;--color-green-20:#cfdfa8;--color-green-30:#b5cd77;--color-green-40:#9db84c;--color-green-50:#86a12e;--color-green-60:#6f8721;--color-green-70:#586a21;--color-green-80:#3f4a21;--color-green-90:#212617;--color-primary:var(--color-purple-70);--color-primary-hover:var(--color-purple-80);--color-primary-active:var(--color-purple-90);--color-primary-text:var(--color-purple-10);--color-secondary:var(--color-neutral-20);--color-secondary-hover:var(--color-neutral-30);--color-secondary-active:var(--color-neutral-40);--color-error:var(--color-pink-70);--color-error-hover:var(--color-pink-80);--color-error-active:var(--color-pink-90);--color-error-text:var(--color-pink-10);--color-error-invalid:var(--color-pink-50);--color-success:var(--color-green-70);--color-success-hover:var(--color-green-80);--color-success-active:var(--color-green-90);--color-success-text:var(--color-green-10);--color-selection:var(--color-blue-50);--color-input:var(--color-white);--color-background:var(--color-neutral-10);--color-background-alt:var(--color-neutral-20);--color-border:var(--color-neutral-50);--color-text:#2a1c42;--color-text-soft:var(--color-neutral-80);--color-text-inverted:var(--color-purple-10);--font-family-sans:"Helvetica Neue",Arial,Roboto,sans-serif;--font-family-mono:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--font-weight-regular:400;--font-weight-bold:700;--opacity-transparent:0;--opacity-translucent:.4;--opacity-dimmed:.8;--opacity-solid:1;--transition-short:.2s;--transition-medium:.5s;--transition-long:1.25s;--easing-linear:linear;--easing-in:ease-in;--easing-out:ease-out;--easing-inout:ease-in-out;--input-height:2rem}@media screen and (min-width:45em) and (max-width:75em){:root{--font-size-xs:clamp(.7813rem,.1042vw + .7344rem,.8125rem);--font-size-s:clamp(.9375rem,.2083vw + .8438rem,1rem);--font-size-m:clamp(1.125rem,.4167vw + .9375rem,1.25rem);--font-size-l:clamp(1.3125rem,.8333vw + .9375rem,1.5625rem);--font-size-xl:clamp(1.5625rem,1.4583vw + .9063rem,2rem);--font-size-xxl:clamp(1.875rem,2.0833vw + .9375rem,2.5rem);--font-size-xxxl:clamp(2.25rem,2.9167vw + .9375rem,3.125rem)}}@media (prefers-color-scheme:dark){:root{--color-input:var(--color-black);--color-background:var(--color-neutral-90);--color-background-alt:var(--color-neutral-80);--color-primary:var(--color-purple-30);--color-primary-hover:var(--color-purple-20);--color-primary-active:var(--color-purple-10);--color-primary-text:var(--color-purple-90);--color-secondary:var(--color-neutral-80);--color-secondary-hover:var(--color-neutral-70);--color-secondary-active:var(--color-neutral-60);--color-error:var(--color-pink-30);--color-error-hover:var(--color-pink-20);--color-error-active:var(--color-pink-10);--color-error-text:var(--color-pink-90);--color-success:var(--color-green-30);--color-success-hover:var(--color-green-20);--color-success-active:var(--color-green-10);--color-success-text:var(--color-green-90);--color-text:var(--color-purple-10);--color-text-soft:var(--color-neutral-20);--color-text-inverted:#2a1c42}}@media (prefers-reduced-transparency){:root{--opacity-translucent:.7;--opacity-dimmed:.9}}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--font-family-sans);scroll-padding-top:var(--space-xl);scroll-behavior:smooth}input,textarea,button,select,option,optgroup{font-family:var(--font-family-sans)}body{line-height:inherit;color:var(--color-text);background:var(--color-background);margin:0;padding:0}:focus-visible{box-shadow:0 0 var(--space-xxs)2px var(--color-selection);outline:none}::selection{background-color:color-mix(in srgb,var(--color-selection)50%,transparent)}h1{font-size:var(--font-size-xxxl);line-height:var(--line-height-xs)}h2{font-size:var(--font-size-xxl);line-height:var(--line-height-s)}h3{font-size:var(--font-size-xl);line-height:var(--line-height-s)}h4{font-size:var(--font-size-l);line-height:var(--line-height-m)}h5,h6{font-size:var(--font-size-m);line-height:var(--line-height-m)}p,li,th,td,dt,dd,pre,input{font-size:var(--font-size-m);line-height:var(--line-height-l)}small{font-size:var(--font-size-s);line-height:var(--line-height-m)}dl{gap:var(--space-s)var(--space-m);grid-template-columns:auto 1fr;display:grid}dl dt{font-weight:var(--font-weight-bold);color:var(--color-text-soft)}dl dd{margin:0}details[open] summary{margin-bottom:var(--space-m)}header{margin-block:var(--space-xl)}header h1{justify-content:space-between;align-items:baseline;gap:var(--space-m);display:flex}.content-grid,main{grid-template-columns:[fullwidth-start]minmax(var(--space-l),1fr)[breakout-start]minmax(0,var(--breakout-size))[content-start]min(var(--content-max-width),calc(100% - 2*var(--space-l)))[content-end]minmax(0,var(--breakout-size))[breakout-end]minmax(var(--space-l),1fr)[fullwidth-end];display:grid}:is(.content-grid,main)>.content{grid-column:content}:is(.content-grid,main)>section{grid-column:content}:is(.content-grid,main) .breakout{grid-column:breakout}section{margin-block:var(--space-xl)}section h3{margin-top:var(--space-xl);margin-bottom:var(--space-l)}h1,h2,h3,h4,h5,h6,p,ol,ul,dl,table,pre{margin-top:0;margin-bottom:var(--space-l)}ol,ul{gap:var(--space-m);flex-direction:column;display:flex}p code,li code,dt code,dd code,td code{background-color:var(--color-background-alt);border-radius:var(--space-xxs);padding:var(--space-xxs);font-family:var(--font-family-mono);font-size:calc(.95*var(--font-size-m))}:is(h1,h2,h3,h4,h5,h6)[id]{margin-left:calc(-1*var(--space-l));display:flex}:is(h1,h2,h3,h4,h5,h6) .anchor{width:var(--space-l);text-decoration:none;display:inline-block}:is(h1,h2,h3,h4,h5,h6) .anchor .permalink{visibility:hidden;font-size:var(--font-size-m)}:is(h1,h2,h3,h4,h5,h6):hover .anchor .permalink{visibility:visible}a[href]{color:var(--color-primary)}a[href]:hover{color:var(--color-primary-hover)}a[href]:active{color:var(--color-primary-active)}[aria-hidden=true],[hidden]{display:none}.visually-hidden{width:1px;height:1px;position:absolute;top:auto;left:-10000px;overflow:hidden}basic-counter button{border:1px solid var(--color-border);border-radius:var(--space-xs);background-color:var(--color-secondary);padding:var(--space-xs)var(--space-s);cursor:pointer;color:var(--color-text);font-size:var(--font-size-m);line-height:var(--line-height-xs);transition:background-color var(--transition-short)var(--easing-inout)}basic-counter button:hover{background-color:var(--color-secondary-hover)}basic-counter button:active{background-color:var(--color-secondary-active)}basic-button{flex:0;display:inline-block;position:relative}basic-button button{height:var(--input-height);min-width:var(--input-height);border-radius:var(--space-xs);background-color:var(--color-secondary);border:1px solid var(--color-border);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;opacity:var(--opacity-dimmed);transition:all var(--transition-shorter)var(--easing-inout)}basic-button button:disabled{opacity:var(--opacity-translucent)}basic-button button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}basic-button button:not(:disabled):hover{background-color:var(--color-secondary-hover)}basic-button button:not(:disabled):active{background-color:var(--color-secondary-active)}basic-button button.primary{color:var(--color-primary-text);background-color:var(--color-primary);border-color:var(--color-primary-active)}basic-button button.primary:not(:disabled){opacity:var(--opacity-solid)}basic-button button.primary:not(:disabled):hover{background-color:var(--color-primary-hover)}basic-button button.primary:not(:disabled):active{background-color:var(--color-primary-active)}basic-button button.destructive{color:var(--color-error-text);background-color:var(--color-error);border-color:var(--color-error-active)}basic-button button.destructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.destructive:not(:disabled):hover{background-color:var(--color-error-hover)}basic-button button.destructive:not(:disabled):active{background-color:var(--color-error-active)}basic-button button.constructive{color:var(--color-success-text);background-color:var(--color-success);border-color:var(--color-success-active)}basic-button button.constructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.constructive:not(:disabled):hover{background-color:var(--color-success-hover)}basic-button button.constructive:not(:disabled):active{background-color:var(--color-success-active)}basic-button button.small{--input-height:var(--space-l);font-size:var(--font-size-xs);padding-inline:var(--space-xs)}basic-button button.large{--input-height:var(--space-xl);font-size:var(--font-size-m);padding-inline:var(--space-m)}basic-button .badge{box-sizing:border-box;top:calc(-1*var(--space-s));right:calc(-1*var(--space-s));font-size:var(--font-size-xs);line-height:var(--line-height-xs);background-color:var(--color-primary);color:var(--color-text-inverted);padding:var(--space-xxs)var(--space-xs);height:calc(2*var(--space-s));min-width:calc(2*var(--space-s));border-radius:var(--space-s);position:absolute}basic-button .badge:empty{display:none}card-callout{padding:var(--space-s)var(--space-s)var(--space-s)var(--space-xl);margin:0 0 var(--space-l);font-size:var(--font-size-m);line-height:var(--line-height-l);background:var(--color-blue-20);border-left:var(--space-xxs)solid var(--color-blue-50);border-radius:var(--space-xs);display:block;position:relative}card-callout:before{content:"ℹ️";left:var(--space-s);position:absolute}card-callout>:last-child{margin-bottom:0}card-callout.tip{background:var(--color-green-20);border-color:var(--color-green-50)}card-callout.tip:before{content:"💡"}card-callout.note{background:var(--color-neutral-20);border-color:var(--color-neutral-50)}card-callout.note:before{content:"💬"}card-callout.caution{background:var(--color-orange-20);border-color:var(--color-orange-50)}card-callout.caution:before{content:"⚠️"}card-callout.danger{background:var(--color-pink-20);border-color:var(--color-pink-50)}card-callout.danger:before{content:"🚨"}@media (prefers-color-scheme:dark){card-callout{background:var(--color-blue-80)}card-callout.tip{background:var(--color-green-80)}card-callout.note{background:var(--color-neutral-80)}card-callout.caution{background:var(--color-orange-80)}card-callout.danger{background:var(--color-pink-80)}}form-checkbox{border-radius:var(--space-xs);flex-grow:1}form-checkbox:focus-within{box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}form-checkbox input:focus{box-shadow:none;outline:none}form-checkbox label{font-size:var(--font-size-s)}form-checkbox.todo label{gap:var(--space-s);line-height:var(--input-height);cursor:pointer;display:flex}form-checkbox.todo label:before{box-sizing:border-box;content:"";font-size:var(--font-size-l);text-align:center;width:var(--input-height);height:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);border-radius:100%;display:inline-block}form-checkbox.todo label:hover:before{background-color:var(--color-secondary-hover);opacity:var(--opacity-solid)}form-checkbox.todo label:active:before{background-color:var(--color-secondary-active)}form-checkbox.todo[checked] label{opacity:var(--opacity-translucent)}form-checkbox.todo[checked] label span{text-decoration:line-through}form-checkbox.todo[checked] label:before{color:var(--color-text-inverted);background-color:var(--color-success);border-color:var(--color-success-active);text-shadow:0 0 var(--space-xs)var(--color-success-active);content:"✓"}form-checkbox.todo[checked] label:hover:before{background-color:var(--color-success-hover)}form-checkbox.todo[checked] label:active:before{background-color:var(--color-success-active)}form-radiogroup{display:inline-block}form-radiogroup>fieldset{gap:var(--space-m);padding:var(--space-xs)0 var(--space-s);border:none;margin:0;display:flex}form-radiogroup legend{font-size:var(--font-size-s)}form-radiogroup label{font-size:var(--font-size-s)}form-radiogroup label{border-radius:var(--space-xs)}form-radiogroup label:focus-within{box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}form-radiogroup label input:focus{box-shadow:none;outline:none}form-radiogroup.split-button fieldset{gap:0;padding:0}form-radiogroup.split-button label{box-sizing:border-box;height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:var(--space-xs)var(--space-s);cursor:pointer;line-height:var(--line-height-s);opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout);border-left-width:0;border-radius:0;display:inline-block}form-radiogroup.split-button label:hover{background-color:var(--color-secondary-hover);opacity:var(--opacity-solid)}form-radiogroup.split-button label:active{background-color:var(--color-secondary-active)}form-radiogroup.split-button label:focus-within{z-index:1}form-radiogroup.split-button label.selected{color:var(--color-text-inverted);background-color:var(--color-primary);border-color:var(--color-primary-active)}form-radiogroup.split-button label.selected:hover{background-color:var(--color-primary-hover)}form-radiogroup.split-button label.selected:active{background-color:var(--color-primary-active)}form-radiogroup.split-button legend+label{border-radius:var(--space-xs)0 0 var(--space-xs);border-left-width:1px}form-radiogroup.split-button label:last-child{border-radius:0 var(--space-xs)var(--space-xs)0}form-textbox{width:100%}form-textbox label{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox p{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox button{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox label{font-size:var(--font-size-s);color:var(--color-text);margin-bottom:var(--space-xxs);display:block}form-textbox input{box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);width:100%;transition:color var(--transition-short)var(--easing-inout);display:inline-block}form-textbox input[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-textbox input::-ms-input-placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox input::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox textarea{box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);width:100%;transition:color var(--transition-short)var(--easing-inout);display:inline-block}form-textbox textarea[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-textbox textarea::-ms-input-placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox textarea::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox input{height:var(--input-height)}form-textbox[clearable] .input{position:relative}form-textbox[clearable] .input input{padding-right:var(--input-height)}form-textbox[clearable] .input .clear{font-size:var(--font-size-xs);line-height:var(--line-height-xs);color:var(--color-input);background-color:var(--color-text-soft);width:calc(.6*var(--input-height));height:calc(.6*var(--input-height));margin:calc(.2*var(--input-height));border:0;border-radius:50%;padding:0;position:absolute;bottom:0;right:0}form-textbox[clearable] .input .clear:hover{background-color:var(--color-text)}form-textbox .error{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-textbox .error:empty{display:none}form-textbox .description{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-textbox .description:empty{display:none}form-textbox .error{color:color-mix(in srgb,var(--color-text)50%,var(--color-error))}form-textbox .description{color:var(--color-text-soft)}form-textbox:focus-within label{opacity:var(--opacity-solid)}form-textbox:focus-within p{opacity:var(--opacity-solid)}form-textbox:focus-within button{opacity:var(--opacity-solid)}form-textbox:focus-within input{color:var(--color-text)}form-textbox:focus-within textarea{color:var(--color-text)}form-combobox{width:100%}form-combobox label{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-combobox p{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-combobox button{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-combobox label{font-size:var(--font-size-s);color:var(--color-text);margin-bottom:var(--space-xxs);display:block}form-combobox input{box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--input-height)var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);height:var(--input-height);width:100%;transition:color var(--transition-short)var(--easing-inout);display:inline-block}form-combobox input[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-combobox input::-ms-input-placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-combobox input::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-combobox .input{position:relative}form-combobox .clear{font-size:var(--font-size-xs);line-height:var(--line-height-xs);color:var(--color-input);background-color:var(--color-text-soft);width:calc(.6*var(--input-height));height:calc(.6*var(--input-height));margin:calc(.2*var(--input-height));border:0;border-radius:50%;padding:0;position:absolute;bottom:0;right:0}form-combobox .clear:hover{background-color:var(--color-text)}form-combobox [role=listbox]{background:var(--color-secondary);border:1px solid var(--color-border);z-index:1;border-top:none;gap:0;width:calc(100% - 2px);margin:0;padding:0;list-style:none;position:absolute;top:100%;left:0}form-combobox [role=listbox] [role=option]{padding:var(--space-xs)var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);color:var(--color-text);cursor:pointer;transition:background var(--transition-short)var(--easing-inout);margin:0}form-combobox [role=listbox] [role=option][aria-selected=true]{background:var(--color-primary);color:var(--color-text-inverted)}form-combobox [role=listbox] [role=option]:hover{background:var(--color-secondary-hover)}form-combobox [role=listbox] [role=option]:hover[aria-selected=true]{background:var(--color-primary-hover)}form-combobox .error{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-combobox .error:empty{display:none}form-combobox .description{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-combobox .description:empty{display:none}form-combobox .error{color:color-mix(in srgb,var(--color-text)50%,var(--color-error))}form-combobox .description{color:var(--color-text-soft)}form-combobox:focus-within label{opacity:var(--opacity-solid)}form-combobox:focus-within p{opacity:var(--opacity-solid)}form-combobox:focus-within button{opacity:var(--opacity-solid)}form-combobox:focus-within input{color:var(--color-text)}form-spinbutton{max-width:7rem;display:inline-flex}form-spinbutton .value{box-sizing:border-box;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);height:var(--input-height);text-align:center;min-width:2rem;max-width:3rem;font-size:var(--font-size-s);padding:0 var(--space-s);flex-grow:1;margin:0;line-height:2}form-spinbutton>button{box-sizing:border-box;height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;cursor:pointer;transition:all var(--transition-shorter)var(--easing-inout);flex-grow:0}form-spinbutton>button:disabled{opacity:var(--opacity-translucent)}form-spinbutton>button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}form-spinbutton>button:not(:disabled):hover{background-color:var(--color-secondary-hover)}form-spinbutton>button:not(:disabled):active{background-color:var(--color-secondary-active)}form-spinbutton>button:first-child{border-radius:var(--space-xs)0 0 var(--space-xs)}form-spinbutton>button:last-child{border-radius:0 var(--space-xs)var(--space-xs)0}form-spinbutton [hidden]+button{border-radius:var(--space-xs);color:var(--color-text-inverted);background-color:var(--color-primary);border-color:var(--color-primary-active);flex-grow:1}form-spinbutton [hidden]+button:hover{background-color:var(--color-primary-hover)}form-spinbutton [hidden]+button:active{background-color:var(--color-primary-active)}module-carousel{aspect-ratio:16/9;display:flex;position:relative;overflow:hidden}module-carousel .slides{justify-content:center;align-items:center;width:100%;display:flex}module-carousel [role=tabpanel]{text-align:center;width:100%;height:100%}module-carousel [role=tabpanel][aria-current=false]{display:none}module-carousel [role=tabpanel] h3{display:block}module-carousel>nav>button{border-radius:var(--space-xs);height:96%;padding:var(--space-m);font-size:var(--font-size-xl);color:var(--color-text);opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout);cursor:pointer;background:0 0;border:0;position:absolute;top:2%}module-carousel>nav>button:hover{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}module-carousel>nav>button:active{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}module-carousel>nav>button:focus{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}module-carousel>nav>button:active{background-color:rgba(0,0,0,.1)}module-carousel>nav>button.prev{left:1%}module-carousel>nav>button.next{right:1%}module-carousel>nav [role=tablist]{width:100%;padding-block:var(--space-s);justify-content:center;display:flex;position:absolute;bottom:0;left:0}module-carousel>nav [role=tablist] [role=tab]{width:var(--space-l);height:var(--space-l);font-size:var(--font-size-l);line-height:var(--line-height-xs);color:var(--color-text);opacity:var(--opacity-translucent);transition:opacity var(--transition-short)var(--easing-inout);cursor:pointer;background-color:transparent;border:0;border-radius:50%;padding:0}module-carousel>nav [role=tablist] [role=tab]:hover{opacity:var(--opacity-dimmed)}module-carousel>nav [role=tablist] [role=tab][aria-selected=true]{opacity:var(--opacity-solid)}module-catalog{gap:var(--space-l);flex-direction:column;display:flex}module-catalog>header{margin:0}module-catalog p{margin:0}module-catalog ul{margin:0;padding:0}module-catalog header{gap:var(--space-m);justify-content:space-between;display:flex}module-catalog li{gap:var(--space-m);justify-content:space-between;display:flex}module-codeblock{margin:0 0 var(--space-l);display:block;position:relative}module-codeblock .meta{margin-bottom:var(--space-xs);font-size:var(--font-size-s);color:var(--color-text-soft);display:flex}module-codeblock .meta:not(:has(.file)) .language{margin-top:calc(-1*var(--space-m))}module-codeblock .language{text-transform:uppercase;margin-left:auto}module-codeblock pre{font-size:var(--font-size-s);color:var(--color-neutral-10);background:var(--color-neutral-90);padding:var(--space-s);margin:var(--space-xs)0;border-radius:var(--space-xs);overflow:auto}module-codeblock .copy{right:var(--space-s);bottom:var(--space-s);position:absolute}module-codeblock .overlay{display:none}module-codeblock[collapsed]{max-height:12rem;overflow:hidden}module-codeblock[collapsed]:after{content:"";width:100%;height:var(--space-m);background:linear-gradient(-135deg,var(--color-secondary).5rem,transparent 0)0 .5rem,linear-gradient(135deg,var(--color-secondary).5rem,var(--color-background)0)0 .5rem;background-color:var(--color-secondary);background-size:var(--space-m)var(--space-m);background-position:bottom;display:block;position:absolute;bottom:0}module-codeblock[collapsed] .copy{display:none}module-codeblock[collapsed] .overlay{width:100%;height:6rem;color:var(--color-text);background:linear-gradient(transparent,var(--color-secondary));cursor:pointer;padding:var(--space-xs)var(--space-s);margin-bottom:var(--space-m);font-size:var(--font-size-s);transition:background-color var(--transition-short)var(--easing-inout);text-shadow:var(--color-background)1px 0 var(--space-xs);border:0;flex-direction:column-reverse;align-items:center;display:flex;position:absolute;bottom:0;left:0}module-codeblock[collapsed] .overlay:hover{text-shadow:var(--color-text-inverted)var(--space-xs)0 var(--space-s)}module-codeblock[collapsed] .overlay:active{text-shadow:var(--color-text-inverted)var(--space-xs)0 var(--space-s)}module-demo{gap:var(--space-m);flex-direction:column;margin-bottom:var(--space-l);display:flex}module-demo .preview{border:1px dotted var(--color-border);border-radius:var(--space-xs);padding:var(--space-s)}module-tabgroup{margin-bottom:var(--space-l);display:block}module-tabgroup>[role=tablist]{border-bottom:1px solid var(--color-border);margin-bottom:0;padding:0;display:flex}module-tabgroup>[role=tablist]>[role=tab]{font-family:var(--font-family-sans);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);padding:var(--space-s)var(--space-m);color:var(--color-text-soft);background-color:var(--color-secondary);cursor:pointer;transition:all var(--transition-short)var(--easing-inout);border:0;border-top:2px solid transparent}module-tabgroup>[role=tablist]>[role=tab]:hover{color:var(--color-text);background-color:var(--color-secondary-hover)}module-tabgroup>[role=tablist]>[role=tab]:focus{color:var(--color-text);background-color:var(--color-secondary-hover)}module-tabgroup>[role=tablist]>[role=tab]:focus{z-index:1}module-tabgroup>[role=tablist]>[role=tab]:active{color:var(--color-text);background-color:var(--color-secondary-active)}module-tabgroup>[role=tablist]>[role=tab][aria-selected=true]{color:var(--color-primary-active);border-top:3px solid var(--color-primary);background-color:var(--color-background);margin-bottom:-1px}module-tabgroup>[role=tabpanel]{font-family:sans-serif;font-size:var(--font-size-m);background:var(--color-background);margin-block:var(--space-l)}module-toc{background:color-mix(in srgb,var(--color-background)80%,transparent);color:var(--color-text);padding:var(--space-m);border-radius:var(--space-xs);display:block}module-toc h2{font-size:var(--font-size-s);margin:0;margin-bottom:var(--space-s);padding:0}module-toc ol{gap:var(--space-s);flex-direction:column;margin:0;padding-left:0;list-style-type:none;display:flex}module-toc li{margin:0;padding:0}module-toc a{text-decoration:none}module-todo{gap:var(--space-l);flex-direction:column;display:flex;container-type:inline-size}module-todo form{align-items:flex-start;gap:var(--space-m);flex-direction:column;justify-content:space-between;display:flex}module-todo ol{gap:var(--space-m);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}module-todo ol li{justify-content:space-between;gap:var(--space-m);margin:0;padding:0;display:flex}module-todo ol[filter=completed] li:not(:has([checked])){display:none}module-todo ol[filter=active] li:has([checked]){display:none}module-todo footer{align-items:center;gap:var(--space-m);grid-template-columns:1fr 1fr 1fr;margin:0;display:grid}module-todo footer .todo-count{justify-self:start}module-todo footer .todo-count p{font-size:var(--font-size-s);margin:0}module-todo footer .clear-completed{justify-self:end}@container (width>32rem){module-todo form{flex-direction:row;align-items:flex-end}}section-menu{grid-column:breakout}section-menu ol{gap:var(--space-s);margin-block:var(--space-l);grid-template-columns:1fr;padding:0;list-style:none;display:grid}section-menu li{margin:0;padding:0}section-menu a{gap:var(--space-xs)var(--space-s);padding:var(--space-m);border-radius:var(--space-xs);height:calc(100% - 2*var(--space-m));color:var(--color-text);grid-template:"icon title""icon description"1fr/auto 1fr;text-decoration:none;display:grid}section-menu a:hover{background-color:var(--color-secondary-hover)}section-menu a:focus{background-color:var(--color-secondary-hover)}section-menu a.active{background-color:var(--color-background-alt)}section-menu a .icon{font-size:var(--font-size-l);width:var(--space-xl);height:var(--space-xl);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:50%;grid-area:icon;justify-content:center;align-items:center;display:flex}section-menu a strong{font-size:var(--font-size-m);line-height:var(--line-height-s);grid-area:title;margin:0}section-menu a small{font-size:var(--font-size-s);line-height:var(--line-height-m);color:var(--color-text-soft);grid-area:description;margin:0}@media screen and (min-width:32em) and (max-width:48em){section-menu ol{gap:var(--space-m);grid-template-columns:1fr 1fr}}@media screen and (min-width:48em){section-menu ol{gap:var(--space-l);grid-template-columns:1fr 1fr 1fr}}section-hero{grid-column:fullwidth;grid-template-columns:inherit;background-color:var(--color-primary);color:var(--color-primary-text);padding-block:var(--space-xxl);margin-top:0;margin-bottom:0;display:grid}section-hero h1{margin-bottom:var(--space-xl);grid-column:content}section-hero>div{grid-column:content}section-hero .lead{font-size:var(--font-size-l)}@media screen and (min-width:48em){section-hero h1{grid-column:breakout}section-hero>div{gap:var(--space-xl);grid-column:breakout;grid-template-columns:2fr 1fr;display:grid}}rating-stars{display:inline-block}rating-stars fieldset{border:none;justify-content:center;margin:0;padding:0;display:flex}rating-stars label{cursor:pointer;width:var(--input-height);height:var(--input-height);color:var(--color-primary);font-size:var(--font-size-l);border-radius:var(--space-xs);text-align:center;display:block}rating-stars label:hover{color:var(--color-primary-hover);background-color:rgba(0,0,0,.05)}rating-stars label:focus-within{color:var(--color-primary-hover);background-color:rgba(0,0,0,.05)}rating-stars label:active{color:var(--color-primary-active);background-color:rgba(0,0,0,.1)}rating-feedback{gap:var(--space-m);text-align:left;flex-direction:column;width:80%;display:inline-flex;position:relative}rating-feedback header{gap:var(--space-s);margin-block:var(--space-l);flex-direction:row-reverse;display:flex}rating-feedback .hide{box-sizing:border-box;border-radius:var(--space-xs);color:var(--color-text);height:var(--input-height);font-size:var(--font-size-l);background:0 0;border:0;display:block;position:relative;top:0;right:0}rating-feedback .hide:hover{background:rgba(0,0,0,.05)}rating-feedback .hide:focus{background:rgba(0,0,0,.05)}rating-feedback .hide:active{background:rgba(0,0,0,.1)}rating-feedback p{margin:0}rating-feedback form{flex-direction:column;display:flex}rating-feedback fieldset{border:0;margin:0;padding:0}rating-feedback .feedback label{margin-bottom:var(--space-xxs);display:block}rating-feedback textarea{resize:vertical;box-sizing:border-box;background:var(--color-input);width:100%;color:var(--color-text);border:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);line-height:var(--line-height-m);margin-bottom:var(--space-xs);display:inline-block}calc-table{display:inline-block}calc-table .rows{gap:var(--space-m);justify-content:space-between;margin-bottom:var(--space-m);display:flex}calc-table .rows p{margin:0}calc-table .columns{gap:var(--space-m);justify-content:space-between;margin-bottom:var(--space-m);display:flex}calc-table .columns p{margin:0}