:root {
    --font-inter-black: "Inter Black";
    --font-inter-black-italic: "Inter Black Italic";
    --font-inter-bold: "Inter Bold";
    --font-inter-bold-italic: "Inter Bold Italic";
    --font-inter-extra-bold: "Inter Extra Bold";
    --font-inter-extra-bold-italic: "Inter Extra Bold Italic";
    --font-inter-extra-light: "Inter Extra Light";
    --font-inter-extra-light-italic: "Inter Extra Light Italic";
    --font-inter-light: "Inter Light";
    --font-inter-light-italic: "Inter Light Italic";
    --font-inter-medium: "Inter Medium";
    --font-inter-medium-italic: "Inter Medium Italic";
    --font-inter: "Inter";
    --font-inter-semi-bold: "Inter Semi Bold";
    --font-inter-semi-bold-italic: "Inter Semi Bold Italic";
    --font-inter-thin: "Inter Thin";
    --font-inter-thin-italic: "Inter Thin Italic";
    --fs-h1: clamp(37px, 2.000rem + 2.000vw, 65px);
    --fs-h2: clamp(32px, 1.850rem + 1.650vw, 56px);
    --fs-h3: clamp(27px, 1.550rem + 1.050vw, 44px);
    --fs-h4: clamp(23px, 1.350rem + 0.650vw, 34px);
    --fs-h5: clamp(21px, 1.150rem + 0.450vw, 29px);
    --fs-xl: clamp(19.68px, 1.080rem + 0.300vw, 25.92px);
    --fs-lg: clamp(18.04px, 0.990rem + 0.275vw, 23.76px);
    --fs-md: clamp(16.40px, 0.900rem + 0.250vw, 21.60px);
    --fs-base: clamp(16.20px, 0.810rem + 0.135vw, 19.08px);
    --fs-sm: clamp(14.40px, 0.720rem + 0.120vw, 16.96px);
    --fs-xs: clamp(13.50px, 0.675rem + 0.112vw, 15.90px);
    --fs-xxs: clamp(12.60px, 0.630rem + 0.105vw, 14.84px);
    --fs-micro: clamp(11.70px, 0.585rem + 0.098vw, 13.78px);
    --color-primary: #355cff;
    --color-primary-bg-light: color-mix(in srgb, var(--color-primary) 9%, transparent);
    --color-kicker: color-mix(in srgb, var(--color-primary) 27%, transparent);
    --color-primary-hover: color-mix(in oklch, var(--color-primary), black 12%);
    --color-primary-active: color-mix(in oklch, var(--color-primary), black 22%);
    --color-primary-dark: color-mix(in oklch, var(--color-primary), black 60%);
    --color-muted: color-mix(in oklch, var(--color-primary), gray 65%);
    --color-primary-light: color-mix(in oklch, var(--color-primary), white 40%);
    --color-primary-soft: color-mix(in oklch, var(--color-primary), white 60%);
    --color-layout: color-mix(in oklch, var(--color-primary), white 42%);
    --color-success: color-mix(in oklch, var(--color-primary), green 60%);
    --color-danger: color-mix(in oklch, var(--color-primary), red 88%);
    --color-bg: color-mix(in oklch, var(--color-primary), white 94%);
    --color-text: color-mix(in oklch, var(--color-primary), black 90%);
    --color-line: color-mix(in oklch, var(--color-primary), white 98%);
    --color-white: #ffffff;
    --color-black: #000000;
    --color-border: color-mix(in srgb, var(--color-primary) 16%, var(--color-white));
    --color-transparent: transparent;
    --color-current: currentColor;
    --radius-none: 0;
    --radius-xs: clamp(3px, 0.18vw, 4px);
    --radius-sm: clamp(6px, 0.35vw, 8px);
    --radius-md: clamp(8px, 0.45vw, 10px);
    --radius-lg: clamp(10px, 0.55vw, 12px);
    --radius-xl: clamp(12px, 0.65vw, 14px);
    --radius-2xl: clamp(16px, 0.9vw, 20px);
    --radius-3xl: clamp(20px, 1.1vw, 24px);
    --radius-pill: 999px;
    --radius-round: 50%;
    --radius-inherit: inherit;
    --container-width: 1920px;
    --container-gap: clamp(28px, 3vw, 48px);
    --shadow-soft: 0px 5px 15px color-mix(in srgb, var(--color-black) 35%, transparent);
    --shadow-main: 0 18px 50px color-mix(in srgb, var(--color-text) 10%, transparent);
    --shadow-strong: 0 28px 70px color-mix(in srgb, var(--color-text) 14%, transparent);
    --ak-prof-card-height-preview: clamp(330px, calc(276.92px + 9.231vw), 390px);
    --ak-prof-card-height-list: clamp(270px, calc(243.46px + 4.615vw), 300px);
    --ak-prof-card-pad: 20px;
    --ak-prof-card-pad-final: clamp(15px, calc(9.69px + 0.923vw), 18px);
    --transition-fast: 0.2s ease-out;
    --transition-normal: 0.35s ease-in-out;
}

input[type="checkbox"]{
    --ak-checkbox-color: var(--color-premium, var(--color-primary));
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    display: inline-grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1.5px solid color-mix(in srgb, var(--ak-checkbox-color) 34%, transparent);
    border-radius: 7px;
    background: var(--color-white);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 80%, transparent), 0 8px 18px color-mix(in srgb, var(--ak-checkbox-color) 10%, transparent);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}

input[type="checkbox"]::before,
input[type="checkbox"]::after{
    content: "";
    position: absolute;
    left: 5px;
    top: 11px;
    display: block;
    height: 2.4px;
    width: 0;
    border: 0 !important;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    opacity: 0;
    transform-origin: left center;
    transition: width 0.16s ease, opacity 0.08s ease;
}

input[type="checkbox"]::before{
    transform: rotate(45deg);
}

input[type="checkbox"]::after{
    left: 9px;
    top: 14px;
    transform: rotate(-48deg);
    transition-delay: 0.12s;
}

input[type="checkbox"]:checked{
    border-color: var(--ak-checkbox-color);
    background: var(--ak-checkbox-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ak-checkbox-color) 15%, transparent), 0 12px 22px color-mix(in srgb, var(--ak-checkbox-color) 22%, transparent);
}

input[type="checkbox"]:checked::before{
    width: 6px !important;
    opacity: 1 !important;
}

input[type="checkbox"]:checked::after{
    width: 11px !important;
    opacity: 1 !important;
}

input[type="checkbox"]:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--ak-checkbox-color) 28%, transparent);
    outline-offset: 3px;
}

input[type="checkbox"]:disabled{
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none;
}

