:root {
    /*color-scheme: light dark;*/ /* this switches dark/light mode according to system */

    /***** fonts *****/
    --sMainFont: 'Open Sans', sans-serif;
    --sSecondaryFont: 'Alegreya Sans', sans-serif;
    --sTertiraryFont: 'Istok Web', sans-serif;
    --sTextDirection: 1; /* 1: lrt, -1: rtl */

    /***** document *****/
    --sDocFontFamily: var(--sMainFont);
    --sDocFontSize: 1rem;
    --sDocLineHeight: 1.5;
    --sDocLineHeightPx: calc(var(--sDocLineHeight) * var(--sDocFontSize));
    /*--sDocLineHeight: 1.46;*/
    /*--sDocLineHeight: 24px;*/
    --sDocLineWidth: 38em;
    /*--sDocColor: #464555;*/
    --sDocColor: light-dark(var(--sTextWeak), var(--sTextWeak));
    --sDocBackgroundColor: var(--sBackgroundBase);
    /*--sDocBackgroundColor: light-dark(var(--sBackgroundBase), var(--sColorGraySolid-900));*/
    /*--sDocBackgroundColor: color-mix(in srgb, var(--sDocColor), white 94%);*/
    /*--sDocBackgroundColor: color-mix(in srgb, var(--sDocColor), transparent 94%);*/

    /***** buttons, inputs, ... *****/
    --sBaseSize: 1.5; /* height and padding multiplier */
    --sBaseHeight: var(--sDocLineHeightPx);
    --sBaseHPadding: var(--sSpacer-3);
    --sBaseVPadding: var(--sSpacer-2);

    /*
    --sFocusRingOpacity: 61%;
    --sFocusRing: 2px solid;
    --sFocusRingOffset: 1px;
    */
    --sFocusRingOpacity: 31%;
    --sFocusRing: 2px solid;
    --sFocusRingOffset: 1px;

    /***** font sizes *****/
    --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);

    /***** line heights *****/
    --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;

    /***** spacers *****/
    /*--sSpacerBase: var(--sDocLineHeight, 24px);*/
    --sSpacerBase: var(--sDocLineHeightPx);
    /*--sSpacerBase: 16px;*/
    --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);
    /*
    --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.25);
    --sSpacer-7: calc(var(--sSpacerBase) * 1.5);
    --sSpacer-8: calc(var(--sSpacerBase) * 2);
    --sSpacer-9: calc(var(--sSpacerBase) * 3.27);
    */

    /***** border radius *****/

    --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;

    /***** transitions *****/
    --sTransitionTimingFunction: ease;
    --sTransitionDuration: 180ms;

    /***** z index *****/
    --sZIndexBase: 0;
    --sZIndexAbove: 2;
    --sZIndexBelow: -1;
    /* sticky containers - headers, ... */
    --sZIndexSticky: calc(var(--sZIndexAbove) + var(--sZIndexBase));
    /* fixed containers - header, hamburger switch, ... */
    --sZIndexFixed: calc(var(--sZIndexAbove) + var(--sZIndexSticky));

    /***** colors *****/

    /* brand */
    --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
    );

    /* gray */
    --sColorGraySolid-1000: hsl(0, 0%, 0%);
    --sColorGraySolid-900: hsl(var(--sColorBrandLight-h), 0%, 10%);
    --sColorGraySolid-875: hsl(var(--sColorBrandLight-h), 0%, 12%);
    --sColorGraySolid-850: hsl(var(--sColorBrandLight-h), 0%, 15%);
    --sColorGraySolid-800: hsl(var(--sColorBrandLight-h), 0%, 20%);
    --sColorGraySolid-50: hsl(var(--sColorBrandLight-h), 0%, 95%);
    --sColorGraySolid-25: hsl(var(--sColorBrandLight-h), 0%, 98%);
    --sColorGraySolid-0: hsl(0, 0%, 100%);
    /*
    --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%, 0%, 0.8);
    --sColorGrayLight-700: hsla(var(--sColorBrandLight-h), 50%, 0%, 0.6);
    --sColorGrayLight-500: hsla(var(--sColorBrandLight-h), 50%, 0%, 0.4);
    --sColorGrayLight-100: hsla(var(--sColorBrandLight-h), 50%, 0%, 0.1);
    --sColorGrayLight-50: hsla(var(--sColorBrandLight-h), 50%, 0%, 0.04);
    --sColorGrayLight-25: hsla(var(--sColorBrandLight-h), 50%, 0%, 0.01);
    /*
    --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);

    /*
    --sColorGrayB-1000: hsla(
        var(--sColorBrandLight-h),
        var(--sColorBrandLight-s),
        15%,
        0.9
    );
    --sColorGrayB-700: hsla(
        var(--sColorBrandLight-h),
        var(--sColorBrandLight-s),
        15%,
        0.7
    );
    --sColorGrayB-500: hsla(
        var(--sColorBrandLight-h),
        var(--sColorBrandLight-s),
        15%,
        0.5
    );
    --sColorGrayB-100: hsla(
        var(--sColorBrandLight-h),
        var(--sColorBrandLight-s),
        15%,
        0.1
    );
    --sColorGrayB-50: hsla(
        var(--sColorBrandLight-h),
        var(--sColorBrandLight-s),
        15%,
        0.05
    );
    --sColorGrayB-25: hsla(
        var(--sColorBrandLight-h),
        var(--sColorBrandLight-s),
        15%,
        0.02
    );
    */

    /* semantic */
    --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));
    --sBorderWeakest: light-dark(var(--sColorGrayLight-25), var(--sColorGrayDark-25));

    --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: #1a6aff;*/
    --brandBlue: #464555;
    /*--brandBlue: var(--sColorPrimary-5);*/
    --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%));

    /***** form inputs *****/
    --sFormInputColor: var(--sTextStrong);
    --sFormInputBackground: var(--sBackgroundWeak);
    /*--sFormInputBackground: transparent;*/
    --sFormInputBorderRadius: var(--sBorderRadius-1);
    --sFormInputBorder: 1px solid;
    /*--sFormInputBorderColor: var(--sBorderStrong);*/
    --sFormInputBorderColor: var(--sBorderWeak);
    --sFormInputDisabledOpacity: 0.5;
    --sFormInputBaseColor: var(--sBackgroundBrandStrong);
    /*--sFormInputHoverBorderColor: var(--sBorderStrong);*/
    /*--sFormInputHoverBackground: var(--sFormInputBackground);*/
}
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;
}

