/*! Skelet.css - v6.0.0 | MIT License | (c) 2025 Selekkt. | https://selekkt.dk/skelet/ */

/* ------------------
    variables
------------------ */
:root {
/** Colors */
    --primary: #006EF1;
    --red: #ff6961;
    --orange: #FFB340;
    --yellow: #FFD426;
    --green: #30DB5B;
    --purple: #6F64FC;
    --blue: #004FFF;
    --white: #FFF;
    --black: #000;
    --light: #EFEFEF;
    --dark: #181818;
    --shadow: rgb(10 10 10 / 0.1);

    --linkColor: var(--primary);
    --linkHover: #2997ff;

    --bgColor: #FFF;
    --color: #000;
    --colorInverse: #FFF;

    --selectionBg: rgb(0 0 0 / .8);
    --selectionText: #FFF;

    --codeBg: #F8F8F8;
    --codeColor: var(--blue);

    --hrColor: var(--inputBorderColor);
    --hrGradient: rgb(255 255 255 / 0);

    /* typography */
    --fontFallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, HelveticaNeue, "Helvetica Neue", "Helvetica", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --fontMono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --fontSerif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

    --fontFamily: "Inter", var(--fontFallback);
    --fontFamilyVar: "Inter var", var(--fontFallback);
    --hFontFamily: var(--fontFamily);

    --globalScale: 1.0;

    --fontSize: clamp(calc(var(--globalScale) * var(--fontSizeMin, 1.6rem)), calc(var(--globalScale) * var(--fontSizeVal, 0.2vw + 1.6rem)), calc(var(--globalScale) * var(--fontSizeMax, 1.7rem)));
    --fontLine: calc(2px + 2ex + 2px);
    --fontSpace: normal;
    --fontWeight: 400;
    --fontStyle: normal;

    /* Space System */
    --space-0: 0;
    --space-1: 0.4rem; /* 4px */
    --space-2: 0.8rem; /* 8px */
    --space-3: 1.2rem; /* 12px */
    --space-4: 1.6rem; /* 16px */
    --space-5: 2.4rem; /* 24px */
    --space-6: 3.2rem; /* 32px */

    --space-7: clamp(4rem, 4rem + ((1vw - 7.77rem) * 3.2258), 4.8rem);
    --space-8: clamp(4.8rem, 4.8rem + ((1vw - 7.77rem) * 6.4516), 6.4rem);
    --space-9: clamp(6.4rem, 6.4rem + ((1vw - 7.77rem) * 12.9032), 9.6rem);
    --space-10: clamp(8rem, 8rem + ((1vw - 7.77rem) * 19.3548), 12.8rem);
    --space-11: clamp(9.6rem, 9.6rem + ((1vw - 7.77rem) * 38.7097), 19.2rem);
    --space-12: clamp(11.2rem, 11.2rem + ((1vw - 7.77rem) * 58.0645), 25.6rem);

    --space-13: clamp(12.8rem, 12.8rem + ((1vw - 7.77rem) * 77.4194), 32rem);
    --space-14: clamp(14.4rem, 14.4rem + ((1vw - 7.77rem) * 96.7742), 38.4rem);
    --space-15: clamp(16rem, 16rem + ((1vw - 7.77rem) * 116.1290), 44.8rem);
    --space-16: clamp(17.6rem, 17.6rem + ((1vw - 7.77rem) * 135.4839), 51.2rem);
    --space-17: clamp(19.2rem, 19.2rem + ((1vw - 7.77rem) * 154.8387), 57.6rem);
    --space-18: clamp(20.8rem, 20.8rem + ((1vw - 7.77rem) * 174.1935), 64rem);

    /* Type scale system */
    --type-1: 1rem;    /* 10px */
    --type-2: 1.2rem;  /* 12px */
    --type-3: 1.4rem;  /* 14px */
    --type-4: 1.6rem;  /* 16px */
    --type-5: 1.8rem;  /* 18px */
    --type-6: 2rem;    /* 20px */

    --type-7: clamp(2.2rem, 2.2rem + ((1vw - 7.77rem) * 0.6452), 2.4rem);
    --type-8: clamp(2.4rem, 2.4rem + ((1vw - 7.77rem) * 1.2903), 2.8rem);
    --type-9: clamp(2.8rem, 2.8rem + ((1vw - 7.77rem) * 2.5806), 3.6rem);
    --type-10: clamp(3.2rem, 3.2rem + ((1vw - 7.77rem) * 3.8710), 4.4rem);
    --type-11: clamp(3.6rem, 3.6rem + ((1vw - 7.77rem) * 5.1613), 5.2rem);
    --type-12: clamp(4rem, 4rem + ((1vw - 7.77rem) * 6.4516), 6rem);

    --type-13: clamp(4.4rem, 4.4rem + ((1vw - 7.77rem) * 7.7419), 6.8rem);
    --type-14: clamp(4.8rem, 4.8rem + ((1vw - 7.77rem) * 9.0323), 7.6rem);
    --type-15: clamp(5.2rem, 5.2rem + ((1vw - 7.77rem) * 10.3226), 8.4rem);
    --type-16: clamp(5.6rem, 5.6rem + ((1vw - 7.77rem) * 11.6129), 9.2rem);
    --type-17: clamp(6rem, 6rem + ((1vw - 7.77rem) * 12.9032), 10rem);
    --type-18: clamp(6.4rem, 6.4rem + ((1vw - 7.77rem) * 14.1935), 10.8rem);

    /* other */
    --padding: var(--space-3);
    --margin: var(--space-4);
    --radius: var(--space-3);
    --borderWidth: 1px;
    --borderStyle: solid;
    --hrMargin: var(--margin);
    --pMargin: var(--space-2) 0;

    /* input/textarea/tables etc. */
    --inputPadding: var(--space-3);
    --inputMargin: var(--space-1);
    --inputRadius: var(--radius);
    --inputBorderWidth: var(--borderWidth);
    --inputBorderStyle: var(--borderStyle);
    --inputFontSize: inherit;
    --inputHeight: var(--space-5);

    --inputBg: #F8F8F8;
    --inputBgHover: var(--inputBg);
    --inputBgActive: var(--inputBg);
    --inputColor: var(--color);
    --inputPlaceholderColor: rgb(0 0 0 / .4);
    --inputBorderColor: #E1E1E1;
    --inputBorderHover: #BABABA;
    --inputBorderActive: var(--primary);

    --inputShadow: 0 0 0 0 rgb(0 0 0 / 0);

    /* checkbox/radio/role=switch */
    --inputActive: var(--primary);
    --inputActiveInner: var(--white);
    --inputFocus: rgb(41 145 248 / .7);

    /* buttons */
    --buttonPadding: var(--space-3);
    --buttonMargin: var(--space-1);
    --buttonRadius: var(--radius);
    --buttonBorderWidth: var(--borderWidth);
    --buttonBorderStyle: var(--borderStyle);
    --buttonSize: inherit;
    --buttonWeight: 600;
    --buttonWidth: fit-content;

    --buttonBg: var(--primary);
    --buttonBgHover: var(--linkHover);
    --buttonColor: #FFF;
    --buttonColorHover: var(--buttonColor);
    --buttonBorderColor: transparent;
    --buttonBorderHover: transparent;
    --buttonShadow: 0 0 0 0 rgb(0 0 0 / 0);
    --iconSize: var(--fontSize);

    /* x-grid /  */
    --rowGap: var(--space-3);
    --columnGap: var(--space-3);
    --gap: var(--rowGap) var(--columnGap);
}

/*** Dark Mode */
.dark-mode, [dark-mode], [color-scheme="dark"] {
    color-scheme: dark;

    --bgColor: #000;
    --color: #FFF;
    --colorInverse: #000;

    --inputBg: #181818;
    --inputBgHover: var(--inputBg);
    --inputBgActive: var(--inputBg);
    --inputBorderColor: #333;
    --inputBorderHover: #444;
    --inputActive: var(--primary);
    --inputColor: var(--color);
    --inputPlaceholderColor: rgb(255 255 255 / .4);

    --buttonBorderColor: transparent;
    --buttonBorderHover: transparent;

    --selectionBg: rgb(255 255 255 / .8);
    --selectionText: #000;

    --codeColor: var(--green);
    --codeBg: #111;

    --hrColor: var(--inputBorderColor);
    --hrGradient: rgb(0 0 0 / 0);
}

/* ------------------
    resets
------------------ */
*,*::before,*::after {box-sizing:border-box}
:not(pre) > code,:not(pre) > kbd,:not(pre) > samp { font-size: 1.2rem; font-family: var(--fontMono); white-space: nowrap }
img,svg,canvas,video,embed,object,dd { display: block; box-sizing: border-box; max-width: 100%; height: auto }
svg { overflow: visible; height: 100%; pointer-events: none!important }
iframe{display:block;border:0;max-width:100%}
dt {font-weight:bold}
dd {margin-inline-start:4rem}
figure {margin:0;width:fit-content}
figcaption { text-align: center; padding: var(--padding); font-size: 0.8em; }
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
input[type="number"] { -moz-appearance: textfield }
[type="search"]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
:is([hidden],[type="hidden"],.hidden) {display:none!important;outline:0}
:is([disabled],[disabled]:hover,.disabled) { filter: var(--disabledFilter, grayscale(100%)); opacity: var(--disabledOpacity, 0.7); cursor: not-allowed }
:where(html:has(dialog:modal[open])) { overflow: clip }
i svg { display: inline; height: var(--iconSizeH, var(--iconSize)); width: var(--iconSizeW, var(--iconSize)) }
i:has(svg) { display: block; line-height: 0 }

/* ------------------
    basics
------------------ */
[dir="rtl"] { direction: rtl }

::selection { background: var(--selectionBg); color: var(--selectionText) }
::-moz-selection { background: var(--selectionBg); color: var(--selectionText) }

html { height: 100%; font-size: 62.5%; line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--scrollPadding, auto); interpolate-size: allow-keywords }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: var(--scrollBehavior, smooth) } }
body { margin: 0; background: var(--bgColor); color: var(--color); font: var(--fontStyle) var(--fontWeight) var(--fontSize) var(--fontFamily); line-height: var(--fontLine); letter-spacing: var(--fontSpace) }

#app { display: flex; flex-direction: column; min-height: 100vh }
main { flex: 1 }

/* ------------------
  typography
------------------ */
:root {
    --hStyle: normal;
    --hWeight: 600;
    --hTransform: inherit;
    --hAlign: inherit;
    --hColor: currentColor;
    --hMargin: 0 0 0.65em;
    --hTextWrap: balance;
    --hScale: var(--globalScale);

    --h1Size: calc(var(--hScale) * clamp(3.1rem, 3.1rem + ((1vw - 7.77rem) * 6.4516), 4.7rem));
    --h2Size: calc(var(--hScale) * clamp(2.7rem, 2.7rem + ((1vw - 7.77rem) * 3.6290), 3.6rem));
    --h3Size: calc(var(--hScale) * clamp(2.4rem, 2.4rem + ((1vw - 7.77rem) * 2.8226), 3.1rem));
    --h4Size: calc(var(--hScale) * clamp(2.2rem, 2.2rem + ((1vw - 7.77rem) * 1.2097), 2.5rem));
    --h5Size: calc(var(--hScale) * clamp(2rem, 2rem + ((1vw - 7.77rem) * 1.2097), 2.3rem));
    --h6Size: calc(var(--hScale) * clamp(1.6rem, 1.6rem + ((1vw - 7.77rem) * 0.8065), 1.8rem));
}

h1,.h1 { font-size: var(--hSize, var(--h1Size)); line-height: var(--h1Line, var(--hLine, var(--fontLine))); letter-spacing: var(--hSpace, var(--h1Space)) }
h2,.h2 { font-size: var(--hSize, var(--h2Size)); line-height: var(--h2Line, var(--hLine, var(--fontLine))); letter-spacing: var(--hSpace, var(--h2Space)) }
h3,.h3 { font-size: var(--hSize, var(--h3Size)); line-height: var(--h3Line, var(--hLine, var(--fontLine))); letter-spacing: var(--hSpace, var(--h3Space)) }
h4,.h4 { font-size: var(--hSize, var(--h4Size)); line-height: var(--h4Line, var(--hLine, var(--fontLine))); letter-spacing: var(--hSpace, var(--h4Space)) }
h5,.h5 { font-size: var(--hSize, var(--h5Size)); line-height: var(--h5Line, var(--hLine, var(--fontLine))); letter-spacing: var(--hSpace, var(--h5Space)) }
h6,.h6 { font-size: var(--hSize, var(--h6Size)); line-height: var(--h6Line, var(--hLine, var(--fontLine))); letter-spacing: var(--hSpace, var(--h6Space)) }

