:root{--color-black:0 0 0;--color-blue:20 33 61;--color-yellow:252 163 17;--color-gray:229 229 229;--color-white:255 255 255;--font-weight-normal:400;--font-weight-bold:700;--font-size-sm:0.85em;--font-size-normal:1em;--font-size-md:1.2em;--space-xxs:0.35;--space-xs:0.5;--space-sm:0.7;--space-normal:1;--space-md:1.3;--space-lg:1.8;--space-xl:3.2;--space-xxl:4.8;--width-min-offset-x:22px;--width-content:1200px;--font-space-unit:1em;--font-size-base:16px;--font-color:var(--color-black);--font-family:system-ui,"Segoe UI",roboto,helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-weight:var(--font-weight-normal);--font-size:var(--font-size-normal);--font-line-height:1.4;--bg-color:var(--color-white);--accent-color:var(--color-yellow);--selection-color:var(--bg-color);--selection-bg-color:var(--font-color);--space-unit:1em;--animation-time:0.25s;--nav-main-bar-item-space-x:var(--space-normal);--nav-main-bar-item-space-y:var(--space-sm);--nav-main-bar-item-height:calc(var(--font-size)*var(--font-line-height) + var(--space-unit)*var(--nav-main-bar-item-space-y)*2);--nav-main-menu-space-t:var(--space-sm);--nav-main-menu-space-b:var(--space-normal);--nav-main-height:var(--nav-main-bar-item-height);--scroll-padding-top:var(--nav-main-height);color-scheme:light}*{box-sizing:border-box}:after,:before{box-sizing:inherit}::-moz-selection{background:rgb(var(--selection-bg-color));color:rgb(var(--selection-color))}::selection{background:rgb(var(--selection-bg-color));color:rgb(var(--selection-color))}html{scroll-behavior:smooth;scroll-padding-top:var(--scroll-padding-top,0)}body{background:rgb(var(--bg-color));margin:0}html{font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;word-break:break-word}.btn,.control,.font,body{color:rgb(var(--font-color));font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--font-line-height)}button,input,optgroup,select,textarea{font-family:inherit}.headline,h1,h2,h3,h4,h5,h6{color:rgb(var(--headline-color,inherit));display:block;font-family:var(--headline-family,inherit);font-size:calc(var(--font-size-normal)*var(--headline-scale, 1));font-weight:var(--headline-weight,var(--font-weight-bold));line-height:var(--headline-line-height,inherit);margin-bottom:0;margin-top:calc(var(--font-space-unit)*var(--headline-space, var(--space-normal)))}.headline.h1,h1{--headline-scale:2.5}.headline.h2,h2{--headline-scale:2}.headline.h3,h3{--headline-scale:1.75}.headline.h4,h4{--headline-scale:1.5}.headline.h5,h5{--headline-scale:1.2}.headline.h6,h6{--headline-scale:1.1}.headline.no-space{--headline-space:0}a{color:rgb(var(--link-color,inherit));-webkit-text-decoration:var(--link-decoration,underline);text-decoration:var(--link-decoration,underline);transition:color ease var(--link-animation-time,var(--animation-time)) text-decoration ease var(--link-animation-time,var(--animation-time))}a:hover{--link-color:var(--link-hover-color,var(--accent-color));--link-decoration:var(--link-hover-decoration,none)}b,strong{--font-weight:var(--font-weight-bold)}small{--font-size:var(--font-size-sm)}.bg{--selection-bg-color:var(--font-color);--selection-color:var(--bg-color);background:rgb(var(--bg-color));color:rgb(var(--font-color))}.padding,.pxy{padding:var(--pt,calc(var(--space-unit)*var(--space-pt, var(--space-normal)))) var(--pr,calc(var(--space-unit)*var(--space-pr, var(--space-normal)))) var(--pb,calc(var(--space-unit)*var(--space-pb, var(--space-normal)))) var(--pl,calc(var(--space-unit)*var(--space-pl, var(--space-normal))))}.pt,.py{padding-top:var(--pt,calc(var(--space-unit)*var(--space-pt, var(--space-normal))))}.pr,.px{padding-right:var(--pr,calc(var(--space-unit)*var(--space-pr, var(--space-normal))))}.pb,.py{padding-bottom:var(--pb,calc(var(--space-unit)*var(--space-pb, var(--space-normal))))}.pl,.px{padding-left:var(--pl,calc(var(--space-unit)*var(--space-pl, var(--space-normal))))}.pxy{--pt:var(--py,calc(var(--space-unit)*var(--space-py, var(--space-normal))));--pb:var(--py,calc(var(--space-unit)*var(--space-py, var(--space-normal))));--pl:var(--px,calc(var(--space-unit)*var(--space-px, var(--space-normal))));--pr:var(--px,calc(var(--space-unit)*var(--space-px, var(--space-normal))))}.py{--pt:var(--py,calc(var(--space-unit)*var(--space-py, var(--space-normal))));--pb:var(--py,calc(var(--space-unit)*var(--space-py, var(--space-normal))))}.px{--pl:var(--px,calc(var(--space-unit)*var(--space-px, var(--space-normal))));--pr:var(--px,calc(var(--space-unit)*var(--space-px, var(--space-normal))))}.margin,.mxy{margin:var(--mt,calc(var(--space-unit)*var(--space-mt, var(--space-normal)))) var(--mr,calc(var(--space-unit)*var(--space-mr, var(--space-normal)))) var(--mb,calc(var(--space-unit)*var(--space-mb, var(--space-normal)))) var(--ml,calc(var(--space-unit)*var(--space-ml, var(--space-normal))))}.mt,.my{margin-top:var(--mt,calc(var(--space-unit)*var(--space-mt, var(--space-normal))))}.mr,.mx{margin-right:var(--mr,calc(var(--space-unit)*var(--space-mr, var(--space-normal))))}.mb,.my{margin-bottom:var(--mb,calc(var(--space-unit)*var(--space-mb, var(--space-normal))))}.ml,.mx{margin-left:var(--ml,calc(var(--space-unit)*var(--space-ml, var(--space-normal))))}.mxy{--mt:var(--my,calc(var(--space-unit)*var(--space-my, var(--space-normal))));--mb:var(--my,calc(var(--space-unit)*var(--space-my, var(--space-normal))));--ml:var(--mx,calc(var(--space-unit)*var(--space-mx, var(--space-normal))));--mr:var(--mx,calc(var(--space-unit)*var(--space-mx, var(--space-normal))))}.my{--mt:var(--my,calc(var(--space-unit)*var(--space-my, var(--space-normal))));--mb:var(--my,calc(var(--space-unit)*var(--space-my, var(--space-normal))))}.mx{--ml:var(--mx,calc(var(--space-unit)*var(--space-mx, var(--space-normal))));--mr:var(--mx,calc(var(--space-unit)*var(--space-mx, var(--space-normal))))}.btn,.control{--space-px:0;--space-py:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgb(var(--control-bg-color,transparent));border:none;border-radius:unset;cursor:pointer;display:inline-block;outline:none;padding:var(--py,calc(var(--space-unit)*var(--space-py))) var(--px,calc(var(--space-unit)*var(--space-px)));text-align:center;text-decoration:none;word-break:keep-all}.btn:disabled,.btn[aria-disabled=true],.control:disabled,.control[aria-disabled=true]{cursor:not-allowed}.btn:hover:not([aria-disabled=true],[disabled],.btn[class*=bg-],.no-hover),.control:hover:not([aria-disabled=true],[disabled],.btn[class*=bg-],.no-hover){--font-color:var(--control-hover-color,var(--accent-color))}[class*=" width-"],[class^=width-]{--width-calc:max(calc(var(--width-min-offset-x) - var(--width-content-offset, 0px)),calc((100% - var(--width-content))/2 - var(--width-content-offset, 0px)));padding-inline:var(--width-calc)}.width-sm{--width-content:var(--width-sm)}.btn{--space-py:var(--btn-space-py,var(--space-xs));--space-px:var(--btn-space-px,var(--space-sm));--font-size:var(--btn-font-size,var(--font-size-normal));--font-weight:var(--btn-font-weight,var(--font-weight-bold));background:rgb(var(--btn-bg-color,var(--bg-color)));color:rgb(var(--btn-font-color,var(--font-color)));transition:all ease var(--btn-animation-time,var(--animation-time))}.btn[class*=bg-]:hover:not([aria-disabled=true],[disabled],.no-hover){--btn-bg-color:var(--accent-color)}.container>:first-child{margin-top:0}.container>:last-child{margin-bottom:0}.grid-auto{--grid-gap-x:var(
    --gap-x,var(--gap,calc(var(--space-unit) * var(--gap-space-x, var(--gap-space, var(--space-normal)))))
  );--grid-gap-y:var(
    --gap-y,var(--gap,calc(var(--space-unit) * var(--gap-space-y, var(--gap-space, var(--space-normal)))))
  );--grid-gap-count:calc(var(--grid-columns) - 1);--grid-total-gap-width:calc(var(--grid-gap-count)*var(--grid-gap-x));--grid-item-max-width:calc((100% - var(--grid-total-gap-width))/var(--grid-columns));display:grid;grid-gap:var(--grid-gap-y) var(--grid-gap-x);grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item-min-width),var(--grid-item-max-width)),1fr))}.nav-main .burger.control{--nav-burger-control-line-height-calc:var(--nav-burger-control-line-height,calc((var(--nav-burger-control-size) - (var(--py, calc(var(--space-unit) * var(--space-py))) * 2) - (var(--nav-burger-control-line-space, var(--space-unit) / 2) * 2)) / 3));height:var(--nav-burger-control-size);position:relative;width:calc(var(--nav-burger-control-size)*var(--nav-burger-control-width-multiplier, 1.4))}.nav-main .burger.control>.line{background:rgb(var(--font-color));display:block;height:var(--nav-burger-control-line-height-calc);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all var(--nav-burger-animation-time,.3s) ease;width:calc(100% - var(--px, calc(var(--space-unit) * var(--space-px))) * 2)}.nav-main .burger.control>.line:first-child{transform:translate(-50%,calc(-50% - var(--nav-burger-control-line-space, var(--space-unit) / 2) - var(--nav-burger-control-line-height-calc)))}.nav-main .burger.control>.line:last-child{transform:translate(-50%,calc(-50% + var(--nav-burger-control-line-space, var(--space-unit) / 2) + var(--nav-burger-control-line-height-calc)))}.nav-main .burger.control[aria-expanded=true]>.line:first-child{transform:translate(-50%,-50%) rotate(45deg)}.nav-main .burger.control[aria-expanded=true]>.line:nth-child(2){display:none}.nav-main .burger.control[aria-expanded=true]>.line:last-child{transform:translate(-50%,-50%) rotate(-45deg)}.nav-main{--bg-color:var(--na-main-bg-color,var(--color-blue));--font-color:var(--nav-main-bg-color,var(--color-white));--accent-color:var(--nav-main-accent-color,var(--color-yellow));position:sticky;top:0;z-index:100}.nav-main>.bar,.nav-main>.bar>.menu{display:flex;gap:var(--nav-main-item-gap,calc(var(--space-unit)*var(--nav-main-item-gap-space, 0)))}.nav-main>.bar{--width-content-offset:var(--nav-main-bar-item-space-x) * var(--space-unit);background:rgb(var(--bg-color));container-name:nav-bar;container-type:inline-size;justify-content:center}.nav-main>.bar>.burger.control,.nav-main>.bar>.logo,.nav-main>.bar>.menu>.control{--space-px:var(--nav-main-bar-item-space-x);--space-py:var(--nav-main-bar-item-space-y)}.nav-main>.bar>.logo{height:var(--nav-main-bar-item-height)}.nav-main>.bar>.logo>svg{height:100%;width:auto}.nav-main>.bar>.menu>.control{--font-weight:var(--font-weight-bold);display:block}.nav-main>.bar>.menu>.control[aria-current=page]{--font-color:var(--accent-color)}@container nav-bar (width > 1000px){.nav-main>.bar>.burger.control{display:none}.nav-main>.bar>.menu{margin-left:auto}}@container nav-bar (width <= 1000px){.nav-main>.bar{position:relative}.nav-main>.bar>.burger.control{--nav-burger-control-size:var(--nav-main-bar-item-height);margin-left:auto}.nav-main>.bar>.menu{background:rgb(var(--bg-color));flex-direction:column;left:0;max-height:calc(100vh - var(--nav-main-height));opacity:1;overflow-y:auto;padding:calc(var(--space-unit)*var(--nav-main-menu-space-t)) var(--width-calc) calc(var(--space-unit)*var(--nav-main-menu-space-b));position:absolute;top:calc(var(--nav-main-bar-item-height));width:100%}.nav-main>.bar>.menu.menu-show-enter-active,.nav-main>.bar>.menu.menu-show-leave-active{transition:opacity .3s ease-in-out}.nav-main>.bar>.menu.menu-show-enter-from,.nav-main>.bar>.menu.menu-show-leave-to{opacity:0}.nav-main>.bar>.burger.control[aria-expanded=false]~.menu,.nav-main>.bar>.menu[hidden]{display:none}}.nav-list{--nav-list-item-space-px:var(--space-sm);--nav-list-item-space-py:var(--space-xs);--nav-list-item-border-color:var(--border-color,var(--font-color));text-align:left}.nav-list ul{list-style:none;margin:0;padding:0}.nav-list>ul>li+li{margin-top:var(--nav-list-root-item-space,var(--size-sm))}.nav-list .control.active{--font-color:var(--accent-color)}.nav-list>ul>li>.control{--space-py:var(--nav-list-item-space-py);--space-pr:var(--nav-list-item-space-px);--font-weight:var(--font-weight-bold);--font-size:var(--font-size-md)}.nav-list>ul>li>ul>li>.control{--space-py:var(--nav-list-item-space-py);--space-px:var(--nav-list-item-space-px);border-left:1px solid rgba(var(--nav-list-item-border-color)/var(--border-opacity,.1));text-align:left}.nav-list>ul>li>ul>li>.control:hover{--border-opacity:1}.example,.markup{border:1px solid rgb(var(--code-border-color,var(--border-color,var(--font-color))))}.example{display:flex}.example>iframe{border:none;width:100%}.markup{font-size:var(--font-size-xs)}.markup>.code{margin:0}.example+.markup{border-top:none;margin-top:0}.colors{--grid-columns:4;--grid-item-min-width:200px}.colors>.item{--space-px:var(--space-md);--space-py:var(--space-xl);border:1px solid rgb(var(--border-color,var(--font-color)));display:flex;flex-direction:column;gap:calc(var(--space-xs)*var(--space-unit));justify-content:center;text-align:center}.colors>.item>.text{font-size:var(--font-size-md);font-weight:var(--font-weight-bold)}.icons{--grid-columns:4;--grid-item-min-width:200px}.icons>.item{--space-px:var(--space-md);--space-py:var(--space-xl);border:1px solid rgb(var(--border-color,var(--font-color)));display:flex;flex-direction:column;gap:calc(var(--space-xs)*var(--space-unit));justify-content:center;text-align:center}.icons>.item>.show,.icons>.item>.show:before,.icons>.item>.text:after,.icons>.item>.text:before{font-family:var(--icons-font-family)}.icons>.item>.show{font-size:var(--icons-show-font-size,3em)}.icons>.item>.name{font-weight:var(--font-weight-bold)}.icons>.item.from-var>.show:before,.icons>.item.from-var>.text:after,.icons>.item.from-var>.text:before{content:var(--icon)}.icons>.item.from-data>.text:after,.icons>.item.from-data>.text:before{content:attr(data-icon)}.spaces{--spaces-bg-color:var(--font-color);--spaces-font-color:var(--bg-color);flex-direction:column;gap:var(--spaces-gap,calc(var(--spaces-gap-space, var(--space-xs))*var(--space-unit)))}.spaces,.spaces>.item{display:flex}.spaces>.item>.bg{--bg-color:var(--spaces-bg-color);--font-color:var(--spaces-font-color)}.spaces>.item>.pxy{--space-px:var(--space-normal);--space-py:var(--space-xs)}.spaces>.item>div:first-child{margin-right:calc(var(--space-value)*var(--space-unit))}.spaces>.item>.info{display:flex}.spaces>.item>.info>:not(:last-child){border-right:1px solid;margin-right:calc(var(--space-xs)*var(--space-unit));padding-right:calc(var(--space-xs)*var(--space-unit))}.spaces>.item>.info>.name{font-weight:var(--font-weight-bold)}html{height:100%}html>body:has(.expand-full-height){display:flex;flex-direction:column;min-height:100%}html>body:has(.expand-full-height)>.expand-full-height{flex:1 1}html>body>footer{--bg-color:var(--footer-bg-color,var(--color-blue));--font-color:var(--footer-font-color,var(--color-white))}html>body>footer>.text{text-align:right}p>code{background:rgb(var(--inline-code-bg-color,var(--color-gray)));color:rgb(var(--inline-code-font-color,var(--font-color)));display:inline-block;padding:.1em .2em}body.page{--main-sidebar-width:25ch;--main-content-sidebar-space:var(--space-xl)}body.page>.content{--space-py:var(--space-xl)}body.page>.content .headline+.description{margin-top:calc(var(--page-headline-description-space, var(--space-md))*var(--space-unit))}body.page>.content>main>section+section{margin-top:calc(var(--page-content-section-space, var(--space-xl))*var(--space-unit))}body.page>.content>main *+.example,body.page>.content>main :not(.example)+.markup{margin-top:1em}body.page>.content>main{container-name:content;container-type:inline-size}@media screen and (width >= 1000px){body.page>.content:has(>.sidebar){display:grid;gap:var(
        --page-header-main-garp,calc(var(--page-header-main-space, var(--space-lg))*var(--space-unit))
      ) var(
        --page-content-sidebar-garp,calc(var(--page-content-sidebar-space, var(--space-xl))*var(--space-unit))
      );grid-template-columns:var(--main-sidebar-width) 1fr;grid-template-rows:auto 1fr}body.page>.content:has(>.sidebar)>.sidebar{grid-column:1/span 1;grid-row:1/span 2}body.page>.content:has(>.sidebar)>header{grid-column:2/span 1;grid-row:1/span 1}body.page>.content:has(>.sidebar)>main{grid-column:2/span 1;grid-row:2/span 1}body.page>.content:has(>.sidebar)>.sidebar>.scrollbar{height:100%;max-height:calc(100vh - var(--nav-main-height));overflow-y:auto;position:sticky;top:var(--nav-main-height)}}@media screen and (width < 1000px){body.page>.content>.sidebar{display:none}}