/*ol, ul {
    list-style: none;
}*/
caption, th, td {
    text-align: start;
    font-weight: normal;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/**
 * Minified by jsDelivr using clean-css v5.3.3.
 * Original file: /npm/modern-normalize@3.0.1/modern-normalize.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
:not(:defined) {
    visibility: hidden;
}

.not_visible {
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    /*opacity: 0 !important;*/
}
ul.bare_list {
    list-style: none;
    margin-inline-start: 0;
    padding-inline-start: 0;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--sTextStrong);
}

h1 {
    font-size: var(--sFontSize-7);
}

h2 {
    font-size: var(--sFontSize-6);
    margin-block-start: var(--sSpacer-6);
}

h3 {
    font-size: var(--sFontSize-5);
}

h4 {
    font-size: var(--sFontSize-4);
}
p {
    /*line-height: inherit;*/
    color: var(--sDocColor);
    max-width: var(--sDocLineWidth);
    margin: 0 0 var(--sDocLineHeightPx) 0;
}

/*
p ~ * {
    margin-bottom: 0;
}
*/
.vertical-grid-lines {
    --grid-size: var(--sDocLineHeightPx);
    --grid-lines-color: rgba(0, 170, 255, 0.06);
    /*--grid-lines-color: rgba(0, 0, 5, 0.05);*/

    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;
    /*--s-gridauto-cols-padding: var(--s-spacer-3) var(--s-spacer-4);*/

    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;
    /*transition-behavior: allow-discrete;*/
}
s-form > form {
    display: grid;
    /*grid-template-columns: 1fr 1fr;*/
    gap: var(--sSpacer-5);

    fieldset {
        /*display: grid;*/
        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;
}

html:has(s-drawer.navigation:popover-open) {
    overflow: hidden;
}

html {
    scroll-padding-top: var(--wcPlaygroundHeaderHeight);
    /*scroll-behavior: smooth;*/
    scrollbar-gutter: stable;
}

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);
    }

    h1 {
        /*font-family: var(--sSecondaryFont);*/
    }

    .navigation {
        ul {
            margin: 0;
        }

        a {
            color: var(--sTextStrong);
            /*font-weight: 500;*/
            display: block;
            text-decoration: none;
            padding: var(--sSpacer-2) var(--sSpacer-3);
            /*margin-bottom: var(--sSpacer-1);*/
            line-height: var(--sLineHeight-1);

            &:hover {
                background: var(--sBackgroundWeak);
            }
        }

        h3 {
            position: sticky;
            top: 0;
            color: var(--sTextWeaker);
            letter-spacing: 1px;
            font-weight: 600;
            font-size: var(--sFontSize-3);
            text-transform: uppercase;
            padding-bottom: var(--sSpacer-3);
            padding-inline-start: var(--sSpacer-3);
            background: var(--sBackgroundBase);
        }
    }

    .navigation-sticky {
        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));
        background: var(--sBackgroundBase);
    }

    .navigation_in {
        overflow: auto;
        /*height: 100%;*/
    }

    .navigation_design_label {
        margin-block-start: var(--sSpacer-6);
    }

    s-drawer.navigation[disabled] {
        overflow: auto;
        scrollbar-width: none;

        .navigation_in {
            overflow: initial;
        }
    }

    s-drawer.navigation[disabled]:hover {
        scrollbar-width: auto;
    }

    s-drawer.navigation:not([disabled]) {
        h3 {
            padding-top: var(--sSpacer-4);
        }

        .navigation_in {
            padding: 0 var(--sSpacer-4) var(--sSpacer-4);
        }
    }

    .logo {
        margin-top: 36px;
        animation: app-logo-spin infinite 20s linear;
    }

    .colors {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;

        > div {
            /*flex: 1;*/
            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);
        }
    }

    .app-footer {
        font-size: calc(12px + 0.5vmin);
        align-items: center;
    }

    .app-footer a {
        margin-left: 5px;
    }
}