h1,h2,h3,h4,h5,h6, 
.h1,.h2,.h3,.h4,.h5,.h6,.hx { 
    font-family: var(--hFontFamily);
    font-weight: var(--hWeight);
    font-style: var(--hStyle);
    text-transform: var(--hTransform);
    text-align: var(--hAlign);
    text-wrap: var(--hTextWrap);
    color: var(--hColor);
    margin: var(--hMargin);
}

p { margin:var(--pMargin); text-wrap: pretty }
blockquote { max-width: 90%; margin: var(--space-4) auto; font-style: italic; text-wrap: pretty }

:where(a,[role="link"]):not([href]) { cursor: not-allowed }
:where(a,[role="link"]):not(.button,[role="button"]) { color: var(--linkColor); cursor: pointer; text-decoration: var(--linkDecoration, auto); text-underline-offset: var(--linkDecorationOffset, inherit) }
:where(a,[role="link"]):not(.button,[role="button"]):hover { color: var(--linkHover); text-decoration: var(--linkDecorationHover, auto) }

.all-states :where(a,[role="link"]):not(.button,[role="button"]):focus { color: var(--linkFocus, inherit); text-decoration: var(--linkDecorationFocus, auto) }
.all-states :where(a,[role="link"]):not(.button,[role="button"]):active { color: var(--linkActive, inherit); text-decoration: var(--linkDecorationActive, auto) }
.all-states :where(a,[role="link"]):not(.button,[role="button"]):not(:hover):visited { color: var(--linkVisited, inherit); text-decoration: var(--linkDecorationVisited, auto) }

:where(a,[role="link"]).no-style { text-decoration: none }

/*** Accessibility */
*:focus-visible { outline-color: var(--inputFocus); outline-offset: var(--a11yOffset, 3px) }
.a11y-off *:focus-visible { outline: 0; box-shadow: none }
.a11y-inputs-off :where(select,input,textarea):focus-visible { outline: 0; box-shadow: none }
.a11y-custom :where(*,a):focus-visible { box-shadow: var(--a11yStyle, 0 0 0 0.20rem) var(--a11yColor, var(--inputFocus)); outline: var(--a11yOutline, 2px solid transparent); outline-offset: var(--a11yOffset, 2px) }

.visibility-hidden { visibility: hidden }
.sr-only, .visually-hidden, .visually-hidden-focus:not(:focus):not(:focus-within) { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important }
.button.skipTo { position: fixed; z-index: 9999; inset-block-start: var(--padding); inset-inline-start: var(--padding) }

/* if JS Active show el w/ .js -- if JS Disabled show el w/ .no-js -- if JS Disabled *hide* el /w .no-js-hidden */
:is(html.js .js, html.no-js .no-js):not(html) { display: var(--jsDisplay, inherit)!important } 
:is(html.js .no-js, html.no-js .js, html.no-js .no-js-hidden):not(html) { display: none!important }

code, samp {
    padding: var(--space-1) var(--space-3);
    margin: var(--inputMargin);
    font-size: 90%;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--codeBg);
    border: 1px solid var(--codeBorderColor, var(--inputBorderColor));
    color: var(--codeColor);
    border-radius: var(--inputRadius);
    overflow:hidden;
    display: inline-block;
}

code:hover { overflow:auto }
pre > code { display: block; padding: var(--inputPadding); white-space: pre }

kbd {
    display: inline-block;
    margin: var(--inputMargin);
    padding: var(--space-1) var(--space-3);
    background: var(--inputBg);
    box-shadow: 0px 0px 10px 0 var(--shadow), 0 0.2rem 0 var(--inputBorderColor);
    border: 1px solid var(--inputBorderColor);
    border-radius: var(--inputRadius);
    color: var(--inputColor);
    text-align: center;
    min-width: 3rem;
}

.is-green { border-color: var(--green)!important; --inputFocus: var(--green); --inputBorderColor: var(--green); --inputBorderHover: var(--green) }
.is-red, input:not(:placeholder-shown):user-invalid,[aria-invalid="true"] { border-color: var(--red)!important; --inputFocus: var(--red); --inputBorderColor: var(--red); --inputBorderHover: var(--red) }

/* Vertical and Horizontal align */
.center-axyz { display: grid; place-items: center }
.center-axyz.full { min-height: 100vh; width: 100% }
@media (max-width: 777px) { .center-axyz-s { display: grid; place-items: center } .center-axyz-s.full-s  { min-height: 100vh; width: 100% } }
@media (min-width: 1024px) { .center-axyz-m { display: grid; place-items: center } .center-axyz-m.full-m { min-height: 100vh; width: 100% } }

.mob-scroller { display: flex; flex-wrap: nowrap; overflow: hidden; overflow-x: auto; height: auto; width: 100%; scroll-behavior: smooth; -webkit-overflow-scrolling: touch }
@media (max-width: 1024px) { .mob-scroller::-webkit-scrollbar { display:none } }

@media (min-width: 1024px) { .small-medium { display: none!important } }
@media (max-width: 1024px) { .medium-large { display: none!important } }

@media (max-width: 777px) { .large-only  { display:none!important } }
@media (min-width: 778px) { .small-only  { display:none!important } }

.no-scrollbars { scrollbar-width:none; -ms-overflow-style:none } .no-scrollbars::-webkit-scrollbar { display:none }
@media (max-width: 777px)  { .no-scrollbars-s { scrollbar-width:none; -ms-overflow-style:none } .no-scrollbars-s::-webkit-scrollbar { display: none } }
@media (min-width: 1024px) { .no-scrollbars-m { scrollbar-width:none; -ms-overflow-style:none } .no-scrollbars-m::-webkit-scrollbar { display: none } }

/** Scroll snap */
:root {
    --scrollDirection: x;
    --scrollType: mandatory;
    --scrollAlign: start;
    --scrollMargin: 1rem;
    --scrollPadding: 0;
    --scrollStop: normal;
    --scrollJustifyContent: start;
    --scrollAlignItems: center;
    --scrollFlexFlow: row nowrap;
    --scrollChildHeight: auto;
    --scrollChildWidth: 100%;
    --scrollChildMinWidth: fit-content;
    --scrollChildMaxWidth: fit-content;
    --scrollOverflowX: scroll;
    --scrollOverflowY: hidden;
}

.scroll-snap {
    display: flex;
    flex-flow: var(--scrollFlexFlow);
    gap: var(--scrollMargin);
    justify-content: var(--scrollJustifyContent);
    align-items: var(--scrollAlignItems);
    contain: content;
    height: 100%;
    min-height: var(--scrollHeight);
    overflow-x: var(--scrollOverflowX);
    overflow-y: var(--scrollOverflowY);
    counter-reset: item;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-margin: var(--scrollMargin);
    scroll-padding: var(--scrollPadding);
    scroll-snap-stop: var(--scrollStop);
    scroll-snap-type: var(--scrollDirection) var(--scrollType);
}

.scroll-snap > * { flex: var(--scrollChildFlex, 1); width: var(--scrollChildWidth); min-width: var(--scrollChildMinWidth); max-width: var(--scrollChildMaxWidth); height: var(--scrollChildHeight); scroll-snap-align: var(--scrollAlign) }
.scroll-snap.y { --scrollDirection: y; --scrollFlexFlow: column nowrap; --scrollAlignItems: start; --scrollHeight: 100vh; --scrollOverflowX: hidden; --scrollOverflowY: scroll; } 
.scroll-snap.mandatory { --scrollType: mandatory } /* default */
.scroll-snap.proximity { --scrollType: proximity }
.scroll-snap.align-start { --scrollAlign: start }
.scroll-snap.align-center { --scrollAlign: center }
.scroll-snap.align-end { --scrollAlign: end }
.scroll-snap.stop-always { --scrollStop: always } /* default */

@media (max-width: 777px)  {
    .scroll-snap-s {
        display: flex;
        flex-flow: var(--scrollFlexFlow);
        gap: var(--scrollMargin);
        justify-content: var(--scrollJustifyContent);
        align-items: var(--scrollAlignItems);
        height: 100%;
        min-height: var(--scrollHeight);
        overflow-x: var(--scrollOverflowX);
        overflow-y: var(--scrollOverflowY);
        counter-reset: item;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-margin: var(--scrollMargin);
        scroll-padding: var(--scrollPadding);
        scroll-snap-stop: var(--scrollStop);
        scroll-snap-type: var(--scrollDirection) var(--scrollType);
    }

    .scroll-snap-s > * { flex: var(--scrollChildFlex, 1); width: var(--scrollChildWidth); min-width: var(--scrollChildMinWidth); max-width: var(--scrollChildMaxWidth); height: var(--scrollChildHeight); max-width: var(--scrollChildMaxWidth); scroll-snap-align: var(--scrollAlign) }
    .scroll-snap-s.y { --scrollDirection: y; --scrollFlexFlow: column nowrap; --scrollAlignItems: start; --scrollHeight: 100vh; --scrollOverflowX: hidden; --scrollOverflowY: scroll; } 
    .scroll-snap-s.mandatory { --scrollType: mandatory } /* default */
    .scroll-snap-s.proximity { --scrollType: proximity }
    .scroll-snap-s.align-start { --scrollAlign: start }
    .scroll-snap-s.align-center { --scrollAlign: center }
    .scroll-snap-s.align-end { --scrollAlign: end }
    .scroll-snap-s.stop-always { --scrollStop: always } /* default */
}

@media (min-width: 1024px) {
    .scroll-snap-m {
        display: flex;
        flex-flow: var(--scrollFlexFlow);
        gap: var(--scrollMargin);
        justify-content: var(--scrollJustifyContent);
        align-items: var(--scrollAlignItems);
        height: 100%;
        min-height: var(--scrollHeight);
        overflow-x: var(--scrollOverflowX);
        overflow-y: var(--scrollOverflowY);
        counter-reset: item;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-margin: var(--scrollMargin);
        scroll-padding: var(--scrollPadding);
        scroll-snap-stop: var(--scrollStop);
        scroll-snap-type: var(--scrollDirection) var(--scrollType);
    }

    .scroll-snap-m > * { flex: var(--scrollChildFlex, 1); width: var(--scrollChildWidth); min-width: var(--scrollChildMinWidth); max-width: var(--scrollChildMaxWidth); height: var(--scrollChildHeight); scroll-snap-align: var(--scrollAlign) }
    .scroll-snap-m.y { --scrollDirection: y; --scrollFlexFlow: column nowrap; --scrollAlignItems: start; --scrollHeight: 100vh; --scrollOverflowX: hidden; --scrollOverflowY: scroll; } 
    .scroll-snap-m.mandatory { --scrollType: mandatory } /* default */
    .scroll-snap-m.proximity { --scrollType: proximity }
    .scroll-snap-m.align-start { --scrollAlign: start }
    .scroll-snap-m.align-center { --scrollAlign: center }
    .scroll-snap-m.align-end { --scrollAlign: end }
    .scroll-snap-m.stop-always { --scrollStop: always } /* default */
}

/** Group inputs */
x-stack {
    --buttonMargin: auto; 
    --buttonHeight: 100%; 
    --buttonWeight: 400;

    display: var(--stackDisplay, inline-flex); 
    justify-content: var(--stackJc, center); 
    align-items: var(--stackAi, center); 
    height: var(--stackHeight, inherit);
    width: var(--stackWidth, inherit);
    overflow: var(--stackOverflow, initial);
}

x-stack[presuffix] {
    --buttonColor: currentColor;

    background: var(--inputBg);
    color: var(--inputColor);
    border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderColor);
    border-radius: var(--inputRadius);
    margin: var(--inputMargin);
    width: var(--inputWidth, auto);
    max-width: 100%;
}

x-stack[presuffix]:hover { border-color: var(--inputBorderHover); color: var(--inputColorHover); background: var(--inputBgHover) }
x-stack[presuffix]:focus-within { 
    border-color: var(--inputBorderActive, inherit); 
    color: var(--inputColorActive); 
    background: var(--inputBgActive);
    box-shadow: var(--a11yStyle, 0 0 0 0.20rem) var(--a11yColor, var(--inputFocus)); 
    outline: 2px solid transparent; outline-offset: var(--a11yOffset, 3px);
}
x-stack[presuffix] :is(input,button) { padding: var(--inputPadding); margin: 0!important; font-size: var(--stackFontSize, inherit) }
x-stack[presuffix] > label { white-space: nowrap; font-weight: normal }
x-stack[presuffix] > :where(label,button,span):first-child { border: 0; border-inline-end: inherit; border-radius: 0 }
x-stack[presuffix] > :where(label,button,span):last-child { border: 0; border-inline-start: inherit; border-radius: 0 }

