:root { /* 1rem = 10px */
    --xs-3:  4px;
    --xs-2:  6px;
    --xs:    clamp(0.9rem, 1vw,    1.2rem);     /* 9–12px */
    --sm:    clamp(1.2rem, 1.33vw, 1.6rem);     /* 12–16px */
    --nm:    clamp(1.6rem, 1.67vw, 2rem);     /* 16–20px */
    --md:    clamp(1.8rem, 2vw,    2.4rem);     /* 18–24px */
    --lg:    clamp(2.2rem, 2.5vw,  3rem);       /* 22–30px */
    --xl:    clamp(2.6rem, 3vw,    3.6rem);     /* 26–36px */
    --xl-2:  clamp(3rem,   3.67vw, 4.4rem);     /* 30–44px */
    --xl-3:  clamp(3.6rem, 4.5vw,  5.4rem);     /* 36–54px */
    --xl-4:  clamp(4.2rem, 5.33vw, 6.4rem);     /* 42–64px */
    --xl-5:  clamp(4.8rem, 6.33vw, 7.6rem);     /* 48–76px */
    --xl-6:  clamp(5.4rem, 7.33vw, 8.8rem);     /* 54–88px */
    --xl-7:  clamp(6rem,   8.33vw, 10rem);      /* 60–100px */
}