@keyframes app-logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.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;
        }

        header {
            padding-inline: var(--sSpacer-3);
        }

        .menu_button {
            display: block;
        }
    }
}
.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 wcp-color {
    /*--wcpColorBoxSize: 140px;*/
    /*--wcpColorFontSize: var(--sFontSize-2);*/
}

.wcp_colors_light {
    background: var(--sColorGraySolid-0);
}

.wcp_colors_dark {
    background: var(--sColorGraySolid-900);
}

/*
.wcp_colors_color_gray_b-1000 {
    background: var(--sColorGrayB-1000);
}

.wcp_colors_color_gray_b-700 {
    background: var(--sColorGrayB-700);
}

.wcp_colors_color_gray_b-500 {
    background: var(--sColorGrayB-500);
}

.wcp_colors_color_gray_b-100 {
    background: var(--sColorGrayB-100);
}

.wcp_colors_color_gray_b-50 {
    background: var(--sColorGrayB-50);
}

.wcp_colors_color_gray_b-25 {
    background: var(--sColorGrayB-25);
}
*/

.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);
        }
    }
}
/*
.iconset_container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sSpacer-5);

}
*/
.wcp_testing {
    h3 {
        margin-block-start: var(--sSpacer-5);
        margin-block-end: var(--sSpacer-2);

        &:first-child {
            margin-block-start: 0;
        }
    }
}

.wcp_testing_night_day {
    display: grid;
    place-content: center;
    /*background: var(--sBackgroundWeak);*/
    width: 32px;
    height: 32px;
    overflow: hidden;
    cursor: pointer;
    /*border-radius: 50%;*/

    > svg {
        grid-area: 1/1;
        width: 100%;
        height: 100%;

        transform-origin: 50% 140%;
        transition:
            transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.5s ease;
    }

    .moon {
        transform: rotate(0deg);
        opacity: 1;
    }

    &:hover .moon {
        transform: rotate(90deg);
        opacity: 0;
    }

    .sun {
        transform: rotate(-90deg);
        opacity: 0;
    }

    &:hover .sun {
        transform: rotate(0deg);
        opacity: 1;
    }
}

.wcp_testing_view_transitions {
    .wcp_testing_view_transitions_container {
        display: flex;
        gap: var(--sSpacer-5);
        flex-direction: row;
        margin-block-start: var(--sSpacer-5);
        /*background: var(--sBackgroundWeaker);*/

        .wcp_testing_view_transitions_box {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--sBorderRadius-2);
            font-size: var(--sFontSize-6);
            font-weight: bold;
            /*color: #fff;*/
            /*color: light-dark(var(--sTextWeak), var(--sTextWeak));*/
            background: var(--sBackgroundSolidWeak);
            view-transition-class: wcp-testing-view-transitions-box;
        }
    }

    .flex_direction_column {
        flex-direction: column;
    }

    .collapse {
        display: inline-grid;
        place-content: center;

        > * {
            grid-area: 1/1;
        }
    }

    .expand {
        > * {
            flex: 1;
        }
    }
}

.wcp_testing_view_transitions_pages {
    .wcp_testing_view_transitions_pages_container {
        max-width: 400px;
        margin: var(--sSpacer-5) 0;
        padding: var(--sSpacer-5);
        border: 1px solid var(--sBorderWeak);

        .wcp_testing_view_transitions_pages_page {
            view-transition-class: wcp-testing-view-transitions-pages-page;
        }
    }
}

.wcp_testing_border_scoop {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sBorderStrong);
    border-radius: var(--sBorderRadius-2);
    anchor-name: --borderScoop;
    transition: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: var(--sFontSize-3);
    padding: var(--sSpacer-2);

    .wcp_testing_border_scoop_num {
        position: absolute;
        position-anchor: --borderScoop;
        position-area: top right;
        border-radius: 50%;
        width: var(--sSpacer-5);
        height: var(--sSpacer-5);
        background: var(--sColorError);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: #fff;
        translate: -50% 50%;
        scale: 0.1;
        opacity: 0;
        transition: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        font-size: var(--sFontSize-4);
    }

    &:hover {
        border-top-right-radius: var(--sBorderRadius-4);
        corner-top-right-shape: scoop;

        .wcp_testing_border_scoop_num {
            scale: 1;
            opacity: 1;
        }
    }
}

/* should be in global css */
::view-transition-group(.wcp-testing-view-transitions-box),
::view-transition-group(.wcp-testing-view-transitions-pages-page) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/*@import '/src/playground/components/view-transition-playground/view-transition-playground.css';*/
.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%;

    &.both {
        resize: both;
    }
}

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;
}