x-stack[no-style] :is(input,button) { border: 0; margin: 0; border-radius: 0; height: auto; background: none!important; color: currentColor; font-size: var(--stackFontSize, inherit) }
x-stack[no-style] input:is(:hover,:focus,:active) { border: none }
x-stack:is([no-style],[presuffix]) input:focus { box-shadow: none; outline: none!important; border: none!important }

/* ------------------
  buttons
------------------ */
button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"] {
    padding: var(--buttonPadding);
    margin: var(--buttonMargin);
    height: var(--buttonHeight, fit-content);
    width: var(--buttonWidth);
    border-radius: var(--buttonRadius);
    border: var(--buttonBorderWidth) var(--buttonBorderStyle) var(--buttonBorderColor);
    box-shadow: var(--buttonShadow);
    background: var(--buttonBg);
    font-size: var(--buttonSize);
    font-weight: var(--buttonWeight);
    letter-spacing: var(--buttonSpacing, .03em);
    line-height: var(--buttonLineHeight, 1);
    color: var(--buttonColor);
    text-align: var(--buttonAlign, center);
    text-transform: var(--buttonTextTransform, inherit);
    text-decoration: var(--buttonDecoration, none);
    white-space: nowrap;
    font-style: inherit;
    position: relative;
    display: inline-flex;
    justify-content: var(--buttonAlign, center);
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]):hover { --buttonBg: var(--buttonBgHover); --buttonColor: var(--buttonColorHover); --buttonBorderColor: var(--buttonBorderHover); --buttonDecoration: var(--buttonDecorationHover) }

.has-icon { display: inline-flex; align-items: center; gap: var(--buttonGap, var(--buttonPadding)) }
.has-icon i { display: grid; place-items: center; font-size: max(15px, var(--buttonSize)); pointer-events: none }
.has-icon i > svg { display: inline; height: var(--iconSizeW, var(--iconSize)); width: var(--iconSizeW, var(--iconSize)) }

.is-small:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonSize: min(0.75em, 1.4rem) }
.is-large:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonSize:1.45em }

.is-pill:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonRadius:100vw }

.is-circle:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonRadius: 100vw; aspect-ratio: 1 / 1; }
.is-circle:not(.has-icon):where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { padding: 1em; width: 1em; height: 1em }

.is-square:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonRadius:0 }

:where(.is-loading,[aria-busy="true"]):where(span,button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]):after {
    content: "";
    animation: loading 500ms infinite linear;
    border: 2px solid var(--buttonColor);
    border-radius: 100%;
    border-inline-start-color: transparent;
    border-block-start-color: transparent;
    display: block;
    height: 1em;
    width: 1em;
    position: relative;
}

:where(.is-loading,[aria-busy="true"]):where(span,button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]):not(:empty):after { margin-inline-start: 1rem }

.is-unset { all: unset }
.is-link:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonBg: transparent; --buttonColor: currentColor; --buttonPadding: 0; --buttonMargin: 0; --buttonWeight: var(--fontWeight); --buttonSize: inherit; --buttonBorderWidth: 0 }
.is-blank:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { background: transparent; --buttonBorderColor: transparent; --buttonBorderHover: var(--buttonBorderColor); --buttonColor: currentColor; --buttonColorHover: currentColor }
.is-custom:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonBg: transparent; --buttonBorderColor: transparent; --buttonBorderHover: transparent; --buttonColor: currentColor; --buttonColorHover: currentColor }

.is-outline:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { background: transparent; --buttonColor: var(--buttonBg); --buttonBorderColor: currentColor }
.is-outline:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]):not(.is-white,.is-black,.is-currentcolor):hover { background: var(--buttonBg); --buttonColor: var(--buttonColorHover) }

.is-white:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]):not(.is-outline) { --buttonBg:var(--white); --buttonBgHover:var(--buttonBg); --buttonColor:var(--black); 
    --buttonColorHover: var(--black) }
.is-black:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]):not(.is-outline) { --buttonBg:var(--black); --buttonBgHover:var(--buttonBg); --buttonColor:var(--white) }

.is-currentcolor.is-outline:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonColor: currentColor; --buttonBorderColor: var(--buttonColor); --buttonColorHover: var(--buttonColor);  --buttonBorderHover: var(--buttonColor) }
.is-white.is-outline:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonColor: var(--white); --buttonBorderColor: var(--white);--buttonColorHover: var(--white);  --buttonBorderHover: var(--white) }
.is-black.is-outline:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonColor: var(--black); --buttonBorderColor: var(--black); --buttonColorHover: var(--black); --buttonBorderHover: var(--black) }

:where(.is-primary,.is-blue,.is-green,.is-yellow,.is-red,.is-orange,.is-purple):where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonBg:var(--primary); --buttonBgHover:var(--buttonBg); --buttonBorderColor:var(--buttonBg); --buttonBorderColorHover:var(--buttonBg) }
:where(.is-green,.is-yellow,.is-red,.is-orange):where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonColor: var(--black) }

.is-primary:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]) { --buttonBg: var(--primary) }
.is-blue:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"])    { --buttonBg: var(--blue); --buttonColorHover: var(--white) }
.is-green:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"])   { --buttonBg: var(--green); --buttonColorHover: var(--black) }
.is-yellow:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"])  { --buttonBg: var(--yellow); --buttonColorHover: var(--black) }
.is-red:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"])     { --buttonBg: var(--red); --buttonColorHover: var(--black) }
.is-orange:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"])  { --buttonBg: var(--orange); --buttonColorHover: var(--black) }
.is-purple:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"])  { --buttonBg: var(--purple) }

.is-blue:where(button,.button,[role="button"],[type="button"],[type="submit"],[type="reset"]):not(.is-outline) { --buttonColor: var(--white) }

/* ------------------
  forms
------------------ */
::placeholder { color: var(--inputPlaceholderColor) }

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="color"],
input[inputmode],
input[list],
select,
textarea {
    display: var(--inputDisplay, block);
    padding: var(--inputPadding);
    margin: var(--inputMargin);
    border-radius: var(--inputRadius);
    border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderColor);
    box-shadow: var(--inputShadow);
    background-color: var(--inputBg);
    font-size: var(--inputFontSize);
    font-weight: var(--inputFontWeight);
    color: var(--inputColor);
    text-align: var(--inputAlign, start);
    width: var(--inputWidth, 100%);
    transition: border 200ms ease-out;
    -webkit-appearance: none;
    appearance: none;
}

input[type="color"]:hover, 
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover, 
input[type="email"]:hover,
input[type="file"]:hover, 
input[type="month"]:hover, 
input[type="number"]:hover, 
input[type="password"]:hover, 
input[type="search"]:hover, 
input[type="tel"]:hover, 
input[type="text"]:hover, 
input[type="time"]:hover, 
input[type="url"]:hover, 
input[type="week"]:hover,
input[type="color"]:hover,
input[inputmode]:hover,
input[list]:hover,
select:hover,
textarea:hover {
    background-color: var(--inputBgHover);
    border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderHover);
}

input[type="color"]:focus, 
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus, 
input[type="email"]:focus,
input[type="file"]:focus, 
input[type="month"]:focus, 
input[type="number"]:focus, 
input[type="password"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="text"]:focus, 
input[type="time"]:focus, 
input[type="url"]:focus, 
input[type="week"]:focus,
input[type="color"]:focus,
input[inputmode]:focus,
input[list]:focus,
select:focus, 
textarea:focus {
    background-color: var(--inputBgActive);
    border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderActive, inherit);
}

input[type="color"] { height:4rem; min-width:6em; padding:calc(.25rem - 1px) 0.5rem; display:block; width:auto; cursor:pointer }

input[type="file"] { --inputBorderWidth: 0.2rem; --inputBorderStyle: dashed; display:block; padding: 0; line-height: 2.4; cursor:pointer; width: fit-content; height: auto }
input[type="file"]::file-selector-button { border: 0; border-inline-end: 1px solid var(--inputBorderColor); padding: .2em .4em; margin-inline-end: var(--padding); border-radius: 0; background: var(--inputBgActive); color: currentColor; display: inline-block; height: 100% }

input[type="range"] { height: 2.5rem; margin: 1rem 0; width: 100%; background: transparent; -webkit-appearance: none; appearance: none }
input[type="range"]::-moz-range-track              { width: 100%; height: 0.5rem; cursor: pointer; transition: all 0.2s ease-in-out; background: var(--primary); border-radius: 100vw }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; cursor: pointer; transition: all 0.2s ease-in-out; background: var(--primary); border-radius: 100vw }

input[type="range"]::-moz-range-thumb     { border: 1px solid rgb(0 0 0 / .5); height: 1.8rem; width: 1.8rem; border-radius: 2.5rem; background: var(--primary); cursor: pointer; -webkit-appearance: none; appearance: none; margin-block-start: -0.7rem }
input[type="range"]::-webkit-slider-thumb { border: 1px solid rgb(0 0 0 / .5); height: 1.8rem; width: 1.8rem; border-radius: 2.5rem; background: var(--primary); cursor: pointer; -webkit-appearance: none; appearance: none; margin-block-start: -0.7rem }

textarea { min-height: 6.5rem; padding: var(--inputPadding); border-radius: var(--textareaRadius, var(--inputRadius)) }
textarea.resize-block { resize: vertical }
textarea.resize-inline { resize: horizontal }
label, legend { display: inline-flex; gap: 0.7rem; margin-block-end: var(--inputMargin); font-weight: var(--labelWeight, 600); align-items: center; color: var(--labelColor, currentColor) }
fieldset { border: 1px solid var(--inputBorderColor); border-radius: var(--inputRadius) }
legend { padding: var(--inputPadding) }
option { padding: 0.5rem; color: var(--inputColor) }
:is(input,textarea).is-blank { border:none!important; background:transparent }

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--inputColor) 50%), linear-gradient(135deg, var(--inputColor) 50%, transparent 50%), linear-gradient(to right, var(--inputBorderColor), var(--inputBorderColor));
    background-position: calc(100% - 2rem) 50%, calc(100% - 1.5rem) 50%, calc(100% - 4rem) 50%;
    background-size: 0.5rem 0.5rem, 0.5rem 0.5rem, 0.1rem 100%;
    background-repeat: no-repeat;
    color: var(--inputColor);
    padding-inline-end: 4.5rem;
}

[dir="rtl"] select { padding-inline-start: 5.3rem }

select:required:user-invalid { color: var(--inputPlaceholderColor) }
select:hover { color: var(--inputColor); background-image: linear-gradient(45deg, transparent 50%, var(--inputColor) 50%), linear-gradient(135deg, var(--inputColor) 50%, transparent 50%), linear-gradient(to right, var(--inputBorderHover), var(--inputBorderHover)) }
select:focus { color: var(--inputColor); background-image: linear-gradient(45deg, transparent 50%, var(--inputColor) 50%), linear-gradient(135deg, var(--inputColor) 50%, transparent 50%), linear-gradient(to right, var(--inputBorderActive, var(--inputBorderHover)), var(--inputBorderActive)) }
select:-moz-focusring { color:transparent; text-shadow: 0 0 0 var(--color) }

/** Radio checkbox switch */
input:where([type="checkbox"],[type="radio"]):not([type="switch"]) {
    -webkit-appearance: none;
    appearance: none;
    height: var(--inputHeight);
    width: var(--inputHeight);
    aspect-ratio: 1 / 1;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--inputBorderColor));
    border-radius: var(--br, var(--inputRadius));
    background: var(--b, var(--inputBgColor));
}

input:where([type="checkbox"],[type="radio"]):not([type="switch"])::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0.15rem;
    transition: opacity var(--d-o, 0.2s), transform var(--d-t, 0.3s) var(--d-t-e, ease);
}

input:where([type="checkbox"],[type="radio"]):not([type="switch"]):checked {
    --b: var(--inputActive);
    --bc: var(--inputActive);
    --d-o: 100ms;
    --d-t: 250ms;
    --d-t-e: ease-in-out;
}

/* Disabled */
input:where([type="checkbox"],[type="radio"]):not([type="switch"]):disabled { filter: grayscale(100%); cursor: not-allowed; opacity: .7 }
input:where([type="checkbox"],[type="radio"]):not([type="switch"]):disabled:checked { filter: grayscale(100%) }
input:where([type="checkbox"],[type="radio"]):not([type="switch"]):disabled + label { cursor: not-allowed }

