:root{--sMainFont:'Open Sans',sans-serif;--sSecondaryFont:'Alegreya Sans',sans-serif;--sTertiraryFont:'Istok Web',sans-serif;--sTextDirection:1;--sDocFontFamily:var(--sMainFont);--sDocFontSize:1rem;--sDocLineHeight:1.5;--sDocLineHeightPx:calc(var(--sDocLineHeight) * var(--sDocFontSize));--sDocLineWidth:38em;--sDocColor:light-dark(var(--sTextWeak),var(--sTextWeak));--sDocBackgroundColor:var(--sBackgroundBase);--sBaseSize:1.5;--sBaseHeight:var(--sDocLineHeightPx);--sBaseHPadding:var(--sSpacer-3);--sBaseVPadding:var(--sSpacer-2);--sFocusRingOpacity:61%;--sFocusRing:2px solid;--sFocusRingOffset:1px;--sFontSizeBase:var(--sDocFontSize);--sFontSize-1:calc(var(--sFontSizeBase) * 0.5);--sFontSize-2:calc(var(--sFontSizeBase) * 0.625);--sFontSize-3:calc(var(--sFontSizeBase) * 0.75);--sFontSize-4:calc(var(--sFontSizeBase) * 0.875);--sFontSize-5:calc(var(--sFontSizeBase) * 1);--sFontSize-6:calc(var(--sFontSizeBase) * 1.5);--sFontSize-7:calc(var(--sFontSizeBase) * 1.75);--sFontSize-8:calc(var(--sFontSizeBase) * 2.25);--sFontSize-9:calc(var(--sFontSizeBase) * 3.375);--sLineHeight-1:1.3;--sLineHeight-2:1.3;--sLineHeight-3:1.4;--sLineHeight-4:1.45;--sLineHeight-5:var(--sDocLineHeight,1.5);--sLineHeight-6:1.3;--sLineHeight-7:1.13;--sLineHeight-8:1.13;--sLineHeight-9:1.13;--sSpacerBase:var(--sDocLineHeightPx);--sSpacer-0:0;--sSpacer-1:calc(var(--sSpacerBase) * 0.125);--sSpacer-2:calc(var(--sSpacerBase) * 0.25);--sSpacer-3:calc(var(--sSpacerBase) * 0.5);--sSpacer-4:calc(var(--sSpacerBase) * 0.75);--sSpacer-5:calc(var(--sSpacerBase) * 1);--sSpacer-6:calc(var(--sSpacerBase) * 1.5);--sSpacer-7:calc(var(--sSpacerBase) * 2);--sSpacer-8:calc(var(--sSpacerBase) * 2.5);--sSpacer-9:calc(var(--sSpacerBase) * 3.5);--sBorderRadius-base:var(--sDocLineHeightPx);--sBorderRadius-0:0;--sBorderRadius-1:calc(var(--sBorderRadius-base) * 0.125);--sBorderRadius-2:calc(var(--sBorderRadius-base) * 0.25);--sBorderRadius-3:calc(var(--sBorderRadius-base) * 0.5);--sBorderRadius-4:calc(var(--sBorderRadius-base) * 0.75);--sBorderRadius-5:calc(var(--sBorderRadius-base) * 1);--sBorderRadius-6:calc(var(--sBorderRadius-base) * 1.25);--sBorderRadius-7:calc(var(--sBorderRadius-base) * 1.5);--sBorderRadius-8:calc(var(--sBorderRadius-base) * 2);--sBorderRadius-9:calc(var(--sBorderRadius-base) * 2.5);--sBorderRadius-round:50%;--sBorderRadius-rounded:100vh;--sTransitionTimingFunction:ease;--sTransitionDuration:180ms;--sZIndexBase:0;--sZIndexAbove:2;--sZIndexBelow:-1;--sZIndexSticky:calc(var(--sZIndexAbove) + var(--sZIndexBase));--sZIndexFixed:calc(var(--sZIndexAbove) + var(--sZIndexSticky));--sColorBrandLight-h:210;--sColorBrandLight-s:44%;--sColorBrandLight-l:52%;--sColorBrandLight-1000:hsla(var(--sColorBrandLight-h),var(--sColorBrandLight-s),var(--sColorBrandLight-l),1);--sColorBrandLight-800:hsla(var(--sColorBrandLight-h),var(--sColorBrandLight-s),var(--sColorBrandLight-l),0.8);--sColorBrandLight-200:hsla(var(--sColorBrandLight-h),var(--sColorBrandLight-s),var(--sColorBrandLight-l),0.2);--sColorBrandLight-50:hsla(var(--sColorBrandLight-h),var(--sColorBrandLight-s),var(--sColorBrandLight-l),0.05);--sColorBrandDark-h:210;--sColorBrandDark-s:64%;--sColorBrandDark-l:64%;--sColorBrandDark-1000:hsla(var(--sColorBrandDark-h),var(--sColorBrandDark-s),var(--sColorBrandDark-l),1);--sColorBrandDark-800:hsla(var(--sColorBrandDark-h),var(--sColorBrandDark-s),var(--sColorBrandDark-l),0.8);--sColorBrandDark-200:hsla(var(--sColorBrandDark-h),var(--sColorBrandDark-s),var(--sColorBrandDark-l),0.2);--sColorBrandDark-50:hsla(var(--sColorBrandDark-h),var(--sColorBrandDark-s),var(--sColorBrandDark-l),0.05);--sColorGraySolid-1000:hsl(0,0%,0%);--sColorGraySolid-900:hsl(var(--sColorBrandLight-h),25%,10%);--sColorGraySolid-875:hsl(var(--sColorBrandLight-h),20%,12%);--sColorGraySolid-850:hsl(var(--sColorBrandLight-h),20%,15%);--sColorGraySolid-800:hsl(var(--sColorBrandLight-h),15%,20%);--sColorGraySolid-50:hsl(var(--sColorBrandLight-h),5%,95%);--sColorGraySolid-25:hsl(var(--sColorBrandLight-h),2%,98%);--sColorGraySolid-0:hsl(0,0%,100%);--sColorGrayLight-1000:hsla(var(--sColorBrandLight-h),50%,15%,0.9);--sColorGrayLight-700:hsla(var(--sColorBrandLight-h),50%,15%,0.7);--sColorGrayLight-500:hsla(var(--sColorBrandLight-h),50%,15%,0.5);--sColorGrayLight-100:hsla(var(--sColorBrandLight-h),50%,15%,0.1);--sColorGrayLight-50:hsla(var(--sColorBrandLight-h),50%,15%,0.05);--sColorGrayLight-25:hsla(var(--sColorBrandLight-h),50%,15%,0.02);--sColorGrayDark-1000:hsla(0,0%,100%,0.98);--sColorGrayDark-700:hsla(0,0%,100%,0.78);--sColorGrayDark-500:hsla(0,0%,100%,0.6);--sColorGrayDark-100:hsla(0,0%,100%,0.12);--sColorGrayDark-50:hsla(0,0%,100%,0.08);--sColorGrayDark-25:hsla(0,0%,100%,0.04);--sTextStrong:light-dark(var(--sColorGrayLight-1000),var(--sColorGrayDark-1000));--sTextWeak:light-dark(var(--sColorGrayLight-700),var(--sColorGrayDark-700));--sTextWeaker:light-dark(var(--sColorGrayLight-500),var(--sColorGrayDark-500));--sTextBrand:light-dark(var(--sColorGrayLight-1000),var(--sColorGrayDark-1000));--sTextDisabled:light-dark(var(--sColorGrayLight-100),var(--sColorGrayDark-100));--sTextInverseStrong:light-dark(var(--sColorGrayDark-1000),var(--sColorGrayLight-1000));--sTextInverseWeak:light-dark(var(--sColorGrayDark-700),var(--sColorGrayLight-700));--sBackgroundBase:light-dark(var(--sColorGraySolid-0),var(--sColorGraySolid-900));--sBackgroundStronger:light-dark(var(--sColorGrayLight-1000),var(--sColorGrayDark-1000));--sBackgroundStrong:light-dark(var(--sColorGrayLight-500),var(--sColorGrayDark-500));--sBackgroundWeak:light-dark(var(--sColorGrayLight-50),var(--sColorGrayDark-50));--sBackgroundSolidWeak:light-dark(var(--sColorGraySolid-50),var(--sColorGraySolid-850));--sBackgroundWeaker:light-dark(var(--sColorGrayLight-25),var(--sColorGrayDark-25));--sBackgroundSolidWeaker:light-dark(var(--sColorGraySolid-25),var(--sColorGraySolid-875));--sBackgroundBrandStrong:light-dark(var(--sColorBrandLight-1000),var(--sColorBrandDark-1000));--sBackgroundBrandWeak:light-dark(var(--sColorBrandLight-50),var(--sColorBrandDark-50));--sBackgroundInverseBase:light-dark(var(--sColorGraySolid-900),var(--sColorGraySolid-0));--sBackgroundInverseStrong:light-dark(var(--sColorGrayDark-1000),var(--sColorGrayLight-1000));--sBackgroundInverseWeak:light-dark(var(--sColorGrayDark-50),var(--sColorGrayLight-50));--sBackgroundInverseSolidWeak:light-dark(var(--sColorGraySolid-850),var(--sColorGraySolid-850));--sBackgroundInverseSolidWeaker:light-dark(var(--sColorGraySolid-800),var(--sColorGraySolid-800));--sBorderStrong:light-dark(var(--sColorGrayLight-500),var(--sColorGrayDark-500));--sBorderWeak:light-dark(var(--sColorGrayLight-100),var(--sColorGrayDark-100));--sBorderWeaker:light-dark(var(--sColorGrayLight-50),var(--sColorGrayDark-50));--sColorSuccess:light-dark(#30a141,#6ed47d);--sColorError:light-dark(#ca1616,#ec5555);--sColorWarning:light-dark(#935f06,#c47f08);--sColorPrimary-h:210;--sColorPrimary-s:44%;--sColorPrimary-l:52%;--sColorPrimary-1:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),99%);--sColorPrimary-2:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),96%);--sColorPrimary-3:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),87%);--sColorPrimary-4:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),73%);--sColorPrimary-5:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),52%);--sColorPrimary-6:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),40%);--sColorPrimary-7:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),30%);--sColorPrimary-8:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),20%);--sColorPrimary-9:hsl(var(--sColorPrimary-h),var(--sColorPrimary-s),13%);--brandBlue:#464555;--brandBlue-a10:color-mix(in srgb,var(--brandBlue),transparent 90%);--brandBlue-a20:color-mix(in srgb,var(--brandBlue),transparent 80%);--brandBlue-a30:color-mix(in srgb,var(--brandBlue),transparent 70%);--brandBlue-a40:color-mix(in srgb,var(--brandBlue),transparent 60%);--brandBlue-a50:color-mix(in srgb,var(--brandBlue),transparent 50%);--brandBlue-a60:color-mix(in srgb,var(--brandBlue),transparent 40%);--brandBlue-a70:color-mix(in srgb,var(--brandBlue),transparent 30%);--brandBlue-a80:color-mix(in srgb,var(--brandBlue),transparent 20%);--brandBlue-a90:color-mix(in srgb,var(--brandBlue),transparent 10%);--sShadowColor:220 3% 15%;--sShadowStrength:1%;--sShadow-1:0 1px 2px -1px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 9%));--sShadow-2:0 3px 5px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 3%)),0 7px 14px -5px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 5%));--sShadow-3:0 -1px 3px 0 hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 2%)),0 1px 2px -5px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 2%)),0 2px 5px -5px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 4%)),0 4px 12px -5px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 5%)),0 12px 15px -5px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 7%));--sShadow-4:0 -2px 5px 0 hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 2%)),0 1px 1px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 3%)),0 2px 2px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 3%)),0 5px 5px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 4%)),0 9px 9px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 5%)),0 16px 16px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 6%));--sShadow-5:0 -1px 2px 0 hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 2%)),0 2px 1px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 3%)),0 5px 5px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 3%)),0 10px 10px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 4%)),0 20px 20px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 5%)),0 40px 40px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 7%));--sShadow-6:0 -1px 2px 0 hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 2%)),0 3px 2px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 3%)),0 7px 5px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 3%)),0 12px 10px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 4%)),0 22px 18px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 5%)),0 41px 33px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 6%)),0 100px 80px -2px hsl(var(--sShadowColor)/calc(var(--sShadowStrength) + 7%));--sFormInputColor:var(--sTextStrong);--sFormInputBackground:transparent;--sFormInputBorderRadius:var(--sBorderRadius-1);--sFormInputBorder:1px solid;--sFormInputBorderColor:var(--sBorderStrong);--sFormInputDisabledOpacity:0.5;--sFormInputBaseColor:var(--sBackgroundBrandStrong)}html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;//outline:0;font-size:100%;vertical-align:baseline;background:transparent}article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, main{display:block}*, ::after, ::before{box-sizing:border-box}caption, th, td{text-align:start;font-weight:normal}*{-webkit-tap-highlight-color:rgba(0,0,0,0)}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,
strong{font-weight:bolder}code,
kbd,
samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,
input,
optgroup,
select,
textarea{color:inherit;font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,
input{overflow:visible}button,
select{text-transform:none}button,
[type="button"],
[type="reset"],
[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],
[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:not(:defined){visibility:hidden}.not_visible{position:fixed!important;top:-9999px!important;left:-9999px!important}ul.bare_list{list-style:none;margin-inline-start:0;padding-inline-start:0}h1, h2, h3, h4, h5, h6{color:var(--sTextStrong)}h2{margin-block-start:var(--sSpacer-6)}p{color:var(--sDocColor);max-width:var(--sDocLineWidth);margin:0 0 var(--sDocLineHeightPx) 0}.vertical-grid-lines{--grid-size:var(--sDocLineHeightPx);--grid-lines-color:rgba(0,170,255,0.06);background:linear-gradient(to bottom,var(--grid-lines-color) 1px,transparent 2px) left top /100% calc(var(--grid-size) * 0.5) repeat,linear-gradient(to bottom,var(--grid-lines-color) 1px,transparent 1px) left top /100% calc(var(--grid-size) * 0.5) repeat}.gridauto{--sColumnGap:var(--sSpacer-4);--sRowGap:var(--sSpacer-4);--sGridautoMinWidth:192px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sGridautoMinWidth),1fr));grid-column-gap:var(--sColumnGap);grid-row-gap:var(--sRowGap)}:root{--_xs:var(--sSpacer-1);--_sm:var(--sSpacer-2);--_md:var(--sSpacer-3);--_xl:var(--sSpacer-5);--_xxl:var(--sSpacer-6)}:is([class^='_flex'], [class*=' _flex']){--_flex:flex;--_gap:initial;--_alignItems:initial;--_justifyContent:initial;display:var(--_flex);gap:var(--_gap);align-items:var(--_alignItems);justify-content:var(--_justifyContent)}[class*='_flex_xs_']{--_gap:var(--_xs)}[class*='_flex_sm_']{--_gap:var(--_sm)}[class*='_flex_md_']{--_gap:var(--_md)}[class*='_flex_xl_']{--_gap:var(--_xl)}[class*='_flex_xxl_']{--_gap:var(--_xxl)}[class*='_ai-center_']{--_alignItems:center}[class*='_jc-between_']{--_justifyContent:space-between}@keyframes fade-in{from{opacity:0}}@keyframes fade-out{to{opacity:0}}.fadeIn{animation:500ms ease fade-in}.fadeOut{animation:500ms ease fade-out}.animDiscrete{transition:display 500ms allow-discrete}s-form > form{display:grid;gap:var(--sSpacer-5);fieldset{display:flex;flex-direction:column;gap:var(--sSpacer-3);padding:0;border:none;max-width:var(--sDocLineWidth)}s-form-field > *:not([type='checkbox']){width:100%}}s-form.fieldsets > form{legend{font-weight:bold;padding-inline:var(--sSpacer-3)}fieldset{border:1px solid var(--sBorderWeak);padding:var(--sSpacer-5)}}:root{--wcPlaygroundHeaderHeight:56px;--wcPlaygroundDrawerWidth:0}wc-playground{transition:100ms ease;display:grid;grid-template-columns:var(--wcPlaygroundDrawerWidth) minmax(180px,220px) minmax(400px,auto) minmax(220px,260px);grid-template-rows:auto;header{grid-row:1/2;grid-column:2/5;display:flex;align-items:center;position:sticky;top:0;z-index:var(--sZIndexFixed,4);background:var(--sBackgroundSolidWeak);height:var(--wcPlaygroundHeaderHeight);padding:var(--sSpacer-2) var(--sSpacer-5)}.aside{grid-row:2/3;grid-column:2/3;padding:var(--sSpacer-5) var(--sSpacer-4)}.aside_right{grid-row:2/3;grid-column:4/5;padding:var(--sSpacer-5) var(--sSpacer-4);.navigation{font-size:var(--sFontSize-4)}}main{grid-row:2/3;grid-column:3/4;padding:var(--sSpacer-5) var(--sSpacer-4)}.menu_button{display:none;margin-inline-end:var(--sSpacer-3)}.navigation_in{overflow:auto;height:100%}.navigation{position:sticky;top:calc(var(--wcPlaygroundHeaderHeight) + var(--sSpacer-5));z-index:calc(var(--sZIndexAbove, 2) + var(--sZIndexFixed, 4));height:calc(100vh - var(--wcPlaygroundHeaderHeight) - 2 * var(--sSpacer-5));ul{margin:0}a{color:var(--sTextStrong);display:block;text-decoration:none;padding:var(--sSpacer-2) var(--sSpacer-3);line-height:var(--sLineHeight-1);&:hover{background:var(--sBackgroundWeak)}}h3{color:var(--sTextWeak);letter-spacing:1px;font-weight:600;font-size:var(--sFontSize-3);text-transform:uppercase;margin-bottom:var(--sSpacer-3);padding-inline-start:var(--sSpacer-3)}}.navigation_design_label{margin-block-start:var(--sSpacer-6)}.logo{margin-top:36px;animation:app-logo-spin infinite 20s linear}.colors{display:flex;gap:10px;flex-wrap:wrap;> div{width:100px;height:100px}.bblue{background:var(--brandBlue)}.bblue-a10{background:var(--brandBlue-a10)}.bblue-a20{background:var(--brandBlue-a20)}.bblue-a30{background:var(--brandBlue-a30)}.bblue-a40{background:var(--brandBlue-a40)}.bblue-a50{background:var(--brandBlue-a50)}.bblue-a60{background:var(--brandBlue-a60)}.bblue-a70{background:var(--brandBlue-a70)}.bblue-a80{background:var(--brandBlue-a80)}.bblue-a90{background:var(--brandBlue-a90)}}@keyframes app-logo-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.app-footer{font-size:calc(12px + 0.5vmin);align-items:center}.app-footer a{margin-left:5px}}.menu_on{wc-playground{--wcPlaygroundDrawerWidth:76%;overflow:hidden;.aside{transform:translateY(0);opacity:1}}}@media (max-width: 700px){wc-playground{grid-template-columns:var(--wcPlaygroundDrawerWidth) 0 minmax(360px,auto) 0;.aside{grid-row:1/3;grid-column:1/2;opacity:0;transition:opacity 100ms ease;transform:translateY(-20000px);.navigation{position:static}}.aside_right{display:none}main{grid-column:2/5}.menu_button{display:block}}}html{scroll-padding-top:var(--wcPlaygroundHeaderHeight)}.wcp_colors{display:flex;flex-wrap:wrap;gap:var(--sSpacer-3);padding:var(--sSpacer-3);margin-block-start:var(--sSpacer-2);border-radius:var(--sBorderRadius-2);border:1px solid var(--sBorderWeak)}.wcp_colors_light{background:var(--sColorGraySolid-0)}.wcp_colors_dark{background:var(--sColorGraySolid-900)}.wcp_shadows{display:flex;flex-wrap:wrap;gap:var(--sSpacer-5)}.wcp_shadow{width:200px;height:200px;border-radius:var(--sBorderRadius-3);padding:var(--sSpacer-4);font-size:var(--sFontSize-3)}.wcp_shadow-1{box-shadow:var(--sShadow-1)}.wcp_shadow-2{box-shadow:var(--sShadow-2)}.wcp_shadow-3{box-shadow:var(--sShadow-3)}.wcp_shadow-4{box-shadow:var(--sShadow-4)}.wcp_shadow-5{box-shadow:var(--sShadow-5)}.wcp_shadow-6{box-shadow:var(--sShadow-6)}.iconset_container{--sGridautoMinWidth:92px;> span{display:grid;gap:var(--sSpacer-2);justify-items:center;> span{font-size:var(--sFontSize-3)}}}.width-sm{max-width:260px}.width-md{max-width:768px}.mycheckbox{display:block;width:20px;height:20px;background:rebeccapurple}.playground_form{margin-bottom:var(--sSpacer-4);legend{font-weight:bold}fieldset{border:1px solid var(--sBorderWeak);padding:var(--sSpacer-5);margin-bottom:var(--sSpacer-3);&:last-of-type{margin-bottom:var(--sSpacer-4)}}}s-radio{.playground_custom_radio{border:1px solid var(--sBorderWeak);border-radius:var(--sBorderRadius-rounded);padding:var(--sSpacer-2) var(--sSpacer-3)}&[checked] .playground_custom_radio{color:var(--sTextStrong);background:var(--sBackgroundWeak);border-color:var(--sBorderStrong)}&:focus-visible{.playground_custom_radio{outline:var(--sControlFocusRing);outline-offset:var(--sFocusRingOffset)}}&:hover{.playground_custom_radio{background:var(--sBackgroundWeak)}}}.playground_resizable_box{border:1px solid var(--sBorderWeak);padding:var(--sSpacer-3);resize:horizontal;overflow:auto;width:300px;max-width:100%}s-listbox::part(item_template_style_example){padding-block:var(--sSpacer-3)}s-listbox::part(item_template_style_example__label){font-style:italic}s-data-grid#parts_grid1::part(my_row),
s-data-grid#parts_grid2::part(col-email),
s-data-grid#parts_grid3::part(active_cell){background:beige}s-data-grid{--sDataGridHeadStickyTop:var(--wcPlaygroundHeaderHeight)}s-num-styler#num1{font-size:2em}s-num-styler#num1::part(integer){font-size:0.75em;opacity:0.6}s-num-styler#num2::part(integer){font-weight:bold;color:#ec5555}s-num-styler#num2::part(delimiter){opacity:0.4}s-num-styler#num2::part(fraction){font-size:0.9em;opacity:0.6}.scroll_pagination_container{height:200px;overflow:auto;s-scroll-pagination{display:block;text-align:center;padding:var(--sSpacer-3) var(--sSpacer-4);background:var(--sBackgroundWeak)}.scroll_pagination_block{height:400px;border-bottom:1px solid var(--sBorderWeak);padding-top:var(--sSpacer-3)}}pre.pstate{font-size:var(--sFontSize-4)}hr{border:none;border-top:1px solid var(--sBorderWeak);margin:var(--sSpacer-4) 0}.dark-theme{color-scheme:dark;--sFocusRingOpacity:41%;s-button,
    s-toolbar-button{--sButtonBackgroundOpacity:85%;--sButtonHoverBackgroundOpacity:78%}s-toolbar-button{--sToolbarButtonBackgroundOpacity:78%}s-popover:not([with-arrow]){--sPopoverBackground:var(--sBackgroundSolidWeak)}}html{color:var(--sDocColor);font-family:var(--sDocFontFamily);font-size:var(--sDocFontSize);background-color:var(--sDocBackgroundColor);line-height:var(--sDocLineHeight);font-optical-sizing:auto;font-style:normal;font-variation-settings:'wdth' 100}:not(:defined){visibility:hidden}