* { box-sizing: border-box; }
img { max-width: 100%; width: auto; height: auto; display: block; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
html { font-size: 10px; }
body { display: flex; flex-direction: column; }
a { text-decoration: none; }
p { margin-top: 1em; margin-bottom: 1em; }
li { margin-bottom: 1em; }

.page { flex-grow: 1; }

.block { display: block; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.clear { clear: both; }
.underline { text-decoration: underline; }
.italic { font-style: italic; }
.italic { word-wrap: no; }
.wrap-break-word { word-wrap: break-word; }
.no-wrap { white-space: nowrap; }
.hidden { display: none; }
.overflow-hidden { overflow: hidden; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

.black { font-weight: 900; }
.extrabold { font-weight: 800; }
.bold { font-weight: 700; }
.strong { font-weight: 600; }
.medium { font-weight: 500; }
.normal { font-weight: 400; }
.light { font-weight: 300; }

.text-sm { font-size: var(--sm); line-height: 1.6; }
.text-nm { font-size: var(--nm); line-height: 1.6; }
.text-md { font-size: var(--md); line-height: 1.6; }
.text-lg { font-size: var(--lg); line-height: 1.4; }
.text-xl { font-size: var(--xl); line-height: 1.4; }
.text-2xl { font-size: var(--xl-2); line-height: 1.4; }
.text-3xl { font-size: var(--xl-3); line-height: 1.4; }

.leading-1 { line-height: 1; }
.leading-1-4 { line-height: 1.4; }
.leading-1-6 { line-height: 1.6; }

.rounded-3xs { border-radius: var(--xs-3); }
.rounded-2xs { border-radius: var(--xs-2); }
.rounded-xs  { border-radius: var(--xs); }
.rounded-sm  { border-radius: var(--sm); }
.rounded-nm  { border-radius: var(--nm); }
.rounded-md  { border-radius: var(--md); }
.rounded-lg  { border-radius: var(--lg); }
.rounded-xl  { border-radius: var(--xl); }
.rounded-2xl { border-radius: var(--xl-2); }
.rounded-3xl { border-radius: var(--xl-3); }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.grow-1 { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between;}
.justify-around { justify-content: space-around;}
.justify-end { justify-content: flex-end; }

.gap-0   { gap: 0; }
.gap-3xs { gap: var(--xs-3); }
.gap-2xs { gap: var(--xs-2); }
.gap-xs  { gap: var(--xs); }
.gap-sm  { gap: var(--sm); }
.gap-nm  { gap: var(--nm); }
.gap-md  { gap: var(--md); }
.gap-lg  { gap: var(--lg); }
.gap-xl  { gap: var(--xl); }
.gap-2xl { gap: var(--xl-2); }
.gap-3xl { gap: var(--xl-3); }

/* Margins */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.m-0   { margin: 0; }
.m-3xs { margin: var(--xs-3); }
.m-2xs { margin: var(--xs-2); }
.m-xs  { margin: var(--xs); }
.m-sm  { margin: var(--sm); }
.m-nm  { margin: var(--nm); }
.m-md  { margin: var(--md); }
.m-lg  { margin: var(--lg); }
.m-xl  { margin: var(--xl); }
.m-2xl { margin: var(--xl-2); }
.m-3xl { margin: var(--xl-3); }

.mx-0   { margin-left: 0;  margin-right: 0; }
.mx-3xs { margin-left: var(--xs-3); margin-right: var(--xs-3); }
.mx-2xs { margin-left: var(--xs-2); margin-right: var(--xs-2); }
.mx-xs  { margin-left: var(--xs); margin-right: var(--xs); }
.mx-sm  { margin-left: var(--sm); margin-right: var(--sm); }
.mx-md  { margin-left: var(--md); margin-right: var(--md); }
.mx-nm  { margin-left: var(--nm); margin-right: var(--nm); }
.mx-lg  { margin-left: var(--lg); margin-right: var(--lg); }
.mx-xl  { margin-left: var(--xl); margin-right: var(--xl); }
.mx-2xl { margin-left: var(--xl-2); margin-right: var(--xl-2); }
.mx-3xl { margin-left: var(--xl-3); margin-right: var(--xl-3); }

.my-0   { margin-top: 0;  margin-bottom: 0; }
.my-3xs { margin-top: var(--xs-3); margin-bottom: var(--xs-3); }
.my-2xs { margin-top: var(--xs-2); margin-bottom: var(--xs-2); }
.my-xs  { margin-top: var(--xs); margin-bottom: var(--xs); }
.my-sm  { margin-top: var(--sm); margin-bottom: var(--sm); }
.my-md  { margin-top: var(--md); margin-bottom: var(--md); }
.my-nm  { margin-top: var(--nm); margin-bottom: var(--nm); }
.my-lg  { margin-top: var(--lg); margin-bottom: var(--lg); }
.my-xl  { margin-top: var(--xl); margin-bottom: var(--xl); }
.my-2xl { margin-top: var(--xl-2); margin-bottom: var(--xl-2); }
.my-3xl { margin-top: var(--xl-3); margin-bottom: var(--xl-3); }

.mt-0   { margin-top: 0; }
.mt-3xs { margin-top: var(--xs-3); }
.mt-2xs { margin-top: var(--xs-2); }
.mt-xs  { margin-top: var(--xs); }
.mt-sm  { margin-top: var(--sm); }
.mt-md  { margin-top: var(--md); }
.mt-nm  { margin-top: var(--nm); }
.mt-lg  { margin-top: var(--lg); }
.mt-xl  { margin-top: var(--xl); }
.mt-2xl { margin-top: var(--xl-2); }
.mt-3xl { margin-top: var(--xl-3); }

.mb-0   { margin-bottom: 0; }
.mb-3xs { margin-bottom: var(--xs-3); }
.mb-2xs { margin-bottom: var(--xs-2); }
.mb-xs  { margin-bottom: var(--xs); }
.mb-sm  { margin-bottom: var(--sm); }
.mb-md  { margin-bottom: var(--md); }
.mb-nm  { margin-bottom: var(--nm); }
.mb-lg  { margin-bottom: var(--lg); }
.mb-xl  { margin-bottom: var(--xl); }
.mb-2xl { margin-bottom: var(--xl-2); }
.mb-3xl { margin-bottom: var(--xl-3); }

.ml-0   { margin-left: 0; }
.ml-3xs { margin-left: var(--xs-3); }
.ml-2xs { margin-left: var(--xs-2); }
.ml-xs  { margin-left: var(--xs); }
.ml-sm  { margin-left: var(--sm); }
.ml-md  { margin-left: var(--md); }
.ml-nm  { margin-left: var(--nm); }
.ml-lg  { margin-left: var(--lg); }
.ml-xl  { margin-left: var(--xl); }
.ml-2xl { margin-left: var(--xl-2); }
.ml-3xl { margin-left: var(--xl-3); }

.mr-0   { margin-right: 0; }
.mr-3xs { margin-right: var(--xs-3); }
.mr-2xs { margin-right: var(--xs-2); }
.mr-xs  { margin-right: var(--xs); }
.mr-sm  { margin-right: var(--sm); }
.mr-md  { margin-right: var(--md); }
.mr-nm  { margin-right: var(--nm); }
.mr-lg  { margin-right: var(--lg); }
.mr-xl  { margin-right: var(--xl); }
.mr-2xl { margin-right: var(--xl-2); }
.mr-3xl { margin-right: var(--xl-3); }

/* Paddings */
.p-0   { padding: 0; }
.p-3xs { padding: var(--xs-3); }
.p-2xs { padding: var(--xs-2); }
.p-xs  { padding: var(--xs); }
.p-sm  { padding: var(--sm); }
.p-md  { padding: var(--md); }
.p-nm  { padding: var(--nm); }
.p-lg  { padding: var(--lg); }
.p-xl  { padding: var(--xl); }
.p-2xl { padding: var(--xl-2); }
.p-3xl { padding: var(--xl-3); }

.px-0   { padding-left: 0;  padding-right: 0; }
.px-3xs { padding-left: var(--xs-3); padding-right: var(--xs-3); }
.px-2xs { padding-left: var(--xs-2); padding-right: var(--xs-2); }
.px-xs  { padding-left: var(--xs); padding-right: var(--xs); }
.px-sm  { padding-left: var(--sm); padding-right: var(--sm); }
.px-md  { padding-left: var(--md); padding-right: var(--md); }
.px-nm  { padding-left: var(--nm); padding-right: var(--nm); }
.px-lg  { padding-left: var(--lg); padding-right: var(--lg); }
.px-xl  { padding-left: var(--xl); padding-right: var(--xl); }
.px-2xl { padding-left: var(--xl-2); padding-right: var(--xl-2); }
.px-3xl { padding-left: var(--xl-3); padding-right: var(--xl-3); }

.py-0   { padding-top: 0;  padding-bottom: 0; }
.py-3xs { padding-top: var(--xs-3); padding-bottom: var(--xs-3); }
.py-2xs { padding-top: var(--xs-2); padding-bottom: var(--xs-2); }
.py-xs  { padding-top: var(--xs); padding-bottom: var(--xs); }
.py-sm  { padding-top: var(--sm); padding-bottom: var(--sm); }
.py-md  { padding-top: var(--md); padding-bottom: var(--md); }
.py-nm  { padding-top: var(--nm); padding-bottom: var(--nm); }
.py-lg  { padding-top: var(--lg); padding-bottom: var(--lg); }
.py-xl  { padding-top: var(--xl); padding-bottom: var(--xl); }
.py-2xl { padding-top: var(--xl-2); padding-bottom: var(--xl-2); }
.py-3xl { padding-top: var(--xl-3); padding-bottom: var(--xl-3); }

.pt-0   { padding-top: 0; }
.pt-3xs { padding-top: var(--xs-3); }
.pt-2xs { padding-top: var(--xs-2); }
.pt-xs  { padding-top: var(--xs); }
.pt-sm  { padding-top: var(--sm); }
.pt-md  { padding-top: var(--md); }
.pt-nm  { padding-top: var(--nm); }
.pt-lg  { padding-top: var(--lg); }
.pt-xl  { padding-top: var(--xl); }
.pt-2xl { padding-top: var(--xl-2); }
.pt-3xl { padding-top: var(--xl-3); }

.pb-0   { padding-bottom: 0; }
.pb-3xs { padding-bottom: var(--xs-3); }
.pb-2xs { padding-bottom: var(--xs-2); }
.pb-xs  { padding-bottom: var(--xs); }
.pb-sm  { padding-bottom: var(--sm); }
.pb-md  { padding-bottom: var(--md); }
.pb-nm  { padding-bottom: var(--nm); }
.pb-lg  { padding-bottom: var(--lg); }
.pb-xl  { padding-bottom: var(--xl); }
.pb-2xl { padding-bottom: var(--xl-2); }
.pb-3xl { padding-bottom: var(--xl-3); }

.pl-0   { padding-left: 0; }
.pl-3xs { padding-left: var(--xs-3); }
.pl-2xs { padding-left: var(--xs-2); }
.pl-xs  { padding-left: var(--xs); }
.pl-sm  { padding-left: var(--sm); }
.pl-md  { padding-left: var(--md); }
.pl-nm  { padding-left: var(--nm); }
.pl-lg  { padding-left: var(--lg); }
.pl-xl  { padding-left: var(--xl); }
.pl-2xl { padding-left: var(--xl-2); }
.pl-3xl { padding-left: var(--xl-3); }

.pr-0   { padding-right: 0; }
.pr-3xs { padding-right: var(--xs-3); }
.pr-2xs { padding-right: var(--xs-2); }
.pr-xs  { padding-right: var(--xs); }
.pr-sm  { padding-right: var(--sm); }
.pr-md  { padding-right: var(--md); }
.pr-nm  { padding-right: var(--nm); }
.pr-lg  { padding-right: var(--lg); }
.pr-xl  { padding-right: var(--xl); }
.pr-2xl { padding-right: var(--xl-2); }
.pr-3xl { padding-right: var(--xl-3); }

.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.no-event { pointer-events: none; }
.cursor-pointer { cursor: pointer; }

.show-sm, .show-md, .show-lg, .show-xl, .show-2xl { display: none; }

@media (max-width: 640px) {
    .hide-sm { display: none; }
    .show-sm { display: block; }
}

@media (max-width: 768px) {
    .hide-md { display: none; }
    .show-md { display: block; }
}

@media (max-width: 1024px) {
    .hide-lg { display: none; }
    .show-lg { display: block; }
}

@media (max-width: 1280px) {
    .hide-xl { display: none; }
    .show-xl { display: block; }
}

@media (max-width: 1536px) {
    .hide-2xl { display: none; }
    .show-2xl { display: block; }
}