input:where([type="checkbox"],[type="radio"]):not([type="switch"]):hover:not(:checked):not(:disabled) { border-color: var(var(--bcHover), var(--inputBorderHover)) }

input:where([type="checkbox"],[type="radio"]):focus { box-shadow: 0 0 0 2px var(--inputFocus) }  
input:where([type="checkbox"],[type="radio"]):not([role="switch"])::after { opacity: var(--o, 0) }  
input:where([type="checkbox"],[type="radio"]):not([role="switch"]):checked { --o: 1 }
  
input:where([type="checkbox"],[type="radio"]):not([type="switch"]) + label {
    display: inline-block;
    line-height: var(--inputHeight);
    vertical-align: top;
    cursor: pointer;
    margin-inline-start: var(--space-1);
    user-select: none;
}

input[type="checkbox"]:not([role="switch"]) { --br: 0.3rem }

input[type="checkbox"]:not([role="switch"])::after {
    width: 0.6rem;
    height: 1rem;
    border: 1px solid var(--inputActiveInner);
    border-block-start: 0;
    border-inline-start: 0;
    left: 0.8rem;
    top: 0.45rem;
    transform: rotate(43deg);
}

/* Switch */
input[type="checkbox"][role="switch"] { width: 4rem; border-radius: 100vw }

input[type="checkbox"][role="switch"]::after {
    left: 0.3rem;
    top: 0.3rem;
    border-radius: 100vw;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--ab, var(--primary));
    transform: translateX(var(--x, 0));
}

input[type="checkbox"][role="switch"]:checked { --ab: var(--inputActiveInner); --x: 1.7rem }
input[type="checkbox"][role="switch"]:disabled:not(:checked)::after { opacity: .7 }

/* Radio */
input[type="radio"] { border-radius: 100vw }

input[type="radio"]:after {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 100vw;
    background: var(--inputActiveInner);
    transform: scale(var(--s, 0.7));
}

input[type="radio"]:checked { --s: .5 }

/**** 
 * Toggle token
 * */
:root {
    --tokenBg: var(--buttonBg);
    --tokenColor: var(--buttonColor);
    --tokenRadius: var(--buttonRadius);
    --tokenPadding: var(--buttonPadding);
    --tokenMargin: var(--buttonMargin);
    --tokenLine: var(--fontLine);
    --tokenSpace: var(--fontSpace);
    --tokenWeight: var(--buttonWeight);

    --tokenBorder: var(--buttonBorderWidth) var(--buttonBorderStyle);
    --tokenBorderColor: var(--buttonBorderColor);

    --tokenBgHover: var(--buttonBgHover);
    --tokenColorHover: var(--buttonColorHover);
    --tokenBorderHover: var(--buttonBorderHover);

    --tokenBgActive: var(--buttonColor);
    --tokenColorActive: var(--buttonBg);
    --tokenBorderActive: var(--inputBorderActive);
}

.toggle-token, .toggle-token legend { all: unset }
.toggle-token input:where([type="radio"],[type="checkbox"]) { clip: rect(0 0 0 0)!important; position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; white-space: nowrap!important; border: 0!important }
 
.toggle-token legend { display: var(--tokenLegend, none) }
 
.toggle-token label,
.toggle-token input:where([type="radio"],[type="checkbox"]) + label {
    display: var(--tokenDisplay, inline-flex);
    flex-direction: var(--tokenDirection, row);
    background: var(--tokenBg);
    color: var(--tokenColor);
    font-size: inherit;
    text-wrap: nowrap;
    font-weight: var(--tokenWeight);
    letter-spacing: var(--tokenSpace);
    line-height: var(--tokenLine);
    text-decoration: var(--tokenDecoration);
    border: var(--tokenBorder) var(--tokenBorderColor);
    border-radius: var(--tokenRadius);
    padding: var(--tokenPadding); 
    margin: var(--tokenMargin);
    user-select: none;
    cursor: pointer;
    position: relative;
}
 
.toggle-token label:where(:hover,:focus,:focus-visible,:focus-within),
.toggle-token input:where([type="radio"],[type="checkbox"]):hover + label { 
    background: var(--tokenBgHover); 
    color: var(--tokenColorHover); 
    border-color: var(--tokenBorderHover);
    text-decoration: var(--tokenDecorationHover);
}
 
.toggle-token label:has(input:where([type="radio"],[type="checkbox"]):checked),
.toggle-token input:where([type="radio"],[type="checkbox"]):checked + label { 
    background: var(--tokenBgActive); 
    color: var(--tokenColorActive); 
    border-color: var(--tokenBorderActive); 
    font-weight: var(--tokenWeight);
    text-decoration: var(--tokenDecorationActive);
}
 
.toggle-token label:has(input:where([type="radio"],[type="checkbox"]):where(:disabled,.disabled)),
.toggle-token input:where([type="radio"],[type="checkbox"]):where(:disabled,.disabled) + label {
    filter: var(--tokenDisabledFilter, grayscale(100%)); 
    cursor: not-allowed;
    opacity: var(--tokenOpacity, 0.3);
    text-decoration: var(--tokenTextDec, line-through) !important;
    pointer-events: none;
}

/* ------------------
  lists
------------------ */
ul { list-style: disc inside }
ol { list-style: decimal inside }
ul, ol { padding-inline-start: 0; margin-block-start: 0 }
ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 100% }
li { margin-block-end: var(--liMargin, var(--margin)) }

.inline li { display: inline-block; list-style: none; margin: 0; padding: 0 }
ul.no-style, ol.no-style { list-style: none; margin: 0; padding: 0 }
ul.no-style.inside, ol.no-style.inside { --liMargin: 0 }
ul.no-style ul, ol.no-style ol {list-style:none}
ul.indent, ol.indent { margin: 1.5rem 0 1.5rem 3rem }

ul.disc {list-style-type:disc}
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.roman {list-style-type:upper-roman}
ol.alpha {list-style-type:lower-alpha}
ol.decimal {list-style-type:decimal}
ul.inside,ol.inside {list-style-position:inside}
ul.outside,ol.outside {list-style-position:outside}

/* ---------------------
  hr - horizontal rules
--------------------- */
hr { width: 100%; margin: var(--hrMargin) auto; background-color: var(--hrColor); border: 0 none }
hr:not([size]) { height: 0.1rem }
hr.gradient { background-color: transparent; background-image: linear-gradient(to right, var(--hrGradient) 0%, var(--hrColor) 50%, var(--hrGradient) 100%) }

/* .text-hr:  --- text --- // .text-hre: text --- // .text-hrs: --- text */
.text-hr, .text-hre, .text-hrs { display: flex; align-items: center; text-align: center; margin: var(--hrMargin) auto }
.text-hr::before, .text-hr::after, .text-hre::before, .text-hrs::after { content: ""; flex: 1; border-block-end: 1px solid var(--hrColor) }
.text-hr::after, .text-hrs::after { margin-inline-start: var(--padding) }
.text-hr::before, .text-hre::before { margin-inline-end: var(--padding) }

/* ------------------
  tables
------------------ */
:root {
    --tableColor: currentColor;
    --tableBg: var(--inputBg);
    --tableStrip: var(--inputBg);
    --tablePadding: var(--inputPadding);
    --tableMargin: var(--margin);
    --tableBorderWidth: var(--inputBorderWidth);
    --tableBorderStyle: var(--inputBorderStyle);
    --tableBorderColor: var(--inputBorderColor);
    --tableBorder: var(--tableBorderWidth) var(--tableBorderStyle) var(--tableBorderColor);
}

table {
    overflow-x: auto;
    border-spacing: 0;
    font-size: var(--tableSize, inherit);
    margin: var(--tableMargin);
}

table caption { margin: var(--tableMargin) }
table tr td { padding: var(--tablePadding); min-width: 15rem; vertical-align: middle; border-block-end: var(--tableBorder) }
table tr:last-child td { border-block-end: 0 }

table th {
    position: relative;
    color: var(--tableColor);
    text-transform: var(--tableTextTransform, capitalize);
    padding: var(--tablePadding);
    text-align: start;
    vertical-align: middle;
    border-block-start: var(--tableBorder);
    border-block-end: var(--tableBorder);
    overflow: hidden;
    font-weight: 400
}

table thead th { background: var(--tableBg) }
table th:first-child { border-radius: var(--radius) 0 0 var(--radius); border-inline-start: var(--tableBorder) }
table th:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-inline-end: var(--tableBorder) }

table.is-striped tr { border:0 }
table.is-striped tbody tr:nth-child(2n) td { background: var(--tableStrip); }

table.is-hover tbody tr:hover { background: var(--tableBg); border-radius: var(--radius) }

table:where(.is-sticky-head,.is-sticky-foot) { overflow: unset }
table.is-sticky-head thead { position: sticky; inset-block-start: var(--sticky, .2rem); z-index: 2 }
table.is-sticky-foot tfoot { position: sticky; inset-block-end: var(--sticky, .2rem); z-index: 1; background: var(--bgColor) }

table.has-borders { border: var(--tableBorder) }
table.has-borders th { border-radius: 0; border:0 }
table.has-borders td:not(:last-of-type) { border-inline-end: var(--tableBorder) }

/* ------------------
  css grid
------------------ */
:is(x-grid,[x-grid]) {
    --grid-mm: 0px, 1fr; /* MinMax */
    --grid-tc-ln: 4; /* Template Columns Line Name/Number */
    --grid-tc: repeat(var(--grid-tc-ln), minmax(var(--grid-mm))); /* Template Columns */
    --grid-cs: 1; /* Column Start */
    --grid-ce: -1; /* Column End */
    --grid-rs: 1; /* Row Start */
    --grid-re: -1; /* Row End */

    display: grid;
    gap: var(--gap);
    grid-template-columns: var(--grid-tc); /* default columns */ 
}

:is(x-subgrid,[x-subgrid]) { display: grid; grid-template-columns: subgrid; gap: inherit }

:where(x-grid,[x-grid],x-subgrid,[x-subgrid]) img { object-fit: contain; max-width: 100% }
:where(x-grid,[x-grid],x-subgrid,[x-subgrid]) > * { appearance: none; -webkit-appearance: none }

[columns="1"] { --grid-tc-ln: 1 }
[columns="2"] { --grid-tc-ln: 2 }
[columns="3"] { --grid-tc-ln: 3 }
[columns="4"] { --grid-tc-ln: 4 }
[columns="5"] { --grid-tc-ln: 5 }
[columns="6"] { --grid-tc-ln: 6 }
[columns="7"] { --grid-tc-ln: 7 }
[columns="8"] { --grid-tc-ln: 8 }
[columns="9"] { --grid-tc-ln: 9 }
[columns="10"] { --grid-tc-ln: 10 }
[columns="11"] { --grid-tc-ln: 11 }
[columns="12"] { --grid-tc-ln: 12 }

[columns="fit"] { --grid-tc-ln: auto-fit; --grid-mm: 10rem, 1fr }
[columns="fill"] { --grid-tc-ln: auto-fill; --grid-mm: 10rem, 1fr }
[columns="1f"] { --grid-tc-ln: 1 }
[columns="1f"] > * { grid-column: 1 / -1 }

[columns="stack"] { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr }
[columns="stack"] > * { position: relative; grid-row: 1; grid-column: 1; z-index: 0 }
[columns="stack"] > *:first-child { z-index: 1 }

/*** Grid Column - X axis */
[span^="1"] { --grid-cs: 1 }
[span^="2"] { --grid-cs: 2 }
[span^="3"] { --grid-cs: 3 }
[span^="4"] { --grid-cs: 4 }
[span^="5"] { --grid-cs: 5 }
[span^="6"] { --grid-cs: 6 }
[span^="7"] { --grid-cs: 7 }
[span^="8"] { --grid-cs: 8 }
[span^="9"] { --grid-cs: 9 }
[span^="10"] { --grid-cs: 10 }
[span^="11"] { --grid-cs: 11 }
[span^="12"] { --grid-cs: 12 }

[span$="+1"], [span="1"] { --grid-ce: 1 }
[span$="+2"], [span$="-1"], [span="2"] { --grid-ce: 2 }
[span$="+3"], [span$="-2"], [span="3"] { --grid-ce: 3 }
[span$="+4"], [span$="-3"], [span="4"] { --grid-ce: 4 }
[span$="+5"], [span$="-4"], [span="5"] { --grid-ce: 5 }
[span$="+6"], [span$="-5"], [span="6"] { --grid-ce: 6 }
[span$="+7"], [span$="-6"], [span="7"] { --grid-ce: 7 }
[span$="+8"], [span$="-7"], [span="8"] { --grid-ce: 8 }
[span$="+9"], [span$="-8"], [span="9"] { --grid-ce: 9 }
[span$="+10"], [span$="-9"], [span="10"] { --grid-ce: 10 }
[span$="+11"], [span$="-10"], [span="11"] { --grid-ce: 11 }
[span$="+12"], [span$="-11"], [span="12"] { --grid-ce: 12 }
[span$="-12"] { --grid-ce: 13 }
    
/* connect vars */
[span] { grid-column-end: span var(--grid-ce) }
[span*="+"], [span*="-"], [span*=".."] { grid-column-start: var(--grid-cs) }
[span*="-"], [span*=".."] { grid-column-end: var(--grid-ce) }
[span="row"] { grid-column: 1 / -1 }
    
/*** Grid Row - Y axis */
[span-y^="1"] { --grid-rs: 1 }
[span-y^="2"] { --grid-rs: 2 }
[span-y^="3"] { --grid-rs: 3 }
[span-y^="4"] { --grid-rs: 4 }
[span-y^="5"] { --grid-rs: 5 }
[span-y^="6"] { --grid-rs: 6 }
[span-y^="7"] { --grid-rs: 7 }
[span-y^="8"] { --grid-rs: 8 }
[span-y^="9"] { --grid-rs: 9 }
[span-y^="10"] { --grid-rs: 10 }
[span-y^="11"] { --grid-rs: 11 }
[span-y^="12"] { --grid-rs: 12 }
    
[span-y$="+1"], [span-y="1"] { --grid-re: 1 }
[span-y$="+2"], [span-y$="-1"], [span-y="2"] { --grid-re: 2 }
[span-y$="+3"], [span-y$="-2"], [span-y="3"] { --grid-re: 3 }
[span-y$="+4"], [span-y$="-3"], [span-y="4"] { --grid-re: 4 }
[span-y$="+5"], [span-y$="-4"], [span-y="5"] { --grid-re: 5 }
[span-y$="+6"], [span-y$="-5"], [span-y="6"] { --grid-re: 6 }
[span-y$="+7"], [span-y$="-6"], [span-y="7"] { --grid-re: 7 }
[span-y$="+8"], [span-y$="-7"], [span-y="8"] { --grid-re: 8 }
[span-y$="+9"], [span-y$="-8"], [span-y="9"] { --grid-re: 9 }
[span-y$="+10"], [span-y$="-9"], [span-y="10"] { --grid-re: 10 }
[span-y$="+11"], [span-y$="-10"], [span-y="11"] { --grid-re: 11 }
[span-y$="+12"], [span-y$="-11"], [span-y="12"] { --grid-re: 12 }
[span-y$="-12"] { --grid-re: 13 }
    
/* connect vars */
[span-y] { grid-row-end: span var(--grid-re) }
[span-y*="+"], [span-y*="-"] { grid-row-start: var(--grid-rs) }
[span-y*="-"] { grid-row-end: var(--grid-re) }
[span-y="1f"]  { grid-row: 1 / -1 }

/* [S] for window width <= 777px */
@media (max-width: 777px) {

    [columns-s="1"] { --grid-tc-ln: 1 }
    [columns-s="2"] { --grid-tc-ln: 2 }
    [columns-s="3"] { --grid-tc-ln: 3 }
    [columns-s="4"] { --grid-tc-ln: 4 }
    [columns-s="5"] { --grid-tc-ln: 5 }
    [columns-s="6"] { --grid-tc-ln: 6 }
    [columns-s="7"] { --grid-tc-ln: 7 }
    [columns-s="8"] { --grid-tc-ln: 8 }
    [columns-s="9"] { --grid-tc-ln: 9 }
    [columns-s="10"] { --grid-tc-ln: 10 }
    [columns-s="11"] { --grid-tc-ln: 11 }
    [columns-s="12"] { --grid-tc-ln: 12 }
    [columns-s="fit"] { --grid-tc-ln: auto-fit; --grid-mm: 10rem, 1fr }
    [columns-s="fill"] { --grid-tc-ln: auto-fill; --grid-mm: 10rem, 1fr }
    [columns-s="1f"] { --grid-tc-ln: 1 }
    [columns-s="1f"] > * { grid-column: 1 / -1 }
    [columns-s="stack"] { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr }
    [columns-s="stack"] > * { position: relative; grid-row: 1; grid-column: 1 }
    [columns-s="stack"] > *:first-child { z-index: 1 }
        
    /*** Grid Column - X axis */
    [span-s^="1"] { --grid-cs: 1 }
    [span-s^="2"] { --grid-cs: 2 }
    [span-s^="3"] { --grid-cs: 3 }
    [span-s^="4"] { --grid-cs: 4 }
    [span-s^="5"] { --grid-cs: 5 }
    [span-s^="6"] { --grid-cs: 6 }
    [span-s^="7"] { --grid-cs: 7 }
    [span-s^="8"] { --grid-cs: 8 }
    [span-s^="9"] { --grid-cs: 9 }
    [span-s^="10"] { --grid-cs: 10 }
    [span-s^="11"] { --grid-cs: 11 }
    [span-s^="12"] { --grid-cs: 12 }

    [span-s$="+1"], [span-s="1"] { --grid-ce: 1 }
    [span-s$="+2"], [span-s$="-1"], [span-s="2"] { --grid-ce: 2 }
    [span-s$="+3"], [span-s$="-2"], [span-s="3"] { --grid-ce: 3 }
    [span-s$="+4"], [span-s$="-3"], [span-s="4"] { --grid-ce: 4 }
    [span-s$="+5"], [span-s$="-4"], [span-s="5"] { --grid-ce: 5 }
    [span-s$="+6"], [span-s$="-5"], [span-s="6"] { --grid-ce: 6 }
    [span-s$="+7"], [span-s$="-6"], [span-s="7"] { --grid-ce: 7 }
    [span-s$="+8"], [span-s$="-7"], [span-s="8"] { --grid-ce: 8 }
    [span-s$="+9"], [span-s$="-8"], [span-s="9"] { --grid-ce: 9 }
    [span-s$="+10"], [span-s$="-9"], [span-s="10"] { --grid-ce: 10 }
    [span-s$="+11"], [span-s$="-10"], [span-s="11"] { --grid-ce: 11 }
    [span-s$="+12"], [span-s$="-11"], [span-s="12"] { --grid-ce: 12 }
    [span-s$="-12"] { --grid-ce: 13 }
        
    /* connect vars */
    [span-s] { grid-column-end: span var(--grid-ce) }
    [span-s*="+"], [span-s*="-"], [span-s*=".."] { grid-column-start: var(--grid-cs) }
    [span-s*="-"], [span-s*=".."] { grid-column-end: var(--grid-ce) }
    [span-s="row"] { grid-column: 1 / -1 }
        
    /*** Grid Row - Y axis */
    [span-y-s^="1"] { --grid-rs: 1 }
    [span-y-s^="2"] { --grid-rs: 2 }
    [span-y-s^="3"] { --grid-rs: 3 }
    [span-y-s^="4"] { --grid-rs: 4 }
    [span-y-s^="5"] { --grid-rs: 5 }
    [span-y-s^="6"] { --grid-rs: 6 }
    [span-y-s^="7"] { --grid-rs: 7 }
    [span-y-s^="8"] { --grid-rs: 8 }
    [span-y-s^="9"] { --grid-rs: 9 }
    [span-y-s^="10"] { --grid-rs: 10 }
    [span-y-s^="11"] { --grid-rs: 11 }
    [span-y-s^="12"] { --grid-rs: 12 }
        
    [span-y-s$="+1"], [span-y-s="1"] { --grid-re: 1 }
    [span-y-s$="+2"], [span-y-s$="-1"], [span-y-s="2"] { --grid-re: 2 }
    [span-y-s$="+3"], [span-y-s$="-2"], [span-y-s="3"] { --grid-re: 3 }
    [span-y-s$="+4"], [span-y-s$="-3"], [span-y-s="4"] { --grid-re: 4 }
    [span-y-s$="+5"], [span-y-s$="-4"], [span-y-s="5"] { --grid-re: 5 }
    [span-y-s$="+6"], [span-y-s$="-5"], [span-y-s="6"] { --grid-re: 6 }
    [span-y-s$="+7"], [span-y-s$="-6"], [span-y-s="7"] { --grid-re: 7 }
    [span-y-s$="+8"], [span-y-s$="-7"], [span-y-s="8"] { --grid-re: 8 }
    [span-y-s$="+9"], [span-y-s$="-8"], [span-y-s="9"] { --grid-re: 9 }
    [span-y-s$="+10"], [span-y-s$="-9"], [span-y-s="10"] { --grid-re: 10 }
    [span-y-s$="+11"], [span-y-s$="-10"], [span-y-s="11"] { --grid-re: 11 }
    [span-y-s$="+12"], [span-y-s$="-11"], [span-y-s="12"] { --grid-re: 12 }
    [span-y-s$="-12"] { --grid-re: 13 }
        
    /* connect vars */
    [span-y-s] { grid-row-end: span var(--grid-re) }
    [span-y-s*="+"], [span-y-s*="-"] { grid-row-start: var(--grid-rs) }
    [span-y-s*="-"] { grid-row-end: var(--grid-re) }
    [span-y-s="1f"]  { grid-row: 1 / -1 }

}

/* [M] for window width 778px <> 1024px */
@media (min-width: 778px) and (max-width: 1024px) {

    [columns-m="1"] { --grid-tc-ln: 1 }
    [columns-m="2"] { --grid-tc-ln: 2 }
    [columns-m="3"] { --grid-tc-ln: 3 }
    [columns-m="4"] { --grid-tc-ln: 4 }
    [columns-m="5"] { --grid-tc-ln: 5 }
    [columns-m="6"] { --grid-tc-ln: 6 }
    [columns-m="7"] { --grid-tc-ln: 7 }
    [columns-m="8"] { --grid-tc-ln: 8 }
    [columns-m="9"] { --grid-tc-ln: 9 }
    [columns-m="10"] { --grid-tc-ln: 10 }
    [columns-m="11"] { --grid-tc-ln: 11 }
    [columns-m="12"] { --grid-tc-ln: 12 }
    [columns-m="fit"] { --grid-tc-ln: auto-fit; --grid-mm: 10rem, 1fr }
    [columns-m="fill"] { --grid-tc-ln: auto-fill; --grid-mm: 10rem, 1fr }
    [columns-m="1f"] { --grid-tc-ln: 1 }
    [columns-m="1f"] > * { grid-column: 1 / -1 }
    [columns-m="stack"] { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr }
    [columns-m="stack"] > * { position: relative; grid-row: 1; grid-column: 1 }
    [columns-m="stack"] > *:first-child { z-index: 1 }
        
    /*** Grid Column - X axis */
    [span-m^="1"] { --grid-cs: 1 }
    [span-m^="2"] { --grid-cs: 2 }
    [span-m^="3"] { --grid-cs: 3 }
    [span-m^="4"] { --grid-cs: 4 }
    [span-m^="5"] { --grid-cs: 5 }
    [span-m^="6"] { --grid-cs: 6 }
    [span-m^="7"] { --grid-cs: 7 }
    [span-m^="8"] { --grid-cs: 8 }
    [span-m^="9"] { --grid-cs: 9 }
    [span-m^="10"] { --grid-cs: 10 }
    [span-m^="11"] { --grid-cs: 11 }
    [span-m^="12"] { --grid-cs: 12 }

    [span-m$="+1"], [span-m="1"] { --grid-ce: 1 }
    [span-m$="+2"], [span-m$="-1"], [span-m="2"] { --grid-ce: 2 }
    [span-m$="+3"], [span-m$="-2"], [span-m="3"] { --grid-ce: 3 }
    [span-m$="+4"], [span-m$="-3"], [span-m="4"] { --grid-ce: 4 }
    [span-m$="+5"], [span-m$="-4"], [span-m="5"] { --grid-ce: 5 }
    [span-m$="+6"], [span-m$="-5"], [span-m="6"] { --grid-ce: 6 }
    [span-m$="+7"], [span-m$="-6"], [span-m="7"] { --grid-ce: 7 }
    [span-m$="+8"], [span-m$="-7"], [span-m="8"] { --grid-ce: 8 }
    [span-m$="+9"], [span-m$="-8"], [span-m="9"] { --grid-ce: 9 }
    [span-m$="+10"], [span-m$="-9"], [span-m="10"] { --grid-ce: 10 }
    [span-m$="+11"], [span-m$="-10"], [span-m="11"] { --grid-ce: 11 }
    [span-m$="+12"], [span-m$="-11"], [span-m="12"] { --grid-ce: 12 }
    [span-m$="-12"] { --grid-ce: 13 }
        
    /* connect vars */
    [span-m] { grid-column-end: span var(--grid-ce) }
    [span-m*="+"], [span-m*="-"], [span-m*=".."] { grid-column-start: var(--grid-cs) }
    [span-m*="-"], [span-m*=".."] { grid-column-end: var(--grid-ce) }
    [span-m="row"] { grid-column: 1 / -1 }
        
    /*** Grid Row - Y axis */
    [span-y-m^="1"] { --grid-rs: 1 }
    [span-y-m^="2"] { --grid-rs: 2 }
    [span-y-m^="3"] { --grid-rs: 3 }
    [span-y-m^="4"] { --grid-rs: 4 }
    [span-y-m^="5"] { --grid-rs: 5 }
    [span-y-m^="6"] { --grid-rs: 6 }
    [span-y-m^="7"] { --grid-rs: 7 }
    [span-y-m^="8"] { --grid-rs: 8 }
    [span-y-m^="9"] { --grid-rs: 9 }
    [span-y-m^="10"] { --grid-rs: 10 }
    [span-y-m^="11"] { --grid-rs: 11 }
    [span-y-m^="12"] { --grid-rs: 12 }
        
    [span-y-m$="+1"], [span-y-m="1"] { --grid-re: 1 }
    [span-y-m$="+2"], [span-y-m$="-1"], [span-y-m="2"] { --grid-re: 2 }
    [span-y-m$="+3"], [span-y-m$="-2"], [span-y-m="3"] { --grid-re: 3 }
    [span-y-m$="+4"], [span-y-m$="-3"], [span-y-m="4"] { --grid-re: 4 }
    [span-y-m$="+5"], [span-y-m$="-4"], [span-y-m="5"] { --grid-re: 5 }
    [span-y-m$="+6"], [span-y-m$="-5"], [span-y-m="6"] { --grid-re: 6 }
    [span-y-m$="+7"], [span-y-m$="-6"], [span-y-m="7"] { --grid-re: 7 }
    [span-y-m$="+8"], [span-y-m$="-7"], [span-y-m="8"] { --grid-re: 8 }
    [span-y-m$="+9"], [span-y-m$="-8"], [span-y-m="9"] { --grid-re: 9 }
    [span-y-m$="+10"], [span-y-m$="-9"], [span-y-m="10"] { --grid-re: 10 }
    [span-y-m$="+11"], [span-y-m$="-10"], [span-y-m="11"] { --grid-re: 11 }
    [span-y-m$="+12"], [span-y-m$="-11"], [span-y-m="12"] { --grid-re: 12 }
    [span-y-m$="-12"] { --grid-re: 13 }
        
    /* connect vars */
    [span-y-m] { grid-row-end: span var(--grid-re) }
    [span-y-m*="+"], [span-y-m*="-"] { grid-row-start: var(--grid-rs) }
    [span-y-m*="-"] { grid-row-end: var(--grid-re) }
    [span-y-m="1f"]  { grid-row: 1 / -1 }

}

/* ------------------
  flexbox
------------------ */
/*  Flex Container */
:is(x-flex,[x-flex]) { --jsDisplay: flex; display: flex; gap: var(--gap) }
:where(x-flex,[x-flex]) > * { flex: 0 1 auto; width: auto; appearance: none }
:where(x-flex,[x-flex]).even > * { width: 100% }
:where(x-flex,[x-flex]) img { object-fit: contain; max-width: 100% }
:where(x-flex,[x-flex]) x-cell:has(svg) { flex-shrink: 0 } /* preventing svg from being cropped */

/*  Flex Direction */
[direction="column"] { flex-direction: column }
[direction="column-reverse"] { flex-direction: column-reverse }
[direction="row"] { flex-direction: row }
[direction="row-reverse"] { flex-direction: row-reverse }

/* Wrap */
[wrap],[wrap="wrap"] { flex-wrap: wrap }
[wrap="nowrap"] { flex-wrap: nowrap }
[wrap="reverse"] { flex-wrap: wrap-reverse }

/* Flex span */
:where(x-flex,[x-flex]) > [span] { flex: var(--grid-cs) }
:where(x-flex,[x-flex]) > [span="full"] { flex: 1 1 auto } /* full flex */
:where(x-flex,[x-flex]) > [span="row"] { flex-basis: 100% } /* wrap=wrap to function! */

/* for window width <= 777px */
@media (max-width: 777px) {
    /*  Flex Direction */
    [direction-s="column"] { flex-direction: column }
    [direction-s="column-reverse"] { flex-direction: column-reverse }
    [direction-s="row"] { flex-direction: row }
    [direction-s="row-reverse"] { flex-direction: row-reverse }

    /* Wrap */
    [wrap-s],[wrap-s="wrap"] { flex-wrap: wrap }
    [wrap-s="nowrap"] { flex-wrap: nowrap }
    [wrap-s="reverse"] { flex-wrap: wrap-reverse }

    /* Flex span */
    :where(x-flex,[x-flex]) > [span-s] { flex: var(--grid-cs) }
    :where(x-flex,[x-flex]) > [span-s="row"] { flex-basis: 100% }
}

/* for window width 778px <> 1024px */
@media (min-width: 778px) and (max-width: 1024px) {
    /*  Flex Direction */
    [direction-m="column"] { flex-direction: column }
    [direction-m="column-reverse"] { flex-direction: column-reverse }
    [direction-m="row"] { flex-direction: row }
    [direction-m="row-reverse"] { flex-direction: row-reverse }

    /* Wrap */
    [wrap-m],[wrap-m="wrap"] { flex-wrap: wrap }
    [wrap-m="nowrap"] { flex-wrap: nowrap }
    [wrap-m="reverse"] { flex-wrap: wrap-reverse }

    /* Flex span */
    :where(x-flex,[x-flex]) > [span-m] { flex: var(--grid-cs) }
    :where(x-flex,[x-flex]) > [span-m="row"] { flex-basis: 100% }
}

/* ------------------------
  Grid & Flexbox Utilities
------------------------ */
/* Justify CONTENT - F+G */
[jc="start"] { justify-content: start }
[jc="center"] { justify-content: center }
[jc="end"] { justify-content: end }
[jc="stretch"] { justify-content: stretch }
[jc="around"] { justify-content: space-around }
[jc="between"] { justify-content: space-between }
[jc="evenly"] { justify-content: space-evenly }

/* Justify ITEMS */
[ji="start"] { justify-items: start }
[ji="center"] { justify-items: center }
[ji="end"] { justify-items: end }
[ji="stretch"] { justify-items: stretch }

/* Align ITEMS */
[ai="start"] { align-items: start }
[ai="center"] { align-items: center }
[ai="end"] { align-items: end }
[ai="stretch"] { align-items: stretch }

/* Align CONTENT */
[ac="start"] { align-content: start }
[ac="center"] { align-content: center }
[ac="end"] { align-content: end }
[ac="stretch"] { align-content: stretch }
[ac="around"] { align-content: space-around }
[ac="between"] { align-content: space-between }
[ac="evenly"] { align-content: space-evenly }

/* Align SELF */
[as="start"] { align-self: start }
[as="center"] { align-self: center }
[as="end"] { align-self: end }
[as="stretch"] { align-self: stretch }

/* Justify SELF */
[js="start"] { justify-self: start }
[js="center"] { justify-self: center }
[js="end"] { justify-self: end }
[js="stretch"] { justify-self: stretch }

/* Place ITEMS – place-items: align-items justify-items; */
[pi="start"] { place-items: start }
[pi="center"] { place-items: center }
[pi="end"] { place-items: end }
[pi="stretch"] { place-items: stretch }

[pi="start center"] { place-items: start center }
[pi="start end"] { place-items: start end }
[pi="start stretch"] { place-items: start stretch }

[pi="center start"] { place-items: center start }
[pi="center end"] { place-items: center end }
[pi="center stretch"] { place-items: center stretch }

[pi="end start"] { place-items: end start }
[pi="end center"] { place-items: flex-end center }
[pi="end stretch"] { place-items: flex-end stretch }

[pi="stretch start"] { place-items: stretch start }
[pi="stretch center"] { place-items: stretch center }
[pi="stretch end"] { place-items: stretch end }

/* Place CONTENT - place-content: align-content justify-content */
[pc="start"] { place-content: start }
[pc="center"] { place-content: center }
[pc="end"] { place-content: end }
[pc="stretch"] { place-content: stretch }
[pc="around"] { place-content: space-around }
[pc="between"] { place-content: space-between }
[pc="evenly"] { place-content: space-evenly }

[pc="start center"] { place-content: start center }
[pc="start end"] { place-content: start end }
[pc="start stretch"] { place-content: start stretch }
[pc="start around"] { place-content: start space-around }
[pc="start between"] { place-content: start space-between }
[pc="start evenly"] { place-content: start space-evenly }

[pc="center start"] { place-content: center start }
[pc="center end"] { place-content: center end }
[pc="center stretch"] { place-content: center stretch }
[pc="center around"] { place-content: center space-around }
[pc="center between"] { place-content: center space-between }
[pc="center evenly"] { place-content: center space-evenly }

[pc="end start"] { place-content: end start }
[pc="end center"] { place-content: end center }
[pc="end stretch"] { place-content: end stretch }
[pc="end around"] { place-content: end space-around }
[pc="end between"] { place-content: end space-between }
[pc="end evenly"] { place-content: end space-evenly }

[pc="stretch start"] { place-content: stretch start }
[pc="stretch center"] { place-content: stretch center }
[pc="stretch end"] { place-content: stretch end }
[pc="stretch around"] { place-content: stretch space-around }
[pc="stretch between"] { place-content: stretch space-between }
[pc="stretch evenly"] { place-content: stretch space-evenly }

[pc="around start"] { place-content: space-around start }
[pc="around center"] { place-content: space-around center }
[pc="around end"] { place-content: space-around end }
[pc="around stretch"] { place-content: space-around stretch }
[pc="around between"] { place-content: space-around space-between }
[pc="around evenly"] { place-content: space-around space-evenly }

[pc="between start"] { place-content: space-between start }
[pc="between center"] { place-content: space-between center }
[pc="between end"] { place-content: space-between end }
[pc="between stretch"] { place-content: space-between stretch }
[pc="between around"] { place-content: space-between space-around }
[pc="between evenly"] { place-content: space-between space-evenly }

[pc="evenly start"] { place-content: space-evenly start }
[pc="evenly center"] { place-content: space-evenly center }
[pc="evenly end"] { place-content: space-evenly end }
[pc="evenly stretch"] { place-content: space-evenly stretch }
[pc="evenly around"] { place-content: space-evenly space-around }
[pc="evenly between"] { place-content: space-evenly space-between }

/* Place SELF - place-self: align-self justify-self; */
[ps="start"] { place-self: start }
[ps="center"] { place-self: center }
[ps="end"] { place-self: end }
[ps="stretch"] { place-self: stretch }

[ps="start center"] { place-self: start center }
[ps="start end"] { place-self: start end }
[ps="start stretch"] { place-self: start stretch }

[ps="center start"] { place-self: center start }
[ps="center end"] { place-self: center end }
[ps="center stretch"] { place-self: center stretch }

[ps="end start"] { place-self: end start }
[ps="end center"] { place-self: end center }
[ps="end stretch"] { place-self: end stretch }

[ps="stretch start"] { place-self: stretch start }
[ps="stretch center"] { place-self: stretch center }
[ps="stretch end"] { place-self: stretch end }

/* VISUAL ORDER */
[order="first"] { order: -1 }
[order="1"] { order: 1 }
[order="2"] { order: 2 }
[order="3"] { order: 3 }
[order="4"] { order: 4 }
[order="5"] { order: 5 }
[order="6"] { order: 6 }
[order="7"] { order: 7 }
[order="8"] { order: 8 }
[order="9"] { order: 9 }
[order="10"] { order: 10 }
[order="11"] { order: 11 }
[order="12"] { order: 12 }
[order="13"] { order: 13 }
[order="14"] { order: 14 }
[order="15"] { order: 15 }
[order="16"] { order: 16 }
[order="last"] { order: 99 }

/*** [S] for window width <= 777px */
@media (max-width: 777px) {
    /* Justify CONTENT */
    [jc-s="start"] { justify-content: start } 
    [jc-s="center"] { justify-content: center }
    [jc-s="end"] { justify-content: end } 
    [jc-s="stretch"] { justify-content: stretch }
    [jc-s="around"] { justify-content: space-around }
    [jc-s="between"] { justify-content: space-between }
    [jc-s="evenly"] { justify-content: space-evenly }

    /* Justify ITEMS */
    [ji-s="start"] { justify-items: start }
    [ji-s="center"] { justify-items: center }
    [ji-s="end"] { justify-items: end }
    [ji-s="stretch"] { justify-items: stretch }

    /* Align ITEMS */
    [ai-s="start"] { align-items: start } 
    [ai-s="center"] { align-items: center }
    [ai-s="end"] { align-items: end } 
    [ai-s="stretch"] { align-items: stretch }

    /* Align CONTENT */
    [ac-s="start"] { align-content: start } 
    [ac-s="center"] { align-content: center }
    [ac-s="end"] { align-content: end } 
    [ac-s="stretch"] { align-content: stretch }
    [ac-s="around"] { align-content: space-around }
    [ac-s="between"] { align-content: space-between }
    [ac-s="evenly"] { align-content: space-evenly }

    /* Align SELF */
    [as-s="start"] { align-self: start } 
    [as-s="center"] { align-self: center }
    [as-s="end"] { align-self: end } 
    [as-s="stretch"] { align-self: stretch }

    /* Justify SELF */
    [js-s="start"] { justify-self: start }
    [js-s="center"] { justify-self: center }
    [js-s="end"] { justify-self: end }
    [js-s="stretch"] { justify-self: stretch }

    /* Place ITEMS – place-items: align-items justify-items; */
    [pi-s="start"] { place-items: start }
    [pi-s="center"] { place-items: center }
    [pi-s="end"] { place-items: end }
    [pi-s="stretch"] { place-items: stretch }

    [pi-s="start center"] { place-items: start center }
    [pi-s="start end"] { place-items: start end }
    [pi-s="start stretch"] { place-items: start stretch }

    [pi-s="center start"] { place-items: center start }
    [pi-s="center end"] { place-items: center end }
    [pi-s="center stretch"] { place-items: center stretch }

    [pi-s="end start"] { place-items: end start }
    [pi-s="end center"] { place-items: end center }
    [pi-s="end stretch"] { place-items: end stretch }

    [pi-s="stretch start"] { place-items: stretch start }
    [pi-s="stretch center"] { place-items: stretch center }
    [pi-s="stretch end"] { place-items: stretch end }

    /* Place CONTENT - place-content: align-content justify-content */
    [pc-s="start"] { place-content: start }
    [pc-s="center"] { place-content: center }
    [pc-s="end"] { place-content: end }
    [pc-s="stretch"] { place-content: stretch }
    [pc-s="around"] { place-content: space-around }
    [pc-s="between"] { place-content: space-between }
    [pc-s="evenly"] { place-content: space-evenly }

    [pc-s="start center"] { place-content: start center }
    [pc-s="start end"] { place-content: start end }
    [pc-s="start stretch"] { place-content: start stretch }
    [pc-s="start around"] { place-content: start space-around }
    [pc-s="start between"] { place-content: start space-between }
    [pc-s="start evenly"] { place-content: start space-evenly }

    [pc-s="center start"] { place-content: center start }
    [pc-s="center end"] { place-content: center end }
    [pc-s="center stretch"] { place-content: center stretch }
    [pc-s="center around"] { place-content: center space-around }
    [pc-s="center between"] { place-content: center space-between }
    [pc-s="center evenly"] { place-content: center space-evenly }

    [pc-s="end start"] { place-content: end start }
    [pc-s="end center"] { place-content: end center }
    [pc-s="end stretch"] { place-content: end stretch }
    [pc-s="end around"] { place-content: end space-around }
    [pc-s="end between"] { place-content: end space-between }
    [pc-s="end evenly"] { place-content: end space-evenly }

    [pc-s="stretch start"] { place-content: stretch start }
    [pc-s="stretch center"] { place-content: stretch center }
    [pc-s="stretch end"] { place-content: stretch end }
    [pc-s="stretch around"] { place-content: stretch space-around }
    [pc-s="stretch between"] { place-content: stretch space-between }
    [pc-s="stretch evenly"] { place-content: stretch space-evenly }

    [pc-s="around start"] { place-content: space-around start }
    [pc-s="around center"] { place-content: space-around center }
    [pc-s="around end"] { place-content: space-around end }
    [pc-s="around stretch"] { place-content: space-around stretch }
    [pc-s="around between"] { place-content: space-around space-between }
    [pc-s="around evenly"] { place-content: space-around space-evenly }

    [pc-s="between start"] { place-content: space-between start }
    [pc-s="between center"] { place-content: space-between center }
    [pc-s="between end"] { place-content: space-between end }
    [pc-s="between stretch"] { place-content: space-between stretch }
    [pc-s="between around"] { place-content: space-between space-around }
    [pc-s="between evenly"] { place-content: space-between space-evenly }

    [pc-s="evenly start"] { place-content: space-evenly start }
    [pc-s="evenly center"] { place-content: space-evenly center }
    [pc-s="evenly end"] { place-content: space-evenly end }
    [pc-s="evenly stretch"] { place-content: space-evenly stretch }
    [pc-s="evenly around"] { place-content: space-evenly space-around }
    [pc-s="evenly between"] { place-content: space-evenly space-between }

    /* Place SELF - place-self: align-self justify-self; */
    [ps-s="start"] { place-self: start }
    [ps-s="center"] { place-self: center }
    [ps-s="end"] { place-self: end }
    [ps-s="stretch"] { place-self: stretch }

    [ps-s="start center"] { place-self: start center }
    [ps-s="start end"] { place-self: start end }
    [ps-s="start stretch"] { place-self: start stretch }

    [ps-s="center start"] { place-self: center start }
    [ps-s="center end"] { place-self: center end }
    [ps-s="center stretch"] { place-self: center stretch }

    [ps-s="end start"] { place-self: end start }
    [ps-s="end center"] { place-self: end center }
    [ps-s="end stretch"] { place-self: end stretch }

    [ps-s="stretch start"] { place-self: stretch start }
    [ps-s="stretch center"] { place-self: stretch center }
    [ps-s="stretch end"] { place-self: stretch end }

    /* VISUAL ORDER */
    [order-s="first"] { order: -1 }
    [order-s="1"] { order: 1 }
    [order-s="2"] { order: 2 }
    [order-s="3"] { order: 3 }
    [order-s="4"] { order: 4 }
    [order-s="5"] { order: 5 }
    [order-s="6"] { order: 6 }
    [order-s="7"] { order: 7 }
    [order-s="8"] { order: 8 }
    [order-s="9"] { order: 9 }
    [order-s="10"] { order: 10 }
    [order-s="11"] { order: 11 }
    [order-s="12"] { order: 12 }
    [order-s="13"] { order: 13 }
    [order-s="14"] { order: 14 }
    [order-s="15"] { order: 15 }
    [order-s="16"] { order: 16 }
    [order-s="last"] { order: 99 }
}

/*** [M] for window width 778px <> 1024px */
@media (min-width: 778px) and (max-width: 1024px) {
    /* Justify CONTENT */
    [jc-m="start"] { justify-content: start } 
    [jc-m="center"] { justify-content: center }
    [jc-m="end"] { justify-content: end } 
    [jc-m="stretch"] { justify-content: stretch }
    [jc-m="around"] { justify-content: space-around }
    [jc-m="between"] { justify-content: space-between }
    [jc-m="evenly"] { justify-content: space-evenly }

    /* Justify ITEMS */
    [ji-m="start"] { justify-items: start }
    [ji-m="center"] { justify-items: center }
    [ji-m="end"] { justify-items: end }
    [ji-m="stretch"] { justify-items: stretch }

    /* Align ITEMS */
    [ai-m="start"] { align-items: start } 
    [ai-m="center"] { align-items: center }
    [ai-m="end"] { align-items: end } 
    [ai-m="stretch"] { align-items: stretch }

    /* Align CONTENT */
    [ac-m="start"] { align-content: start } 
    [ac-m="center"] { align-content: center }
    [ac-m="end"] { align-content: end } 
    [ac-m="stretch"] { align-content: stretch }
    [ac-m="around"] { align-content: space-around }
    [ac-m="between"] { align-content: space-between }
    [ac-m="evenly"] { align-content: space-evenly }

    /* Align SELF */
    [as-m="start"] { align-self: start } 
    [as-m="center"] { align-self: center }
    [as-m="end"] { align-self: end } 
    [as-m="stretch"] { align-self: stretch }

    /* Justify SELF */
    [js-m="start"] { justify-self: start }
    [js-m="center"] { justify-self: center }
    [js-m="end"] { justify-self: end }
    [js-m="stretch"] { justify-self: stretch }

    /* Place ITEMS – place-items: align-items justify-items; */
    [pi-m="start"] { place-items: start }
    [pi-m="center"] { place-items: center }
    [pi-m="end"] { place-items: end }
    [pi-m="stretch"] { place-items: stretch }

    [pi-m="start center"] { place-items: start center }
    [pi-m="start end"] { place-items: start end }
    [pi-m="start stretch"] { place-items: start stretch }

    [pi-m="center start"] { place-items: center start }
    [pi-m="center end"] { place-items: center end }
    [pi-m="center stretch"] { place-items: center stretch }

    [pi-m="end start"] { place-items: end start }
    [pi-m="end center"] { place-items: end center }
    [pi-m="end stretch"] { place-items: end stretch }

    [pi-m="stretch start"] { place-items: stretch start }
    [pi-m="stretch center"] { place-items: stretch center }
    [pi-m="stretch end"] { place-items: stretch end }

    /* Place CONTENT - place-content: align-content justify-content */
    [pc-m="start"] { place-content: start }
    [pc-m="center"] { place-content: center }
    [pc-m="end"] { place-content: end }
    [pc-m="stretch"] { place-content: stretch }
    [pc-m="around"] { place-content: space-around }
    [pc-m="between"] { place-content: space-between }
    [pc-m="evenly"] { place-content: space-evenly }

    [pc-m="start center"] { place-content: start center }
    [pc-m="start end"] { place-content: start end }
    [pc-m="start stretch"] { place-content: start stretch }
    [pc-m="start around"] { place-content: start space-around }
    [pc-m="start between"] { place-content: start space-between }
    [pc-m="start evenly"] { place-content: start space-evenly }

    [pc-m="center start"] { place-content: center start }
    [pc-m="center end"] { place-content: center end }
    [pc-m="center stretch"] { place-content: center stretch }
    [pc-m="center around"] { place-content: center space-around }
    [pc-m="center between"] { place-content: center space-between }
    [pc-m="center evenly"] { place-content: center space-evenly }

    [pc-m="end start"] { place-content: end start }
    [pc-m="end center"] { place-content: end center }
    [pc-m="end stretch"] { place-content: end stretch }
    [pc-m="end around"] { place-content: end space-around }
    [pc-m="end between"] { place-content: end space-between }
    [pc-m="end evenly"] { place-content: end space-evenly }

    [pc-m="stretch start"] { place-content: stretch start }
    [pc-m="stretch center"] { place-content: stretch center }
    [pc-m="stretch end"] { place-content: stretch end }
    [pc-m="stretch around"] { place-content: stretch space-around }
    [pc-m="stretch between"] { place-content: stretch space-between }
    [pc-m="stretch evenly"] { place-content: stretch space-evenly }

    [pc-m="around start"] { place-content: space-around start }
    [pc-m="around center"] { place-content: space-around center }
    [pc-m="around end"] { place-content: space-around end }
    [pc-m="around stretch"] { place-content: space-around stretch }
    [pc-m="around between"] { place-content: space-around space-between }
    [pc-m="around evenly"] { place-content: space-around space-evenly }

    [pc-m="between start"] { place-content: space-between start }
    [pc-m="between center"] { place-content: space-between center }
    [pc-m="between end"] { place-content: space-between end }
    [pc-m="between stretch"] { place-content: space-between stretch }
    [pc-m="between around"] { place-content: space-between space-around }
    [pc-m="between evenly"] { place-content: space-between space-evenly }

    [pc-m="evenly start"] { place-content: space-evenly start }
    [pc-m="evenly center"] { place-content: space-evenly center }
    [pc-m="evenly end"] { place-content: space-evenly end }
    [pc-m="evenly stretch"] { place-content: space-evenly stretch }
    [pc-m="evenly around"] { place-content: space-evenly space-around }
    [pc-m="evenly between"] { place-content: space-evenly space-between }

    /* Place SELF - place-self: align-self justify-self; */
    [ps-m="start"] { place-self: start }
    [ps-m="center"] { place-self: center }
    [ps-m="end"] { place-self: end }
    [ps-m="stretch"] { place-self: stretch }

    [ps-m="start center"] { place-self: start center }
    [ps-m="start end"] { place-self: start end }
    [ps-m="start stretch"] { place-self: start stretch }

    [ps-m="center start"] { place-self: center start }
    [ps-m="center end"] { place-self: center end }
    [ps-m="center stretch"] { place-self: center stretch }

    [ps-m="end start"] { place-self: end start }
    [ps-m="end center"] { place-self: end center }
    [ps-m="end stretch"] { place-self: end stretch }

    [ps-m="stretch start"] { place-self: stretch start }
    [ps-m="stretch center"] { place-self: stretch center }
    [ps-m="stretch end"] { place-self: stretch end }

    /* VISUAL ORDER */
    [order-m="first"] { order: -1 }
    [order-m="1"] { order: 1 }
    [order-m="2"] { order: 2 }
    [order-m="3"] { order: 3 }
    [order-m="4"] { order: 4 }
    [order-m="5"] { order: 5 }
    [order-m="6"] { order: 6 }
    [order-m="7"] { order: 7 }
    [order-m="8"] { order: 8 }
    [order-m="9"] { order: 9 }
    [order-m="10"] { order: 10 }
    [order-m="11"] { order: 11 }
    [order-m="12"] { order: 12 }
    [order-m="13"] { order: 13 }
    [order-m="14"] { order: 14 }
    [order-m="15"] { order: 15 }
    [order-m="16"] { order: 16 }
    [order-m="last"] { order: 99 }
}

/* Debug */
.debug > * { --dc:rgb(248 110 91 / 0.8); background: var(--dc) }
.debug > :nth-child(6n+2){ --dc:rgb(103 126 208 / 0.8) }
.debug > :nth-child(6n+3){ --dc:rgb(224 174 72 / 0.8) }
.debug > :nth-child(6n+4){ --dc:rgb(77 214 115 / 0.8) }
.debug > :nth-child(6n+5){ --dc:rgb(217 103 219 / 0.8) }
.debug > :nth-child(6n+6){ --dc:rgb(94 204 211 / 0.8) }
.debug > :nth-child(6n+7){ --dc:rgb(248 110 91 / 0.8) }
.debug.outline { outline: 1px dashed red }
.debug.outline > * { outline: 1px dashed var(--dc); background: none }

/* ------------------
  utilities
------------------ */
.fullwidth { --buttonWidth: 100%; --inputWidth: 100%; width: 100% }
.fullwidth-max { max-width: 100% }
.fullheight { height: 100% }
.fullheight-max { max-height: 100% }
.full { width: 100%; height: 100% }
.full-max { max-width: 100%; max-height: 100% }

.fitcontent { width: fit-content }
.fitcontent-height { height: fit-content }

.field-sizing { field-sizing: content } /* to be used on: input, textarea, select */
.flow > * + * { margin-top: var(--flow-space, 1em) } /* to be used on: containers w/ <p>s <h>s etc. */

.block { display: block }
.inline { display: inline; margin: 0 }
.inline-block { display: inline-block; margin: 0 }
.center { display: block; text-align: center; margin: 0 auto }
.display-none { display: none }
.overflow { overflow: hidden }
.contents { display: contents }

.text-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.text-start { text-align: start }
.text-center { text-align: center }
.text-end { text-align: end }
.text-justify { text-align: justify }
.text-normal { font-weight: 400 }
.text-bold { font-weight: 600 }
.text-uppercase { text-transform:uppercase }
.text-lowercase { text-transform:lowercase }
.text-capitalize { text-transform:capitalize }
.text-underline { text-decoration: underline }
.text-line-through { text-decoration: line-through }
.text-break-word { overflow-wrap: break-word }
.text-balance { text-wrap: balance }
.text-pretty { text-wrap: pretty }

.sticky { position: sticky; inset-block-start: var(--sticky, 0); z-index: var(--stickyZindex, 1) }
.sticky-bottom { position: sticky; inset-block-end: var(--sticky, 0); z-index: var(--stickyZindex, 1) }
.sticky-none { position: inherit }

@media (max-width: 777px) { 
    .fullwidth-s { --buttonWidth: 100%; --inputWidth: 100%; width: 100% }
    .fullwidth-max-s { max-width: 100% }
    .fullheight-s { height: 100% }
    .fullheight-max-s { max-height: 100% }
    .full-s { width: 100%; height: 100% }
    .full-max-s { max-width: 100%; max-height: 100% }

    .fitcontent-s { width: fit-content }
    .fitcontent-height-s { height: fit-content }

    .block-s { display: block }
    .inline-s { display: inline; margin: 0 }
    .inline-block-s { display: inline-block; margin: 0 }
    .center-s { display: block; text-align: center; margin: 0 auto }
    .display-none-s { display: none }
    .overflow-s { overflow: hidden }
    .contents-s { display: contents }

    .text-clip-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .text-start-s { text-align: start }
    .text-center-s { text-align: center }
    .text-end-s { text-align: end }
    .text-justify-s { text-align: justify }
    .text-normal-s { font-weight: 400 }
    .text-bold-s { font-weight: 600 }
    .text-uppercase-s { text-transform:uppercase }
    .text-lowercase-s { text-transform:lowercase }
    .text-capitalize-s { text-transform:capitalize }
    .text-underline-s { text-decoration: underline }
    .text-line-through-s { text-decoration: line-through }
    .text-break-word-s { overflow-wrap: break-word }
    .text-balance-s { text-wrap: balance }
    .text-pretty-s { text-wrap: pretty }

    .sticky-s { position: sticky; inset-block-start: var(--sticky, 0); z-index: var(--stickyZindex, 1) }
    .sticky-bottom-s { position: sticky; inset-block-end: var(--sticky, 0) }
    .sticky-none-s { position: inherit }
}

@media (min-width: 778px) and (max-width: 1024px) {
    .fullwidth-m { --buttonWidth: 100%; --inputWidth: 100%; width: 100% }
    .fullwidth-max-m { max-width: 100% }
    .fullheight-m { height: 100% }
    .fullheight-max-m { max-height: 100% }
    .full-m { width: 100%; height: 100% }
    .full-max-m { max-width: 100%; max-height: 100% }

    .fitcontent-m { width: fit-content }
    .fitcontent-height-m { height: fit-content }

    .block-m { display: block }
    .inline-m { display: inline; margin: 0 }
    .inline-block-m { display: inline-block; margin: 0 }
    .center-m { display: block; text-align: center; margin: 0 auto }
    .display-none-m { display: none }
    .overflow-m { overflow: hidden }
    .contents-m { display: contents } 

    .text-clip-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .text-start-m { text-align: start }
    .text-center-m { text-align: center }
    .text-end-m { text-align: end }
    .text-justify-m { text-align: justify }
    .text-normal-m { font-weight: 400 }
    .text-bold-m { font-weight: 600 }
    .text-uppercase-m { text-transform:uppercase }
    .text-lowercase-m { text-transform:lowercase }
    .text-capitalize-m { text-transform:capitalize }
    .text-underline-m { text-decoration: underline }
    .text-line-through-m { text-decoration: line-through }
    .text-break-word-m { overflow-wrap: break-word }
    .text-balance-m { text-wrap: balance }
    .text-pretty-m { text-wrap: pretty }

    .sticky-m { position: sticky; inset-block-start: var(--sticky, 0); z-index: var(--stickyZindex, 1) }
    .sticky-bottom-m { position: sticky; inset-block-end: var(--sticky, 0) }
    .sticky-none-m { position: inherit }
}

/* ------------------
  Cubic Beziers
------------------ */
/*
 * examples at: https://easings.net/
*/
:root {
    --easeInSine: cubic-bezier(0.12, 0, 0.39, 0);
    --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
    --easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);

    --easeInQuad: cubic-bezier(0.11, 0, 0.5, 0);
    --easeOutQuad: cubic-bezier(0.5, 1, 0.89, 1);
    --easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1);

    --easeInCubic: cubic-bezier(0.32, 0, 0.67, 0);
    --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1);
    --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);

    --easeInQuart: cubic-bezier(0.5, 0, 0.75, 0);
    --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
    --easeInOutQuart: cubic-bezier(0.76, 0, 0.24, 1);

    --easeInQuint: cubic-bezier(0.64, 0, 0.78, 0);
    --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
    --easeInOutQuint: cubic-bezier(0.83, 0, 0.17, 1);

    --easeInExpo: cubic-bezier(0.7, 0, 0.84, 0);
    --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
    --easeInOutExpo: cubic-bezier(0.87, 0, 0.13, 1);

    --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
    --easeOutCirc: cubic-bezier(0, 0.55, 0.45, 1);
    --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);

    --easeInBack: cubic-bezier(0.36, 0, 0.66, -0.56);
    --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* ------------------
  animations
------------------ */
/**** Keyframes x Animations */
@keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 20%, 0) } 100% { opacity: 1; transform: none } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -20%, 0) } 100% { opacity: 1; transform: none } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(20%, 0, 0) } 100% { opacity: 1; transform: none } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-20%, 0, 0) } 100% { opacity: 1; transform: none } }
@keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes fadeOutDown { from { opacity: 1 } to { opacity: 0; transform: translate3d(0, 100%, 0) } }
@keyframes fadeOutUp { from { opacity: 1 } to { opacity: 0; transform: translate3d(0, -100%, 0) } }
@keyframes flash { from, 50%, to { opacity: 1 } 25%, 75% { opacity: 0 } }
@keyframes loading { from { transform: rotate(0deg) } to { transform: rotate(359deg) } }
@keyframes rollIn  { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } to { opacity: 1; transform: none } }
@keyframes rollOut  { from { opacity: 1 } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } }
@keyframes zoomIn  { from { opacity: 0; transform: scale3d(.3, .3, .3) } to { opacity: 1 } }
@keyframes scaleIn { from { opacity: 0; transform: scale(3) } to { opacity: 1; transform: scale(1) } }

@keyframes pulse  { 
  0% { transform: scale3d(1,1,1) }
  50% { transform: scale3d(1.05,1.05,1.05) }
  100% { transform: scale3d(1,1,1) }
}

@keyframes shake  { 
  0%, 100% { transform: translate3d(0,0,0) }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px,0,0) }
  20%, 40%, 60%, 80% { transform: translate3d(10px,0,0) }
}

@keyframes zoomInDown  { 
  0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190) }
  60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1) }
}

@keyframes bounce  { 
  from, 20%, 53%, 80%, to { --ease: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0, 0, 0) }
  40%, 43% { --ease: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -30px, 0) }
  70% { --ease: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -15px, 0) }
  90% { transform: translate3d(0, -4px, 0) }
}

@keyframes flip  { 
  from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out }
  40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out }
  50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in }
  80% { transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in }
  to { transform: perspective(400px); animation-timing-function: ease-in }
}

@keyframes flipInX  { 
  from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0 }
  40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in }
  60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 }
  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg) }
  to { transform: perspective(400px) }
}

@keyframes flipOutX  { 
  from { transform: perspective(400px) }
  30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1 }
  to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0 }
}

@keyframes flipInY  { 
  from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0 }
  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in }
  60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 }
  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg) }
  to { transform: perspective(400px) }
}

@keyframes flipOutY  { 
  from { transform: perspective(400px) }
  30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1 }
  to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0 }
}

@keyframes wobble {
  from { transform: none }
  15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) }
  30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) }
  45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) }
  60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) }
  75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) }
  to { transform: none }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) }
  0% { opacity: 0; transform: scale3d(.3, .3, .3) }
  20% { transform: scale3d(1.1, 1.1, 1.1) }
  40% { transform: scale3d(.9, .9, .9) }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03) }
  80% { transform: scale3d(.97, .97, .97) }
  to { opacity: 1; transform: scale3d(1, 1, 1) }
}

/*** Accessibility :: Disabling animations if user prefers-reduced-motion */
@media screen and (prefers-reduced-motion: reduce), (update: slow) { *, *::before, *::after, *::backdrop { animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; animation-delay:0.001ms!important; transition-property:none } }