.badge_of_the_day_overlay span.botd_badge_id_3368 {
    display: block
}

.badge_blocks.badge_id_3368 {
    display: block
}

.premium_icon {
    cursor: pointer
}


:root {
    --k-blur-xs: 1.5px;
    --k-blur-sm: 4px;
    --k-blur-md: 8px;
    --k-blur-lg: 12px;
    --k-blur-xl: 20px;
    --k-blur-xxl: 40px;
    --k-blur-xxxl: 60px;
    --k-breakpoint-sm: 40rem;
    --k-breakpoint-md: 45rem;
    --k-breakpoint-lg: 64rem;
    --k-breakpoint-xl: 80rem;
    --k-breakpoint-xxl: 90rem;
    --k-color-sheer-black-10: rgba(0 0 0/1%);
    --k-color-sheer-black-50: rgba(0 0 0/5%);
    --k-color-sheer-black-100: rgba(0, 0, 0, .1);
    --k-color-sheer-black-200: rgba(0, 0, 0, .2);
    --k-color-sheer-black-300: rgba(0, 0, 0, .3);
    --k-color-sheer-black-400: rgba(0, 0, 0, .4);
    --k-color-sheer-black-500: rgba(0, 0, 0, .5);
    --k-color-sheer-black-600: rgba(0, 0, 0, .6);
    --k-color-sheer-black-700: rgba(0, 0, 0, .7);
    --k-color-sheer-black-800: rgba(0, 0, 0, .8);
    --k-color-sheer-black-900: rgba(0, 0, 0, .9);
    --k-color-sheer-black-950: rgba(0 0 0/95%);
    --k-color-sheer-cool-black-10: rgba(13 18 28/1%);
    --k-color-sheer-cool-black-50: rgba(13 18 28/5%);
    --k-color-sheer-cool-black-100: rgba(13, 18, 28, .1);
    --k-color-sheer-cool-black-200: rgba(13, 18, 28, .2);
    --k-color-sheer-cool-black-300: rgba(13, 18, 28, .3);
    --k-color-sheer-cool-black-400: rgba(13, 18, 28, .4);
    --k-color-sheer-cool-black-500: rgba(13, 18, 28, .5);
    --k-color-sheer-cool-black-600: rgba(13, 18, 28, .6);
    --k-color-sheer-cool-black-700: rgba(13, 18, 28, .7);
    --k-color-sheer-cool-black-800: rgba(13, 18, 28, .8);
    --k-color-sheer-cool-black-900: rgba(13, 18, 28, .9);
    --k-color-sheer-cool-black-950: rgba(13 18 28/95%);
    --k-color-sheer-primary-10: rgba(240 68 56/1%);
    --k-color-sheer-primary-50: rgba(240 68 56/5%);
    --k-color-sheer-primary-100: rgba(240, 68, 56, .1);
    --k-color-sheer-primary-200: rgba(240, 68, 56, .2);
    --k-color-sheer-primary-300: rgba(240, 68, 56, .3);
    --k-color-sheer-primary-400: rgba(240, 68, 56, .4);
    --k-color-sheer-primary-500: rgba(240, 68, 56, .5);
    --k-color-sheer-primary-600: rgba(240, 68, 56, .6);
    --k-color-sheer-primary-700: rgba(240, 68, 56, .7);
    --k-color-sheer-primary-800: rgba(240, 68, 56, .8);
    --k-color-sheer-primary-900: rgba(240, 68, 56, .9);
    --k-color-sheer-primary-950: rgba(240 68 56/95%);
    --k-color-sheer-white-10: hsla(0, 0%, 100%, .01);
    --k-color-sheer-white-50: hsla(0, 0%, 100%, .05);
    --k-color-sheer-white-100: hsla(0, 0%, 100%, .1);
    --k-color-sheer-white-200: hsla(0, 0%, 100%, .2);
    --k-color-sheer-white-300: hsla(0, 0%, 100%, .3);
    --k-color-sheer-white-400: hsla(0, 0%, 100%, .4);
    --k-color-sheer-white-500: hsla(0, 0%, 100%, .5);
    --k-color-sheer-white-600: hsla(0, 0%, 100%, .6);
    --k-color-sheer-white-700: hsla(0, 0%, 100%, .7);
    --k-color-sheer-white-800: hsla(0, 0%, 100%, .8);
    --k-color-sheer-white-900: hsla(0, 0%, 100%, .9);
    --k-color-sheer-white-950: hsla(0, 0%, 100%, .95);
    --k-color-black-12: rgb(0 0 0/12%);
    --k-color-black-20: rgb(0 0 0/20%);
    --k-color-black-6: rgb(0 0 0/6%);
    --k-color-black: #000;
    --k-color-blue-25: #f5faff;
    --k-color-blue-50: #eff8ff;
    --k-color-blue-100: #d1e9ff;
    --k-color-blue-200: #b2ddff;
    --k-color-blue-300: #84caff;
    --k-color-blue-400: #53b1fd;
    --k-color-blue-500: #2e90fa;
    --k-color-blue-600: #1570ef;
    --k-color-blue-700: #175cd3;
    --k-color-blue-800: #1849a9;
    --k-color-blue-900: #194185;
    --k-color-blue-dark-25: #f5f8ff;
    --k-color-blue-dark-50: #eff4ff;
    --k-color-blue-dark-100: #d1e0ff;
    --k-color-blue-dark-200: #b2ccff;
    --k-color-blue-dark-300: #84adff;
    --k-color-blue-dark-400: #528bff;
    --k-color-blue-dark-500: #2970ff;
    --k-color-blue-dark-600: #155eef;
    --k-color-blue-dark-700: #004eeb;
    --k-color-blue-dark-800: #0040c1;
    --k-color-blue-dark-900: #00359e;
    --k-color-blue-light-25: #f5fbff;
    --k-color-blue-light-50: #f0f9ff;
    --k-color-blue-light-100: #e0f2fe;
    --k-color-blue-light-200: #b9e6fe;
    --k-color-blue-light-300: #7cd4fd;
    --k-color-blue-light-400: #36bffa;
    --k-color-blue-light-500: #0ba5ec;
    --k-color-blue-light-600: #0086c9;
    --k-color-blue-light-700: #026aa2;
    --k-color-blue-light-800: #065986;
    --k-color-blue-light-900: #0b4a6f;
    --k-color-cyan-25: #f5feff;
    --k-color-cyan-50: #ecfdff;
    --k-color-cyan-100: #cff9fe;
    --k-color-cyan-200: #a5f0fc;
    --k-color-cyan-300: #67e3f9;
    --k-color-cyan-400: #2ce;
    --k-color-cyan-500: #06aed4;
    --k-color-cyan-600: #088ab2;
    --k-color-cyan-700: #0e7090;
    --k-color-cyan-800: #155b75;
    --k-color-cyan-900: #164c63;
    --k-color-error-25: #fffbfa;
    --k-color-error-50: #fef3f2;
    --k-color-error-100: #fee4e2;
    --k-color-error-200: #fecdca;
    --k-color-error-300: #fda29b;
    --k-color-error-400: #f97066;
    --k-color-error-500: #f04438;
    --k-color-error-600: #d92d20;
    --k-color-error-700: #b42318;
    --k-color-error-800: #912018;
    --k-color-error-900: #7a271a;
    --k-color-fuchsia-25: #fefaff;
    --k-color-fuchsia-50: #fdf4ff;
    --k-color-fuchsia-100: #fbe8ff;
    --k-color-fuchsia-200: #f6d0fe;
    --k-color-fuchsia-300: #eeaafd;
    --k-color-fuchsia-400: #e478fa;
    --k-color-fuchsia-500: #d444f1;
    --k-color-fuchsia-600: #ba24d5;
    --k-color-fuchsia-700: #9f1ab1;
    --k-color-fuchsia-800: #821890;
    --k-color-fuchsia-900: #6f1877;
    --k-color-gray-25: #fcfcfd;
    --k-color-gray-50: #f8fafc;
    --k-color-gray-100: #eef2f6;
    --k-color-gray-200: #e3e8ef;
    --k-color-gray-300: #cdd5df;
    --k-color-gray-400: #9aa4b2;
    --k-color-gray-500: #697586;
    --k-color-gray-600: #4b5565;
    --k-color-gray-700: #364152;
    --k-color-gray-800: #202939;
    --k-color-gray-900: #121926;
    --k-color-gray-base-25: #fcfcfd;
    --k-color-gray-base-50: #f9fafb;
    --k-color-gray-base-100: #f2f4f7;
    --k-color-gray-base-200: #eaecf0;
    --k-color-gray-base-300: #d0d5dd;
    --k-color-gray-base-400: #98a2b3;
    --k-color-gray-base-500: #667085;
    --k-color-gray-base-600: #475467;
    --k-color-gray-base-700: #344054;
    --k-color-gray-base-800: #1d2939;
    --k-color-gray-base-900: #101828;
    --k-color-gray-blue-25: #fcfcfd;
    --k-color-gray-blue-50: #f8f9fc;
    --k-color-gray-blue-100: #eaecf5;
    --k-color-gray-blue-200: #d5d9eb;
    --k-color-gray-blue-300: #b3b8db;
    --k-color-gray-blue-400: #717bbc;
    --k-color-gray-blue-500: #4e5ba6;
    --k-color-gray-blue-600: #3e4784;
    --k-color-gray-blue-700: #363f72;
    --k-color-gray-blue-800: #293056;
    --k-color-gray-blue-900: #101323;
    --k-color-gray-cool-25: #fcfcfd;
    --k-color-gray-cool-50: #f9f9fb;
    --k-color-gray-cool-100: #eff1f5;
    --k-color-gray-cool-200: #dcdfea;
    --k-color-gray-cool-300: #b9c0d4;
    --k-color-gray-cool-400: #7d89b0;
    --k-color-gray-cool-500: #5d6b98;
    --k-color-gray-cool-600: #4a5578;
    --k-color-gray-cool-700: #404968;
    --k-color-gray-cool-800: #30374f;
    --k-color-gray-cool-900: #111322;
    --k-color-gray-iron-25: #fcfcfc;
    --k-color-gray-iron-50: #fafafa;
    --k-color-gray-iron-100: #f4f4f5;
    --k-color-gray-iron-200: #e4e4e7;
    --k-color-gray-iron-300: #d1d1d6;
    --k-color-gray-iron-400: #a0a0ab;
    --k-color-gray-iron-500: #70707b;
    --k-color-gray-iron-600: #51525c;
    --k-color-gray-iron-700: #3f3f46;
    --k-color-gray-iron-800: #26272b;
    --k-color-gray-iron-900: #18181b;
    --k-color-gray-modern-25: #fcfcfd;
    --k-color-gray-modern-50: #f8fafc;
    --k-color-gray-modern-100: #eef2f6;
    --k-color-gray-modern-200: #e3e8ef;
    --k-color-gray-modern-300: #cdd5df;
    --k-color-gray-modern-400: #9aa4b2;
    --k-color-gray-modern-500: #697586;
    --k-color-gray-modern-600: #4b5565;
    --k-color-gray-modern-700: #364152;
    --k-color-gray-modern-800: #202939;
    --k-color-gray-modern-900: #121926;
    --k-color-gray-neutral-25: #fcfcfd;
    --k-color-gray-neutral-50: #f9fafb;
    --k-color-gray-neutral-100: #f3f4f6;
    --k-color-gray-neutral-200: #e5e7eb;
    --k-color-gray-neutral-300: #d2d6db;
    --k-color-gray-neutral-400: #9da4ae;
    --k-color-gray-neutral-500: #6c737f;
    --k-color-gray-neutral-600: #4d5761;
    --k-color-gray-neutral-700: #384250;
    --k-color-gray-neutral-800: #1f2a37;
    --k-color-gray-neutral-900: #111927;
    --k-color-gray-true-25: #fcfcfc;
    --k-color-gray-true-50: #fafafa;
    --k-color-gray-true-100: #f5f5f5;
    --k-color-gray-true-200: #e5e5e5;
    --k-color-gray-true-300: #d6d6d6;
    --k-color-gray-true-400: #a3a3a3;
    --k-color-gray-true-500: #737373;
    --k-color-gray-true-600: #525252;
    --k-color-gray-true-700: #424242;
    --k-color-gray-true-800: #292929;
    --k-color-gray-true-900: #141414;
    --k-color-gray-warm-25: #fdfdfc;
    --k-color-gray-warm-50: #fafaf9;
    --k-color-gray-warm-100: #f5f5f4;
    --k-color-gray-warm-200: #e7e5e4;
    --k-color-gray-warm-300: #d7d3d0;
    --k-color-gray-warm-400: #a9a29d;
    --k-color-gray-warm-500: #79716b;
    --k-color-gray-warm-600: #57534e;
    --k-color-gray-warm-700: #44403c;
    --k-color-gray-warm-800: #292524;
    --k-color-gray-warm-900: #1c1917;
    --k-color-green-25: #f6fef9;
    --k-color-green-50: #edfcf2;
    --k-color-green-100: #d3f8df;
    --k-color-green-200: #aaf0c4;
    --k-color-green-300: #73e2a3;
    --k-color-green-400: #3ccb7f;
    --k-color-green-500: #16b364;
    --k-color-green-600: #099250;
    --k-color-green-700: #087443;
    --k-color-green-800: #095c37;
    --k-color-green-900: #084c2e;
    --k-color-green-light-25: #fafef5;
    --k-color-green-light-50: #f3fee7;
    --k-color-green-light-100: #e3fbcc;
    --k-color-green-light-200: #d0f8ab;
    --k-color-green-light-300: #a6ef67;
    --k-color-green-light-400: #85e13a;
    --k-color-green-light-500: #66c61c;
    --k-color-green-light-600: #4ca30d;
    --k-color-green-light-700: #3b7c0f;
    --k-color-green-light-800: #326212;
    --k-color-green-light-900: #2b5314;
    --k-color-indigo-25: #f5f8ff;
    --k-color-indigo-50: #eef4ff;
    --k-color-indigo-100: #e0eaff;
    --k-color-indigo-200: #c7d7fe;
    --k-color-indigo-300: #a4bcfd;
    --k-color-indigo-400: #8098f9;
    --k-color-indigo-500: #6172f3;
    --k-color-indigo-600: #444ce7;
    --k-color-indigo-700: #3538cd;
    --k-color-indigo-800: #2d31a6;
    --k-color-indigo-900: #2d3282;
    --k-color-kong-12: rgb(240 68 56/12%);
    --k-color-kong-20: rgb(240 68 56/16%);
    --k-color-kong-40: rgb(240 68 56/40%);
    --k-color-kong: #f04438;
    --k-color-moss-25: #fafdf7;
    --k-color-moss-50: #f5fbee;
    --k-color-moss-100: #e6f4d7;
    --k-color-moss-200: #ceeab0;
    --k-color-moss-300: #acdc79;
    --k-color-moss-400: #86cb3c;
    --k-color-moss-500: #669f2a;
    --k-color-moss-600: #4f7a21;
    --k-color-moss-700: #3f621a;
    --k-color-moss-800: #335015;
    --k-color-moss-900: #2b4212;
    --k-color-orange-25: #fefaf5;
    --k-color-orange-50: #fef6ee;
    --k-color-orange-100: #fdead7;
    --k-color-orange-200: #f9dbaf;
    --k-color-orange-300: #f7b27a;
    --k-color-orange-400: #f38744;
    --k-color-orange-500: #ef6820;
    --k-color-orange-600: #e04f16;
    --k-color-orange-700: #b93815;
    --k-color-orange-800: #932f19;
    --k-color-orange-900: #772917;
    --k-color-orange-dark-25: #fff9f5;
    --k-color-orange-dark-50: #fff4ed;
    --k-color-orange-dark-100: #ffe6d5;
    --k-color-orange-dark-200: #ffd6ae;
    --k-color-orange-dark-300: #ff9c66;
    --k-color-orange-dark-400: #ff692e;
    --k-color-orange-dark-500: #ff4405;
    --k-color-orange-dark-600: #e62e05;
    --k-color-orange-dark-700: #bc1b06;
    --k-color-orange-dark-800: #97180c;
    --k-color-orange-dark-900: #771a0d;
    --k-color-pink-25: #fef6fb;
    --k-color-pink-50: #fdf2fa;
    --k-color-pink-100: #fce7f6;
    --k-color-pink-200: #fcceee;
    --k-color-pink-300: #faa7e0;
    --k-color-pink-400: #f670c7;
    --k-color-pink-500: #ee46bc;
    --k-color-pink-600: #dd2590;
    --k-color-pink-700: #c11574;
    --k-color-pink-800: #9e165f;
    --k-color-pink-900: #851651;
    --k-color-purple-25: #fafaff;
    --k-color-purple-50: #f4f3ff;
    --k-color-purple-100: #ebe9fe;
    --k-color-purple-200: #d9d6fe;
    --k-color-purple-300: #bdb4fe;
    --k-color-purple-400: #9b8afb;
    --k-color-purple-500: #7a5af8;
    --k-color-purple-600: #6938ef;
    --k-color-purple-700: #5925dc;
    --k-color-purple-800: #4a1fb8;
    --k-color-purple-900: #3e1c96;
    --k-color-rose-25: #fff5f6;
    --k-color-rose-50: #fff1f3;
    --k-color-rose-100: #ffe4e8;
    --k-color-rose-200: #fecdd6;
    --k-color-rose-300: #fea3b4;
    --k-color-rose-400: #fd6f8e;
    --k-color-rose-500: #f63d68;
    --k-color-rose-600: #e31b54;
    --k-color-rose-700: #c01048;
    --k-color-rose-800: #a11043;
    --k-color-rose-900: #89123e;
    --k-color-success-25: #f6fef9;
    --k-color-success-50: #ecfdf3;
    --k-color-success-100: #d1fadf;
    --k-color-success-200: #a6f4c5;
    --k-color-success-300: #6ce9a6;
    --k-color-success-400: #32d583;
    --k-color-success-500: #12b76a;
    --k-color-success-600: #039855;
    --k-color-success-700: #027a48;
    --k-color-success-800: #05603a;
    --k-color-success-900: #054f31;
    --k-color-teal-25: #f6fefc;
    --k-color-teal-50: #f0fdf9;
    --k-color-teal-100: #ccfbef;
    --k-color-teal-200: #99f6e0;
    --k-color-teal-300: #5fe9d0;
    --k-color-teal-400: #2ed3b7;
    --k-color-teal-500: #15b79e;
    --k-color-teal-600: #0e9384;
    --k-color-teal-700: #107569;
    --k-color-teal-800: #125d56;
    --k-color-teal-900: #134e48;
    --k-color-violet-25: #fbfaff;
    --k-color-violet-50: #f5f3ff;
    --k-color-violet-100: #ece9fe;
    --k-color-violet-200: #ddd6fe;
    --k-color-violet-300: #c3b5fd;
    --k-color-violet-400: #a48afb;
    --k-color-violet-500: #875bf7;
    --k-color-violet-600: #7839ee;
    --k-color-violet-700: #6927da;
    --k-color-violet-800: #5720b7;
    --k-color-violet-900: #491c96;
    --k-color-warning-25: #fffcf5;
    --k-color-warning-50: #fffaeb;
    --k-color-warning-100: #fef0c7;
    --k-color-warning-200: #fedf89;
    --k-color-warning-300: #fec84b;
    --k-color-warning-400: #fdb022;
    --k-color-warning-500: #f79009;
    --k-color-warning-600: #dc6803;
    --k-color-warning-700: #b54708;
    --k-color-warning-800: #93370d;
    --k-color-warning-900: #7a2e0e;
    --k-color-white-12: hsla(0, 0%, 100%, .12);
    --k-color-white-20: hsla(0, 0%, 100%, .2);
    --k-color-white: #fff;
    --k-color-yellow-25: #fefdf0;
    --k-color-yellow-50: #fefbe8;
    --k-color-yellow-100: #fef7c3;
    --k-color-yellow-200: #feee95;
    --k-color-yellow-300: #fde272;
    --k-color-yellow-400: #fac515;
    --k-color-yellow-500: #eaaa08;
    --k-color-yellow-600: #ca8504;
    --k-color-yellow-700: #a15c07;
    --k-color-yellow-800: #854a0e;
    --k-color-yellow-900: #713b12;
    --k-color-pressed-light: linear-gradient(0deg, var(--k-color-black-12), var(--k-color-black-12)), var(--k-color-gray-100);
    --k-color-pressed-dark: linear-gradient(0deg, var(--k-color-white-12), var(--k-color-white-12)), var(--k-color-gray-900);
    --k-color-pressed-kong: linear-gradient(0deg, var(--k-color-black-20), var(--k-color-black-20)), var(--k-color-kong);
    --k-color-primary-glow: linear-gradient(0deg, var(--k-color-fuchsia-400), var(--k-color-kong));
    --k-focus-ring-3: 3px;
    --k-focus-ring-4: 4px;
    --k-focus-ring-kong-3: 0 0 0 3px var(--k-color-kong);
    --k-focus-ring-kong-4: 0 0 0 4px var(--k-color-kong);
    --k-focus-ring-transp-kong-4: 0 0 0 4px var(--k-color-kong-40);
    --k-focus-ring-kong-6: 0 0 0 6px var(--k-color-kong);
    --k-focus-ring-dark-4: 0 0 0 4px var(--k-color-gray-900);
    --k-focus-ring-dark-6: 0 0 0 6px var(--k-color-gray-900);
    --k-font-sans: inter, ui-sans-serif, system-ui, -apple-system, blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    --k-font-size-xs: 0.75rem;
    --k-font-size-sm: 0.875rem;
    --k-font-size-md: 1rem;
    --k-font-size-lg: 1.125rem;
    --k-font-size-xl: 1.25rem;
    --k-font-size-display-xs: 1.5rem;
    --k-font-size-display-sm: 1.875rem;
    --k-font-size-display-base: 2.25rem;
    --k-font-size-display-md: 2.25rem;
    --k-font-size-display-lg: 3rem;
    --k-font-size-display-xl: 3.75rem;
    --k-font-size-display-xxl: 4.5rem;
    --k-font-weight-light: 300;
    --k-font-weight-normal: 400;
    --k-font-weight-medium: 500;
    --k-font-weight-semibold: 600;
    --k-font-weight-bold: 700;
    --k-gradient-developer-45: linear-gradient(104.62deg, #2970ff 39.66%, #e478fa);
    --k-gradient-kong-45: linear-gradient(104.62deg, var(--k-color-kong) 39.66%, #e478fa 100%);
    --k-gradient-kong-fade: linear-gradient(180deg, #eeaafd 0%, var(--k-color-kong) 59.9%);
    --k-gradient-kong-glow: linear-gradient(180deg, var(--k-color-kong) 0%, #e478fa 100%);
    --k-gradient-primary-glow: linear-gradient(180deg, var(--k-color-fuchsia-400) 0%, var(--k-color-kong) 100%);
    --k-line-height-xs: 1.125rem;
    --k-line-height-sm: 1.25rem;
    --k-line-height-md: 1.5rem;
    --k-line-height-lg: 1.75rem;
    --k-line-height-xl: 1.875rem;
    --k-line-height-display-xs: 2rem;
    --k-line-height-display-sm: 2.375rem;
    --k-line-height-display-md: 2.75rem;
    --k-line-height-display-lg: 3.75rem;
    --k-line-height-display-xl: 4.5rem;
    --k-line-height-display-xxl: 5.625rem;
    --k-shadow-xs: 0px 1px 2px rgb(0 0 0/5%);
    --k-shadow-sm: 0px 1px 3px rgb(0 0 0/10%), 0px 1px 2px rgb(0 0 0/6%);
    --k-shadow-md: 0px 4px 8px -2px rgb(0 0 0/10%), 0px 2px 4px -2px rgb(0 0 0/6%);
    --k-shadow-lg: 0px 20px 24px -4px rgb(0 0 0/8%), 0px 8px 8px -4px rgb(0 0 0/3%);
    --k-shadow-xl: 0px 20px 24px -4px rgb(0 0 0/8%), 0px 8px 8px -4px rgb(0 0 0/3%);
    --k-shadow-xxl: 0px 24px 48px -12px rgb(0 0 0/18%);
    --k-shadow-xxxl: 0px 32px 64px -12px rgb(0 0 0/14%);
    --k-size-px: 0.0625rem;
    --k-size-0-5: 0.125rem;
    --k-size-1: 0.25rem;
    --k-size-1-5: 0.375rem;
    --k-size-2: 0.5rem;
    --k-size-2-5: 0.625rem;
    --k-size-3: 0.75rem;
    --k-size-3-5: 0.875rem;
    --k-size-4: 1rem;
    --k-size-5: 1.25rem;
    --k-size-6: 1.5rem;
    --k-size-7: 1.75rem;
    --k-size-8: 2rem;
    --k-size-9: 2.25rem;
    --k-size-10: 2.5rem;
    --k-size-11: 2.75rem;
    --k-size-12: 3rem;
    --k-size-14: 3.5rem;
    --k-size-16: 4rem;
    --k-size-20: 5rem;
    --k-size-24: 6rem;
    --k-size-28: 7rem;
    --k-size-32: 8rem;
    --k-size-36: 9rem;
    --k-size-40: 10rem;
    --k-size-44: 11rem;
    --k-size-48: 12rem;
    --k-size-52: 13rem;
    --k-size-56: 14rem;
    --k-size-60: 15rem;
    --k-size-64: 16rem;
    --k-size-72: 18rem;
    --k-size-80: 20rem;
    --k-size-96: 24rem;
    --k-transition-x-slow: 1000ms;
    --k-transition-slow: 500ms;
    --k-transition-medium: 250ms;
    --k-transition-fast: 150ms;
    --k-transition-x-fast: 100ms;
    --k-z-index-10: 10;
    --k-z-index-20: 20;
    --k-z-index-30: 30;
    --k-z-index-40: 40;
    --k-z-index-50: 50;
    --k-z-index-100: 100
}

:host {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    all: initial;
    box-sizing: border-box;
    color: inherit;
    font-family: var(--k-font-sans);
    line-height: var(--k-line-height-md);
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

:host, :host *, :host :after, :host :before, :host:after, :host:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always
}

:host *, :host :after, :host :before {
    box-sizing: inherit
}

[hidden] {
    display: none !important
}

:host ::slotted(*), :host slot {
    font-family: var(--k-font-sans)
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    border-width: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

:host {
    display: block;
    width: 100%
}

:host([variant=error]) {
    --k-alert-background-color: var(--k-color-error-100);
    --k-alert-color: var(--k-color-gray-900);
    --k-alert-border-color: var(--k-color-error-400)
}

:host([variant=info]) {
    --k-alert-background-color: var(--k-color-blue-dark-100);
    --k-alert-color: var(--k-color-gray-900);
    --k-alert-border-color: var(--k-color-blue-400)
}

:host([variant=success]) {
    --k-alert-background-color: var(--k-color-success-100);
    --k-alert-color: var(--k-color-gray-900);
    --k-alert-border-color: var(--k-color-success-400)
}

:host([variant=warning]) {
    --k-alert-background-color: var(--k-color-warning-100);
    --k-alert-color: var(--k-color-gray-900);
    --k-alert-border-color: var(--k-color-warning-400)
}

.alert {
    align-items: center;
    background-color: var(--k-alert-background-color);
    border-left: 4px solid var(--k-alert-border-color);
    border-radius: 6px;
    color: var(--k-alert-color);
    display: flex;
    gap: var(--k-size-2);
    padding: var(--k-size-2) var(--k-size-2-5) var(--k-size-2) var(--k-size-1-5);
    width: 100%
}

.alert__content {
    display: block;
    flex: 1;
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-normal);
    line-height: var(--k-line-height-md);
    width: 100%
}

.alert__icon {
    display: flex;
    font-size: 20px
}

:host, :host([theme=default]) {
    --k-avatar-color: var(--k-color-gray-500);
    --k-avatar-stroke: transparent;
    --k-avatar-border-color: transparent;
    --k-avatar-border-width: 0
}

:host([theme=reversed]) {
    --k-avatar-stroke: var(--k-color-white)
}

:host {
    display: flex
}

.avatar {
    align-items: center;
    display: flex;
    font-size: inherit;
    justify-content: center;
    position: relative
}

.avatar--rounded {
    border-radius: 9999px
}

.avatar--stroke {
    --k-avatar-border-width: 1px
}

.avatar--stroke-light {
    --k-avatar-border-color: var(--k-color-white)
}

.avatar--stroke-dark {
    --k-avatar-border-color: var(--k-color-gray-800)
}

.avatar__content {
    align-items: center;
    border: var(--k-avatar-border-width) solid var(--k-avatar-border-color);
    color: var(--k-avatar-color);
    display: flex;
    height: 100%;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
    padding-bottom: 50%;
    position: relative;
    width: 100%
}

:host([rounded]) .avatar__content {
    border-radius: 9999px
}

.avatar__image {
    height: 100%;
    inset: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.avatar__initials {
    line-height: 1;
    text-transform: uppercase
}

:host([size="20"]) .avatar__initials {
    font-size: var(--k-font-size-xs)
}

:host([size="24"]) .avatar__initials {
    font-size: var(--k-font-size-xs)
}

:host([size="32"]) .avatar__initials {
    font-size: var(--k-font-size-sm)
}

:host([size="36"]) .avatar__initials {
    font-size: var(--k-font-size-md)
}

:host([size="40"]) .avatar__initials {
    font-size: var(--k-font-size-lg)
}

:host([size="48"]) .avatar__initials {
    font-size: var(--k-font-size-xl)
}

:host([size="56"]) .avatar__initials {
    font-size: var(--k-font-size-display-xs)
}

:host([size="64"]) .avatar__initials {
    font-size: var(--k-font-size-display-sm)
}

:host([size="80"]) .avatar__initials {
    font-size: var(--k-font-size-display-md)
}

:host([size="96"]) .avatar__initials {
    font-size: var(--k-font-size-display-lg)
}

:host([size="128"]) .avatar__initials {
    font-size: var(--k-font-size-display-xl)
}

:host([size="160"]) .avatar__initials {
    font-size: var(--k-font-size-display-xl)
}

.avatar__status {
    background-color: var(--k-color-success-400);
    border-radius: 9999px;
    bottom: 3.91%;
    height: 100%;
    position: absolute;
    right: 3.91%;
    width: 100%
}

:host {
    display: flex
}

.avatar-label-group {
    align-items: center;
    display: flex;
    justify-content: center
}

.avatar-label-group--xs {
    gap: var(--k-size-1-5)
}

.avatar-label-group--sm {
    gap: var(--k-size-2-5)
}

.avatar-label-group--md {
    gap: var(--k-size-3)
}

.avatar-label-group--lg {
    gap: var(--k-size-4)
}

.avatar-label-group__heading {
    color: var(--k-color-gray-900);
    font-weight: var(--k-font-weight-semibold)
}

:host([size=xs]) .avatar-label-group__heading {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

:host([size=sm]) .avatar-label-group__heading {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

:host([size=md]) .avatar-label-group__heading {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

:host([size=lg]) .avatar-label-group__heading {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

:host([size=xl]) .avatar-label-group__heading {
    font-size: var(--k-font-size-lg);
    line-height: var(--k-line-height-lg)
}

.avatar-label-group__subheading {
    color: var(--k-color-gray-500)
}

:host([size=xs]) .avatar-label-group__subheading {
    font-size: var(--k-font-size-xs);
    line-height: var(--k-line-height-xs)
}

:host([size=sm]) .avatar-label-group__subheading {
    font-size: var(--k-font-size-xs);
    line-height: var(--k-line-height-xs)
}

:host([size=md]) .avatar-label-group__subheading {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

:host([size=lg]) .avatar-label-group__subheading {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

:host([size=xl]) .avatar-label-group__subheading {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.avatar-label-group__heading, .avatar-label-group__subheading {
    display: flex;
    line-height: 1
}

.avatar-label-group__heading::slotted(*), .avatar-label-group__heading > *, .avatar-label-group__subheading::slotted(*), .avatar-label-group__subheading > * {
    line-height: inherit
}

.avatar-label-group__avatar {
    display: flex
}

:host {
    display: inline-block
}

.avatar-badge--variant-avatar {
    align-items: center;
    background: var(--k-color-gray-900);
    border-radius: 5px;
    color: var(--k-color-white);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-semibold);
    height: 20px;
    justify-content: center;
    line-height: var(--k-line-height-md);
    padding: 1px 3px;
    text-align: center
}

.avatar-badge--variant-avatar.avatar-badge--theme-reversed {
    background: var(--k-color-white);
    color: var(--k-color-gray-900);
    font-weight: var(--k-font-weight-bold)
}

.avatar-badge--variant-avatar .avatar-badge__hash {
    text-align: right
}

.avatar-badge--variant-high-score {
    background: var(--k-color-rose-400);
    border-radius: 4px;
    color: var(--k-color-gray-900);
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    height: 16px;
    line-height: var(--k-line-height-sm);
    padding: 0 2px
}

.avatar-badge--variant-high-score, .avatar-badge--variant-kreds {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center
}

.avatar-badge--variant-kreds {
    background: var(--k-color-gray-900);
    border-radius: 3px;
    box-shadow: var(--k-shadow-md);
    color: var(--k-color-white);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    height: 14px;
    letter-spacing: -.48px;
    line-height: 18px;
    padding: 1px 2px 0;
    text-align: center
}

.avatar-badge--variant-kreds.avatar-badge--theme-reversed {
    background: var(--k-color-white);
    color: var(--k-color-gray-800);
    font-weight: var(--k-font-weight-bold);
    padding: 0 2px
}

.avatar-group {
    display: flex
}

:host {
    display: flex
}

.profile-stat {
    align-items: center;
    background: var(--profile-stat-background);
    border-radius: var(--profile-stat-border-radius);
    box-shadow: var(--profile-stat-shadow);
    color: var(--profile-stat-color);
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--profile-stat-gap);
    height: var(--profile-stat-height);
    justify-content: center;
    max-width: var(--profile-stat-max-width, auto);
    min-width: var(--profile-stat-min-width);
    padding: var(--profile-stat-padding)
}

.profile-stat--size-sm {
    --profile-stat-border-radius: 5px;
    --profile-stat-font-size: 16px;
    --profile-stat-gap: 0px;
    --profile-stat-height: 24px;
    --profile-stat-icon-size: 16px;
    --profile-stat-letter-spacing: -0.96px;
    --profile-stat-min-width: 24px;
    --profile-stat-shadow: var(--k-shadow-sm)
}

.profile-stat--size-sm:not(.profile-stat--icon-only) {
    --profile-stat-padding: 2.5px 3px 2.5px 2px
}

.profile-stat--size-sm--icon-only {
    --profile-stat-max-width: 24px;
    --profile-stat-padding: 4px 5px
}

.profile-stat--size-md {
    --profile-stat-border-radius: 6px;
    --profile-stat-font-size: 20px;
    --profile-stat-gap: 0px;
    --profile-stat-height: 28px;
    --profile-stat-icon-size: 18px;
    --profile-stat-letter-spacing: -1.2px;
    --profile-stat-min-width: 28px;
    --profile-stat-shadow: var(--k-shadow-sm)
}

.profile-stat--size-md:not(.profile-stat--icon-only) {
    --profile-stat-padding: 2.5px 3px 2.5px 2px
}

.profile-stat--size-md--icon-only {
    --profile-stat-max-width: 28px;
    --profile-stat-padding: 5px 6px
}

.profile-stat--size-lg {
    --profile-stat-border-radius: 8px;
    --profile-stat-font-size: 32px;
    --profile-stat-gap: 1px;
    --profile-stat-height: 36px;
    --profile-stat-icon-size: 24px;
    --profile-stat-letter-spacing: -1.92px;
    --profile-stat-min-width: 36px;
    --profile-stat-shadow: var(--k-shadow-md)
}

.profile-stat--size-lg:not(.profile-stat--icon-only) {
    --profile-stat-padding: 3.5px 4px 3.5px 2px
}

.profile-stat--size-lg--icon-only {
    --profile-stat-max-width: 36px;
    --profile-stat-padding: 6px
}

.profile-stat--theme-default {
    --profile-stat-background: var(--k-color-white);
    --profile-stat-color: var(--k-color-gray-900);
    --profile-stat-font-weight: 700
}

.profile-stat--theme-reversed {
    --profile-stat-background: var(--k-color-gray-900);
    --profile-stat-color: var(--k-color-white);
    --profile-stat-font-weight: 600
}

.profile-stat--icon-only .profile-stat__label {
    display: none
}

.profile-stat__icon {
    color: var(--k-color-kong);
    display: flex;
    font-size: var(--profile-stat-icon-size)
}

.profile-stat__label {
    display: flex;
    font-size: var(--profile-stat-font-size);
    font-weight: var(--profile-stat-font-weight);
    letter-spacing: var(--profile-stat-letter-spacing);
    text-align: center
}

:host {
    display: inline-flex
}

:host([color=error]) {
    --k-badge-background-color: var(--k-color-error-50);
    --k-badge-color: var(--k-color-error-700)
}

:host([color=orange]) {
    --k-badge-background-color: var(--k-color-orange-50);
    --k-badge-color: var(--k-color-orange-700)
}

:host([color=rose]) {
    --k-badge-background-color: var(--k-color-rose-50);
    --k-badge-color: var(--k-color-rose-700)
}

:host([color=pink]) {
    --k-badge-background-color: var(--k-color-pink-50);
    --k-badge-color: var(--k-color-pink-700)
}

:host([color=blue]) {
    --k-badge-background-color: var(--k-color-blue-50);
    --k-badge-color: var(--k-color-blue-700)
}

:host([color=purple]) {
    --k-badge-background-color: var(--k-color-purple-50);
    --k-badge-color: var(--k-color-purple-700)
}

:host([color=indigo]) {
    --k-badge-background-color: var(--k-color-indigo-50);
    --k-badge-color: var(--k-color-indigo-700)
}

:host([color=blue-light]) {
    --k-badge-background-color: var(--k-color-blue-light-50);
    --k-badge-color: var(--k-color-blue-light-700)
}

:host([color=gray-blue]) {
    --k-badge-background-color: var(--k-color-gray-blue-50);
    --k-badge-color: var(--k-color-gray-blue-700)
}

:host([color=success]) {
    --k-badge-background-color: var(--k-color-success-50);
    --k-badge-color: var(--k-color-success-700)
}

:host([color=warning]) {
    --k-badge-background-color: var(--k-color-warning-50);
    --k-badge-color: var(--k-color-warning-700)
}

:host([color=gray]) {
    --k-badge-background-color: var(--k-color-gray-100);
    --k-badge-color: var(--k-color-gray-700)
}

:host([color=primary]) {
    --k-badge-background-color: var(--k-color-gray-50);
    --k-badge-color: var(--k-color-gray-700)
}

.badge {
    align-items: center;
    background-color: var(--k-badge-background-color);
    border-radius: 4px;
    color: var(--k-badge-color);
    display: flex;
    justify-content: center
}

.badge--size-sm {
    font-size: var(--k-font-size-xs);
    height: 22px;
    padding-left: 6px;
    padding-right: 6px
}

.badge--size-md {
    font-size: var(--k-font-size-sm);
    height: 24px;
    padding-left: 8px;
    padding-right: 8px
}

.badge--size-lg {
    font-size: var(--k-font-size-sm);
    height: 28px;
    padding-left: 12px;
    padding-right: 12px
}

:host {
    --k-edition-badge-border-radius: 4px;
    --k-edition-badge-border: 1px solid var(--k-color-gray-900);
    --k-edition-badge-color: var(--k-color-gray-900);
    --k-edition-badge-font-size: 16px;
    --k-edition-badge-font-weight: var(--k-font-weight-bold);
    --k-edition-badge-gap: -2px;
    --k-edition-badge-icon-size: 14px;
    --k-edition-badge-image-size: 16px;
    --k-edition-badge-letter-spacing: -0.96px;
    --k-edition-badge-line-height: 20px;
    --k-edition-badge-padding: 1px 4px 1px 1px;
    display: inline-flex
}

.edition-badge {
    align-items: center;
    border: var(--k-edition-badge-border);
    border-radius: var(--k-edition-badge-border-radius);
    color: var(--k-edition-badge-color);
    display: inline-flex;
    padding: var(--k-edition-badge-padding);
    position: relative;
    transform-style: preserve-3d
}

.edition-badge--achieved {
    --k-edition-badge-padding: 3px
}

.edition-badge--achieved.edition-badge--size-md {
    --k-edition-badge-padding: 1px
}

.edition-badge--size-md {
    --k-edition-badge-image-size: 24px
}

.edition-badge--size-md:not(.edition-badge--achieved) {
    --k-edition-badge-font-size: 24px;
    --k-edition-badge-gap: -3px;
    --k-edition-badge-icon-size: 20px;
    --k-edition-badge-letter-spacing: -1.44px;
    --k-edition-badge-line-height: 32px;
    --k-edition-badge-padding: 2px 5px 2px 2px;
    flex-shrink: 0;
    height: 28px
}

.edition-badge--theme-reversed {
    --k-edition-badge-border: 1px solid var(--k-color-white);
    --k-edition-badge-color: var(--k-color-white)
}

.edition-badge--theme-reversed:not(.edition-badge--achieved) {
    --k-edition-badge-font-weight: var(--k-font-weight-semibold)
}

.edition-badge--theme-shiny {
    --k-edition-badge-border: none;
    height: 26px;
    margin-right: 1px
}

.edition-badge--theme-shiny:not(.edition-badge--achieved) {
    --k-edition-badge-font-weight: var(--k-font-weight-semibold)
}

.edition-badge--theme-shiny:not(.edition-badge--achieved) .edition-badge__status, .edition-badge--theme-shiny:not(.edition-badge--achieved) .edition-badge__status k-material-icon {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: var(--k-gradient-primary-glow);
    display: inline-flex
}

.edition-badge--theme-shiny:not(.edition-badge--achieved).edition-badge--size-md {
    --k-edition-badge-padding: 2px 5px 2px 1px;
    height: 26px
}

.edition-badge--theme-shiny .edition-badge__shadow {
    border: 1px solid transparent;
    border-radius: 5px;
    display: block;
    inset: -1px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    position: absolute;
    transform: translateZ(-1px)
}

.edition-badge--theme-shiny .edition-badge__shadow:before {
    background: linear-gradient(0deg, var(--k-color-kong), var(--k-color-fuchsia-400));
    border-radius: 4px;
    content: "";
    filter: blur(0);
    inset: -1px;
    position: absolute;
    transform: translate(0)
}

.edition-badge__shadow {
    display: none
}

.edition-badge__star {
    align-items: center;
    display: inline-flex;
    justify-content: center
}

.edition-badge__star img {
    border-radius: 2px;
    height: var(--k-edition-badge-image-size);
    width: var(--k-edition-badge-image-size)
}

.edition-badge__status, .edition-badge__status:not(.edition-badge--achieved) {
    align-items: center;
    display: inline-flex;
    justify-content: center
}

.edition-badge__status:not(.edition-badge--achieved) {
    height: 18px
}

.edition-badge__status k-material-icon {
    color: var(--k-edition-badge-color);
    font-size: var(--k-edition-badge-icon-size)
}

.edition-badge__status-icon {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: var(--k-edition-badge-icon-size);
    justify-content: center;
    margin-right: var(--k-edition-badge-gap);
    width: var(--k-edition-badge-icon-size)
}

.edition-badge slot:not([name]) {
    color: var(--k-edition-badge-color);
    font-size: var(--k-edition-badge-font-size);
    font-weight: var(--k-font-weight-semibold);
    letter-spacing: var(--k-edition-badge-letter-spacing);
    line-height: var(--k-edition-badge-line-height)
}

:host, :host([theme=default]) {
    --k-splash-background-color: var(--k-color-gray-800)
}

:host([theme=reversed]) {
    --k-splash-background-color: var(--k-color-gray-100)
}

:host([theme=kong]) {
    --k-splash-background-color: var(--k-color-kong)
}

.kong-splash {
    align-items: center;
    background-color: var(--k-splash-background-color);
    display: flex;
    justify-content: center
}

.kong-splash slot[name=wordmark] kong-wordmark {
    max-width: 80%
}

.button.button--filled {
    --border-radius: 6px;
    --shadow-size: var(--theme-shadow-size, 5px)
}

.button.button--filled.button--default {
    --content-background-color: var(--k-color-gray-100);
    --font-color: var(--k-color-gray-900);
    --font-weight: var(--k-font-weight-bold);
    --shadow-background: var(--k-color-kong)
}

.button.button--filled.button--kong {
    --content-background-color: var(--k-color-kong);
    --font-color: var(--k-color-white);
    --font-weight: var(--k-font-weight-semibold);
    --shadow-background: var(--k-color-kong-40)
}

.button.button--filled.button--reversed {
    --content-background-color: var(--k-color-gray-900);
    --font-color: var(--k-color-white);
    --font-weight: var(--k-font-weight-semibold);
    --shadow-background: var(--k-color-kong)
}

.button.button--filled.button--disabled {
    --font-color: var(--k-color-gray-500)
}

.button.button--filled:not(.button--disabled):hover .button__shadow {
    opacity: 1;
    transition-delay: 0s
}

.button.button--filled:not(.button--disabled):hover .button__contents {
    transform: translateX(calc(var(--shadow-size) * -1)) translateY(calc(var(--shadow-size) * -1))
}

.button.button--filled.button--sm {
    --content-gap: 2px;
    --content-padding-block: 6px;
    --content-padding-inline: 8px;
    --font-size: var(--k-font-size-sm);
    --label-padding-inline: 2px;
    --line-height: var(--k-line-height-sm);
    --shadow-size: 3px
}

.button.button--filled.button--md {
    --content-gap: 3px;
    --content-padding-block: 8px;
    --content-padding-inline: 12px;
    --font-size: var(--k-font-size-md);
    --label-padding-inline: 3px;
    --line-height: var(--k-line-height-md)
}

.button.button--filled.button--lg {
    --content-gap: 3px;
    --content-padding-block: 10px;
    --content-padding-inline: 14px;
    --font-size: var(--k-font-size-base);
    --label-padding-inline: 3px;
    --line-height: var(--k-line-height-md)
}

.button.button--filled.button--xl {
    --content-gap: 3px;
    --content-padding-block: 11px;
    --content-padding-inline: 16px;
    --font-size: var(--k-font-size-lg);
    --label-padding-inline: 4px;
    --line-height: var(-k-line-height-lg)
}

.button.button--filled.button--xxl {
    --content-gap: 4px;
    --content-padding-block: 13px;
    --content-padding-inline: 18px;
    --font-size: var(--k-font-size-xl);
    --label-padding-inline: 4px;
    --line-height: var(--k-line-height-xl)
}

.button.button--inline {
    isolation: isolate
}

.button.button--inline.button--disabled {
    --font-color: var(--k-color-gray-500)
}

.button.button--inline .button__contents {
    padding-block: 0;
    padding-inline: 0
}

.button.button--inline.button--xs {
    --content-gap: 2px;
    --font-color: var(--k-color-gray-500);
    --font-size: var(--k-font-size-xs);
    --font-weight: var(--k-font-weight-medium);
    --line-height: var(--k-line-height-sm)
}

.button.button--inline.button--xs:after {
    background-color: transparent;
    block-size: 1px;
    content: "";
    inline-size: 100%;
    inset-block-start: 15px;
    inset-inline: 0;
    opacity: 0;
    position: absolute;
    z-index: 1
}

.button.button--inline.button--xs.button--active:after {
    opacity: 0
}

.button.button--inline.button--xs:not(.button--disabled):focus-visible:after {
    background-color: var(--k-color-kong);
    opacity: 1
}

.button.button--inline.button--xs:not(.button--disabled):hover:after {
    background-color: var(--k-color-gray-500);
    opacity: 1
}

.button.button--inline.button--sm {
    --content-gap: 4px;
    --font-color: var(--k-color-gray-900);
    --font-size: var(--k-font-size-sm);
    --font-weight: var(--k-font-weight-bold);
    --line-height: var(--k-line-height-sm)
}

.button.button--inline.button--sm.button--active {
    --font-color: var(--k-color-gray-900)
}

.button.button--inline.button--sm:not(.button--disabled):focus-visible {
    --font-color: var(--k-color-kong)
}

.button.button--inline.button--md {
    --content-gap: 6px;
    --font-color: var(--k-color-gray-900);
    --font-size: var(--k-font-size-md);
    --font-weight: var(--k-font-weight-bold);
    --line-height: var(--k-line-height-md)
}

.button.button--inline.button--md.button--active {
    --background-border-block-size: 5px;
    --background-border-inline-size: 5px;
    --background: var(--k-color-pressed-light);
    --content-box-shadow: none
}

.button.button--inline.button--md:not(.button--disabled):focus-visible {
    --background-border-block-size: 5px;
    --background-border-inline-size: 5px;
    --background: var(--k-color-kong);
    --font-color: var(--k-color-white)
}

.button.button--inline.button--md:not(.button--disabled):hover {
    --content-box-shadow: 0 3px 0 var(--k-color-gray-900)
}

.button.button--inline.button--lg {
    --content-gap: 6px;
    --font-color: var(--k-color-gray-900);
    --font-size: var(--k-font-size-base);
    --font-weight: var(--k-font-weight-bold);
    --line-height: var(--k-line-height-md)
}

.button.button--inline.button--lg.button--active {
    --background-border-block-size: 6px;
    --background-border-inline-size: 6px;
    --background: var(--k-color-pressed-light);
    --content-box-shadow: none
}

.button.button--inline.button--lg:not(.button--disabled):hover {
    --content-box-shadow: 0 3px 0 var(--k-color-gray-900)
}

.button.button--inline.button--lg:not(.button--disabled):focus-visible {
    --background-border-block-size: 6px;
    --background-border-inline-size: 6px;
    --background: var(--k-color-kong);
    --font-color: var(--k-color-white)
}

.button.button--unfilled {
    --content-padding-inline: 0
}

.button.button--unfilled.button--active {
    --background: var(--k-color-pressed-light);
    --content-box-shadow: unset;
    --font-color: var(--k-color-white)
}

.button.button--unfilled.button--disabled {
    --font-color: var(--k-color-gray-500)
}

.button.button--unfilled:not(.button--disabled):focus-visible {
    --background: var(--k-color-kong);
    --content-box-shadow: unset;
    --font-color: var(--k-color-white)
}

.button.button--unfilled:not(.button--disabled):hover {
    --content-box-shadow: inset 0 -3px 0 var(--k-color-gray-900)
}

.button.button--unfilled.button--sm {
    --content-gap: 4px;
    --content-padding-block: 6px;
    --content-padding-inline: 0;
    --font-size: var(--k-font-size-sm);
    --font-weight: var(--k-font-weight-bold);
    --line-height: var(--k-line-height-sm)
}

.button.button--unfilled.button--sm.button--active {
    --background-border-inline-size: 7px
}

.button.button--unfilled.button--sm:not(.button--disabled):focus-visible {
    --background-border-inline-size: 7px
}

.button.button--unfilled.button--md {
    --content-gap: 6px;
    --content-padding-block: 5px;
    --font-size: var(--k-font-size-md);
    --font-weight: var(--k-font-weight-bold);
    --line-height: var(--k-line-height-md)
}

.button.button--unfilled.button--md.button--active {
    --background-border-inline-size: 6px
}

.button.button--unfilled.button--md:not(.button--disabled):focus-visible {
    --background-border-inline-size: 6px
}

.button.button--unfilled.button--lg {
    --content-gap: 6px;
    --content-padding-block: 5px;
    --font-size: var(--k-font-size-base);
    --font-weight: var(--k-font-weight-bold);
    --line-height: var(--k-line-height-md)
}

.button.button--unfilled.button--lg.button--active {
    --background-border-inline-size: 6px
}

.button.button--unfilled.button--lg:not(.button--disabled):focus-visible {
    --background-border-inline-size: 6px
}

.button.button--unfilled.button--xl {
    --content-gap: 6px;
    --content-padding-block: 5px;
    --font-size: var(--k-font-size-lg);
    --font-weight: var(--k-font-weight-bold);
    --line-height: var(-k-line-height-lg)
}

.button.button--unfilled.button--xl.button--active {
    --background-border-inline-size: 6px
}

.button.button--unfilled.button--xl:not(.button--disabled):focus-visible {
    --background-border-inline-size: 6px
}

.button.button--unfilled.button--xxl {
    --content-gap: 8px;
    --content-padding-block: 5px;
    --font-size: var(--k-font-size-xl);
    --font-weight: var(--k-font-weight-bold);
    --line-height: var(--k-line-height-xl)
}

.button.button--unfilled.button--xxl.button--active {
    --background-border-inline-size: 5px
}

.button.button--unfilled.button--xxl:not(.button--disabled):focus-visible {
    --background-border-inline-size: 5px
}

:host {
    --theme-background-color: initial;
    --theme-border-radius: initial;
    --theme-font-color: initial;
    --theme-font-weight: initial;
    --theme-shadow-color: initial;
    --theme-shadow-size: initial;
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: auto
}

.button {
    --border-radius: inherit;
    --font-color: inherit;
    --line-height: inherit;
    --font-size: inherit;
    --font-weight: inherit;
    --content-padding-block: 0;
    --content-padding-inline: 0;
    --shadow-size: 0px;
    align-items: stretch;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    color: var(--theme-font-color, var(--font-color));
    cursor: inherit;
    display: inline-flex;
    font-family: var(--k-font-sans);
    font-size: var(--font-size);
    font-weight: var(--theme-font-weight, var(--font-weight));
    justify-content: center;
    line-height: var(--line-height);
    padding: 0;
    position: relative;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%
}

.button::-moz-focus-inner {
    border: 0
}

.button:focus {
    outline: 0
}

.button.button--disabled {
    cursor: not-allowed
}

.button.button--disabled * {
    pointer-events: none
}

.button__contents {
    align-items: center;
    background-color: var(--theme-background-color, var(--content-background-color, transparent));
    border-radius: var(--theme-border-radius, var(--border-radius));
    box-shadow: var(--content-box-shadow, initial);
    display: flex;
    font-size: inherit;
    inline-size: 100%;
    justify-content: center;
    padding-block: var(--content-padding-block, 0);
    padding-inline: var(--content-padding-inline, 0);
    position: relative;
    transition: transform .15s cubic-bezier(.4, 0, .2, 1)
}

.button__label {
    display: inline-block;
    padding-block: var(--label-padding-block, 0);
    padding-inline: var(--label-padding-inline, 0)
}

.button__shadow {
    background-color: var(--theme-shadow-color, var(--shadow-background, transparent));
    border-radius: var(--theme-border-radius, var(--border-radius));
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
    transition-delay: 75ms
}

.button__leading, .button__trailing {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    font-size: inherit;
    pointer-events: none
}

.button__leading::slotted(*) {
    margin-inline-end: var(--content-gap, 0)
}

.button__leading::slotted(*) {
    margin-inline-start: var(--content-gap, 0)
}

.button:not(.button--disabled):not(.button--xs) .button__contents:after {
    background: var(--background, none);
    content: "";
    height: calc(100% + (var(--background-border-block-size, 0px)) * 2);
    inset-block-start: calc((var(--background-border-block-size, 0px)) * -1);
    inset-inline-start: calc((var(--background-border-inline-size, 0px)) * -1);
    position: absolute;
    width: calc(100% + (var(--background-border-inline-size, 0px)) * 2);
    z-index: -1
}

:host {
    --k-modal-button-background-active: var(--k-color-gray-100);
    --k-modal-button-background-disabled: transparent;
    --k-modal-button-background-focus: var(--k-color-gray-100);
    --k-modal-button-background-hover: var(--k-color-gray-200);
    --k-modal-button-background: var(--k-color-gray-100);
    --k-modal-button-border-radius: 6px;
    --k-modal-button-border: none;
    --k-modal-button-box-shadow-focus: var(--k-focus-ring-kong-3);
    --k-modal-button-color-active: var(--k-color-gray-900);
    --k-modal-button-color-disabled: var(--k-color-gray-400);
    --k-modal-button-color: var(--k-color-gray-900);
    --k-modal-button-font-weight: var(--k-font-weight-semibold);
    --k-modal-button-gap: 8px;
    --k-modal-button-height: 40px;
    --k-modal-button-padding-block: var(--k-size-2-5);
    --k-modal-button-padding-inline: var(--k-size-3);
    --k-modal-button-text-decoration: none;
    --k-modal-button-width: auto;
    display: inline-flex;
    position: relative
}

.modal-button {
    align-items: stretch;
    background: var(--k-modal-button-background);
    border: var(--k-modal-button-border);
    border-radius: var(--k-modal-button-border-radius);
    box-sizing: border-box;
    color: var(--k-modal-button-color);
    display: inline-flex;
    font-family: var(--k-font-sans);
    font-size: var(--font-size);
    font-weight: var(--k-modal-button-font-weight);
    height: var(--k-modal-button-height);
    inline-size: 100%;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: color var(--k-transition-fast) linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: var(--k-modal-button-width)
}

.modal-button::-moz-focus-inner {
    border: 0
}

.modal-button:focus {
    outline: 0
}

.modal-button--light {
    --k-modal-button-background-active: var(--k-color-white);
    --k-modal-button-background-focus: var(--k-color-white);
    --k-modal-button-background-hover: var(--k-color-gray-100);
    --k-modal-button-background: var(--k-color-white);
    --k-modal-button-box-shadow-focus: var(--k-focus-ring-kong-3);
    --k-modal-button-color-active: var(--k-color-gray-900);
    --k-modal-button-color-disabled: var(--k-color-gray-400);
    --k-modal-button-color: var(--k-color-gray-900);
    --k-modal-button-font-weight: var(--k-font-weight-semibold)
}

.modal-button--light.modal-button--outline {
    --k-modal-button-background-active: transparent;
    --k-modal-button-background-focus: transparent;
    --k-modal-button-background-hover: var(--k-color-sheer-white-100);
    --k-modal-button-background: transparent;
    --k-modal-button-border: 1px solid var(--k-color-white);
    --k-modal-button-box-shadow-focus: var(--k-focus-ring-kong-3);
    --k-modal-button-color-active: var(--k-color-gray-25);
    --k-modal-button-color-disabled: var(--k-color-gray-400);
    --k-modal-button-color: var(--k-color-white);
    --k-modal-button-font-weight: var(--k-font-weight-medium)
}

.modal-button.modal-button--loading {
    cursor: not-allowed
}

.modal-button.modal-button--loading slot:not([name]), .modal-button.modal-button--loading slot[name=leading], .modal-button.modal-button--loading slot[name=trailing] {
    opacity: 0
}

.modal-button--theme-reversed {
    --k-modal-button-background-active: var(--k-color-gray-900);
    --k-modal-button-background-focus: var(--k-color-gray-900);
    --k-modal-button-background-hover: var(--k-color-gray-800);
    --k-modal-button-background: var(--k-color-gray-900);
    --k-modal-button-box-shadow-focus: var(--k-focus-ring-kong-3);
    --k-modal-button-color-active: var(--k-color-gray-25);
    --k-modal-button-color: var(--k-color-white);
    --k-modal-button-font-weight: var(--k-font-weight-medium)
}

.modal-button--theme-reversed.modal-button--light {
    --k-modal-button-background-active: transparent;
    --k-modal-button-background-focus: transparent;
    --k-modal-button-background-hover: var(--k-color-sheer-cool-black-100);
    --k-modal-button-background: transparent;
    --k-modal-button-box-shadow-focus: var(--k-focus-ring-kong-3);
    --k-modal-button-color-active: var(--k-color-gray-900);
    --k-modal-button-color: var(--k-color-gray-900);
    --k-modal-button-font-weight: var(--k-font-weight-semibold)
}

.modal-button--theme-reversed.modal-button--light.modal-button--outline {
    --k-modal-button-border: 1px solid var(--k-color-gray-900)
}

.modal-button--theme-reversed.modal-button--light.modal-button--outline.modal-button--disabled {
    --k-modal-button-border: 1px solid var(--k-color-gray-200)
}

.modal-button--theme-reversed.modal-button--transparent {
    --k-modal-button-background-active: var(--k-color-sheer-cool-black-10);
    --k-modal-button-background-focus: var(--k-color-sheer-cool-black-10);
    --k-modal-button-background-hover: var(--k-color-sheer-cool-black-300);
    --k-modal-button-background: var(--k-color-sheer-cool-black-10);
    --k-modal-button-box-shadow-focus: var(--k-focus-ring-kong-3);
    --k-modal-button-color-active: var(--k-color-gray-25);
    --k-modal-button-color: var(--k-color-white);
    --k-modal-button-font-weight: var(--k-font-weight-medium)
}

.modal-button--theme-destructive {
    --k-modal-button-background-active: var(--k-color-kong);
    --k-modal-button-background-focus: var(--k-color-kong);
    --k-modal-button-background-hover: var(--primary-darkened-120, linear-gradient(0deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .12) 100%), #f04433);
    --k-modal-button-background: var(--k-color-kong);
    --k-modal-button-box-shadow-focus: var(--k-focus-ring-transp-kong-4);
    --k-modal-button-color-active: var(--k-color-white);
    --k-modal-button-color: var(--k-color-white);
    --k-modal-button-font-weight: var(--k-font-weight-medium)
}

.modal-button--theme-destructive.modal-button--light {
    --k-modal-button-background-active: var(--k-color-white);
    --k-modal-button-background-hover: var(--k-color-gray-100);
    --k-modal-button-background: var(--k-color-white);
    --k-modal-button-box-shadow-focus: var(--k-focus-ring-kong-3);
    --k-modal-button-color-active: var(--k-color-kong);
    --k-modal-button-color: var(--k-color-kong);
    --k-modal-button-font-weight: var(--k-font-weight-semibold)
}

.modal-button--mini {
    --k-modal-button-gap: 0;
    --k-modal-button-padding-block: var(--k-size-2-5);
    --k-modal-button-padding-inline: var(--k-size-2-5)
}

.modal-button--mini::slotted(*) {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    font-size: 20px;
    pointer-events: none
}

.modal-button--disabled {
    background: var(--k-modal-button-background-disabled);
    color: var(--k-modal-button-color-disabled);
    cursor: not-allowed
}

.modal-button.modal-button--disabled {
    --k-modal-button-background: transparent;
    --k-modal-button-border: 1px solid var(--k-color-gray-200);
    --k-modal-button-color: var(--k-color-gray-400);
    --k-modal-button-font-weight: var(--k-font-weight-medium)
}

.modal-button.modal-button--disabled:not(.modal-button--mini) {
    --k-modal-button-text-decoration: line-through
}

.modal-button:not(.modal-button--disabled):hover .modal-button__item {
    background: var(--k-modal-button-background-hover)
}

.modal-button:not(.modal-button--disabled):active .modal-button__item {
    background: var(--k-modal-button-background-active);
    color: var(--k-modal-button-color-active)
}

.modal-button:not(.modal-button--disabled):not(:active):focus-visible {
    background: var(--k-modal-button-background-focus);
    box-shadow: var(--k-modal-button-box-shadow-focus)
}

.modal-button__content {
    align-self: stretch;
    flex-direction: column
}

.modal-button__content, .modal-button__item {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative
}

.modal-button__item {
    font-size: inherit;
    inline-size: 100%;
    padding-block: var(--k-modal-button-padding-block, 0);
    padding-inline: var(--k-modal-button-padding-inline, 0);
    transition: transform .15s cubic-bezier(.4, 0, .2, 1)
}

.modal-button__loading {
    font-size: 20px
}

.modal-button k-spinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.modal-button slot:not([name]) {
    display: inline-flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-modal-button-font-weight);
    line-height: var(--k-line-height-sm);
    opacity: 1;
    -webkit-text-decoration: var(--k-modal-button-text-decoration);
    text-decoration: var(--k-modal-button-text-decoration);
    transition: opacity var(--k-transition-fast)
}

.modal-button slot[name=leading], .modal-button slot[name=trailing] {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    font-size: 20px;
    pointer-events: none
}

.modal-button slot[name=leading] {
    opacity: 1;
    transition: opacity var(--k-transition-fast)
}

.modal-button slot[name=leading]::slotted(*) {
    margin-inline-end: var(--k-modal-button-gap)
}

.modal-button slot[name=trailing] {
    opacity: 1;
    transition: opacity var(--k-transition-fast)
}

.modal-button slot[name=trailing]::slotted(*) {
    margin-inline-start: var(--k-modal-button-gap)
}

:host {
    --k-status-action-label-background: transparent;
    --k-status-action-label-color: var(--k-color-gray-900);
    --k-status-action-label-font-size: var(--k-font-size-sm);
    --k-status-action-label-font-weight: var(--k-font-weight-semibold);
    --k-status-action-label-icon-color-foreground: var(--k-color-white);
    --k-status-action-label-icon-color: var(--k-color-kong);
    --k-status-action-label-line-height: var(--k-line-height-sm);
    display: flex
}

.card-status-action-label {
    align-items: center;
    background: var(--k-status-action-label-background);
    border-radius: 4px;
    border-style: none;
    color: var(--k-status-action-label-color);
    display: inline-flex;
    font-family: var(--k-font-sans);
    font-size: var(--k-status-action-label-font-size);
    font-weight: var(--k-status-action-label-font-weight);
    gap: 3px;
    line-height: var(--k-status-action-label-line-height);
    padding: 0 4px 0 2px
}

@media (hover: hover) and (pointer: fine) {
    .card-status-action-label:not([disabled]):hover {
        --k-status-action-label-background: var(--k-color-kong);
        --k-status-action-label-color: var(--k-color-white);
        --k-status-action-label-icon-color-foreground: var(--k-color-kong);
        --k-status-action-label-icon-color: var(--k-color-white)
    }
}

.card-status-action-label--size-md {
    --k-status-action-label-font-size: var(--k-font-size-md);
    --k-status-action-label-line-height: var(--k-line-height-md)
}

.card-status-action-label--theme-reversed {
    --k-status-action-label-color: var(--k-color-white)
}

.card-status-action-label__level {
    align-items: center;
    display: flex
}

.card-status-action-label slot[name=count]::slotted(*) {
    margin-left: 1px
}

.card-status-action-label slot[name=icon]::slotted(*) {
    --k-icon-background: var(--k-status-action-label-icon-color);
    --k-icon-foreground: var(--k-status-action-label-icon-color-foreground)
}

:host {
    --card-status-action-background-hover: var(--k-color-kong);
    --card-status-action-background: transparent;
    --card-status-action-color-hover: var(--k-color-white);
    --card-status-action-color: var(--k-color-gray-900);
    --card-status-action-icon-color-active: var(--k-color-kong);
    --card-status-action-icon-color-hover: var(--k-color-white);
    --card-status-action-icon-color: var(--k-color-gray-900);
    --card-status-action-shadow: var(--k-focus-ring-kong-4);
    display: inline-block
}

.card-status-action {
    align-items: center;
    background-color: var(--card-status-action-background);
    border: none;
    border-radius: 4px;
    color: var(--card-status-action-color);
    display: flex;
    flex-shrink: 0;
    font-family: var(--k-font-sans);
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    gap: 1px;
    height: 20px;
    justify-content: center;
    line-height: var(--k-line-height-sm);
    line-height: 20px;
    padding: 2px 4px
}

.card-status-action svg {
    pointer-events: none
}

.card-status-action--active.card-status-action {
    --card-status-action-icon-color: var(--card-status-action-icon-color-active)
}

.card-status-action--active.card-status-action:not(:disabled):hover k-icon::part(background) {
    fill: var(--card-status-action-icon-color-hover)
}

.card-status-action--active.card-status-action:not(:disabled):hover k-icon::part(foreground) {
    fill: var(--card-status-action-icon-color-active)
}

.card-status-action--theme-reversed {
    --card-status-action-color: var(--k-color-white);
    --card-status-action-icon-color: var(--k-color-white)
}

.card-status-action--type-difficulty {
    flex-direction: row-reverse
}

.card-status-action k-icon {
    color: var(--card-status-action-icon-color);
    pointer-events: none
}

.card-status-action:not(:disabled):hover {
    --card-status-action-background: var(--card-status-action-background-hover);
    --card-status-action-color: var(--card-status-action-color-hover);
    --card-status-action-icon-color: var(--card-status-action-icon-color-hover);
    cursor: pointer
}

.card-status-action:not(:disabled):hover.card-status-action--active {
    --card-status-action-icon-color: var(--card-status-action-icon-color-hover;
)
}

.card-status-action:focus {
    outline: 0
}

.card-status-action:focus-visible {
    box-shadow: var(--card-status-action-shadow)
}

.card-status-action__count {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.card-status-action__icon--inverted {
    display: none
}

:host {
    --k-game-card-background-color: var(--k-color-white);
    --k-game-card-color: var(--k-color-gray-900);
    --k-game-card-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --k-game-card-height: 300px;
    --k-game-card-lift: 6px;
    --k-game-card-width: 100%;
    display: flex
}

.game-card {
    flex: 1 1 0%
}

.game-card, .game-card__facade {
    display: flex;
    height: var(--k-game-card-height);
    position: relative;
    width: var(--k-game-card-width)
}

.game-card__facade {
    align-items: flex-start;
    background: var(--k-game-card-background-color);
    border-radius: var(--k-size-6);
    box-shadow: var(--k-shadow-sm);
    color: var(--k-game-card-color);
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: all var(--k-transition-fast) var(--k-game-card-ease-in-out)
}

.game-card a {
    color: var(--k-game-card-color);
    text-decoration: none
}

@media (hover: hover) and (pointer: fine) {
    .game-card:before {
        block-size: 100%;
        content: "";
        inset-block-end: 0;
        inset-inline: 0;
        position: absolute
    }

    .game-card:hover:before {
        inset-block-end: calc(var(--k-game-card-lift) * -1)
    }

    .game-card:hover .game-card__facade {
        box-shadow: var(--k-shadow-xxl);
        transform: translateY(calc(var(--k-game-card-lift) * -1))
    }

    .game-card:hover .game-card__image::slotted(*) {
        transform: scale(1.02)
    }

    .game-card:hover .game-card__content--more {
        grid-template-rows:1fr
    }
}

.game-card--has-cta .game-card__cta {
    display: flex
}

.game-card--theme-reversed {
    --k-game-card-background-color: var(--k-color-gray-900);
    --k-game-card-color: var(--k-color-white)
}

.game-card--cover.game-card {
    --k-game-card-background-color: transparent;
    --k-game-card-color: var(--k-color-white)
}

.game-card--cover.game-card--has-cta .game-card__tags-container {
    margin-bottom: 4px
}

.game-card--cover .game-card__content {
    align-items: flex-start;
    align-self: stretch;
    bottom: 0;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 4px;
    justify-content: flex-end;
    overflow: hidden;
    position: absolute;
    transform: translateY(calc(100% - 32px));
    transition: transform var(--k-transition-fast) var(--k-game-card-ease-in-out);
    width: 100%
}

.game-card--cover .game-card__content--more {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transition-delay: var(--k-transition-fast);
    transition: opacity var(--k-transition-fast) var(--k-game-card-ease-in-out)
}

.game-card--cover .game-card__image {
    inset: 0;
    z-index: 0
}

.game-card--cover .game-card__image:after {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4));
    content: "";
    inset: 0;
    position: absolute;
    z-index: 2
}

@media (hover: hover) and (pointer: fine) {
    .game-card--cover:hover .game-card__content {
        transform: translateY(0)
    }

    .game-card--cover:hover .game-card__content--more {
        opacity: 1
    }
}

.game-card:not(.game-card--cover) .game-card__content {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%
}

.game-card:not(.game-card--cover) .game-card__top {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-end;
    overflow: hidden
}

.game-card:not(.game-card--cover):not(.game-card--list) .game-card__top {
    border-radius: 16px 16px 0 0;
    flex: 1 0 0;
    margin-bottom: 4px;
    padding-bottom: 6px
}

.game-card--list:not(.game-card--cover) {
    --k-game-card-height: 120px
}

.game-card--list:not(.game-card--cover) .game-card__facade {
    flex-direction: row
}

.game-card--list:not(.game-card--cover) .game-card__description {
    margin-top: 2px
}

.game-card--list:not(.game-card--cover) .game-card__image {
    border-radius: 0 24px 24px 0;
    width: 120px
}

.game-card--list:not(.game-card--cover) .game-card__top {
    border-radius: 0 24px 24px 0;
    flex-shrink: 0;
    padding-bottom: 12px;
    width: 120px
}

.game-card__actions {
    align-items: flex-start;
    display: flex
}

.game-card__byline::slotted(*) {
    align-items: center;
    display: flex;
    gap: 3px;
    height: 20px
}

.game-card__content {
    pointer-events: none;
    position: relative
}

.game-card__cta {
    display: none;
    flex-grow: 1;
    padding: 0 12px;
    position: relative;
    width: 100%
}

.game-card__cta::slotted(*) {
    width: 100%
}

.game-card__description {
    margin-bottom: var(--k-size-1);
    margin-top: var(--k-size-1);
    opacity: 1;
    padding: 0 var(--k-size-3);
    transition: opacity var(--k-transition-fast) var(--k-game-card-ease-in-out)
}

.game-card__description-inner {
    overflow: hidden
}

.game-card__image {
    display: flex;
    flex-grow: 1;
    height: 100%;
    inset: 0;
    min-width: 120px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 100%
}

.game-card__image::slotted(*) {
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    transition: all var(--k-transition-fast) var(--k-game-card-ease-in-out);
    width: 100% !important
}

.game-card__info {
    align-items: center;
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    padding: 0 8px 6px;
    position: relative
}

.game-card__link:before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 0
}

.game-card__tags::slotted(*) {
    align-items: center;
    display: flex
}

.game-card__tags-container {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    overflow: scroll hidden;
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-stop: normal;
    scroll-snap-type: x mandatory;
    -moz-scrollbar-width: none;
    -ms-scrollbar-width: none;
    -webkit-scrollbar-width: none;
    scrollbar-width: none;
    width: 100%
}

.game-card__tags-container::-webkit-scrollbar {
    display: none;
    width: 0 !important
}

.game-card__title {
    opacity: 1;
    padding: 0 var(--k-size-3);
    transition: opacity var(--k-transition-fast) var(--k-game-card-ease-in-out)
}

.game-card__title-inner {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.game-card__top {
    pointer-events: none;
    position: relative
}

.game-card slot[name=description] {
    -webkit-line-clamp: 2;
    font-size: var(--k-font-size-xs);
    font-weight: var(--k-font-weight-normal);
    line-height: var(--k-line-height-xs)
}

.game-card slot[name=description], .game-card slot[name=title] {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.game-card slot[name=title] {
    -webkit-line-clamp: 1;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-sm)
}

.carousel {
    display: flex;
    overflow-x: auto;
}

.carousel-item {
    min-width: 100%;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

:host {
    --k-contact-card-height: 340px;
    --k-contact-card-width: 280px;
    display: flex
}

.contact-card {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--k-size-6);
    box-shadow: var(--k-shadow-sm);
    display: flex;
    flex-direction: column;
    height: var(--k-contact-card-height);
    justify-content: flex-end;
    padding: var(--k-size-3);
    width: var(--k-contact-card-width)
}

.contact-card__content {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, .1);
    border-radius: var(--k-size-3);
    color: var(--k-color-white);
    display: flex;
    flex-direction: column;
    gap: var(--k-size-1-5);
    padding: var(--k-size-2)
}

.contact-card__quote {
    display: block;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

.contact-card__quote:before {
    content: open-quote;
    display: inline;
    margin-right: -.15rem
}

.contact-card__quote:after {
    content: close-quote;
    display: inline;
    margin-left: -.15rem
}

.contact-card__footer {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.contact-card__attribution {
    display: flex;
    flex-direction: column
}

.contact-card__name, .contact-card__title {
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-sm)
}

.contact-card__actions {
    display: none;
    gap: var(--k-size-3)
}

.contact-card--hovered .contact-card__actions {
    display: flex
}

:host {
    --card-byline-background: transparent;
    --card-byline-color: var(--k-color-gray-900);
    --card-byline-focus-background: var(--k-color-sheer-black-50);
    --card-byline-focus-color: var(--k-color-gray-900);
    align-items: center;
    display: flex;
    justify-content: flex-start;
    position: relative
}

.card-byline {
    align-items: center;
    background: var(--card-byline-background);
    border-style: none;
    color: var(--card-byline-color);
    display: inline-flex;
    flex-shrink: 0;
    gap: 3px;
    height: 20px;
    padding: 0;
    position: relative;
    text-decoration: none;
    width: auto
}

.card-byline--mini {
    border-radius: 100px 0 0 100px
}

.card-byline--mini .card-byline__avatar {
    padding-right: 3px
}

.card-byline--mini:not(:focus-visible) .card-byline__label {
    border-radius: 0 4px 4px 0;
    display: none;
    height: 20px;
    left: 20px;
    padding-left: 3px;
    position: absolute
}

.card-byline--mini:not(:disabled):hover {
    cursor: pointer
}

.card-byline--mini:not(:disabled):hover .card-byline__label {
    background: var(--card-byline-background);
    display: flex
}

.card-byline--theme-reversed {
    --card-byline-color: var(--k-color-white);
    --card-byline-focus-background: var(--k-color-sheer-black-50);
    --card-byline-focus-color: var(--k-color-white)
}

.card-byline--variant-developer {
    border-radius: 10px 4px 4px 10px
}

.card-byline--variant-game {
    border-radius: 4px
}

.card-byline--variant-game .card-byline__avatar::slotted(*) {
    background: red;
    border-radius: 4px;
    overflow: hidden
}

.card-byline:not(:disabled):hover {
    --card-byline-background: var(--k-color-kong);
    --card-byline-color: var(--k-color-white);
    cursor: pointer
}

.card-byline:focus {
    outline: 0
}

.card-byline:not(:disabled):focus-visible {
    --card-byline-background: var(--card-byline-focus-background);
    --card-byline-color: var(--card-byline-focus-color);
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: var(--k-focus-ring-kong-4)
}

.card-byline:not(:disabled):focus-visible .card-byline__avatar {
    padding-right: 0
}

.card-byline:not(:disabled):focus-visible .card-byline__label {
    background: 0 0
}

.card-byline__avatar {
    display: flex;
    pointer-events: none
}

.card-byline__avatar::slotted(*) {
    pointer-events: none
}

.card-byline__inner-wrap {
    display: flex
}

.card-byline slot:not([name]) {
    display: flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-sm);
    padding-right: 4px
}

.card-byline slot:not([name])::slotted(*) {
    display: flex;
    pointer-events: none
}

:host {
    --k-badge-card-border-radius: 24px;
    --k-badge-card-height: 200px;
    --k-badge-card-lift: 6px;
    --k-badge-card-lift-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --k-badge-card-width: 100%;
    display: block
}

.badge-card {
    transition-backdrop-filter: blur(var(--k-blur-sm));
    transition-background: var(--k-color-sheer-black-10);
    transition-border-radius: 4px;
    transition-border: 1px solid var(--k-color-sheer-white-100);
    transition-pointer-events: none;
    display: flex;
    position: relative;
    transition: all var(--k-transition-fast) var(--k-badge-card-lift-easing), k-card-status-action
}

.badge-card, .badge-card a {
    color: var(--k-color-white)
}

.badge-card a {
    text-decoration: none
}

@media (hover: hover) and (pointer: fine) {
    .badge-card:has(a:hover) .badge-card__content, .badge-card:hover .badge-card__content {
        box-shadow: var(--k-shadow-xl);
        transform: translateY(calc(var(--k-badge-card-lift) * -1))
    }

    .badge-card:has(a:hover) .badge-card__link, .badge-card:hover .badge-card__link {
        height: calc(100% + var(--k-badge-card-lift))
    }
}

.badge-card:has(a:focus-visible) .badge-card__content:before {
    box-shadow: var(--k-focus-ring-kong-4)
}

.badge-card.badge-card--completed ::slotted([slot=image]) {
    mix-blend-mode: normal
}

.badge-card__bottom {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 2px
}

.badge-card__content {
    align-items: flex-start;
    background: var(--k-color-gray-800);
    border: 1px solid var(--k-color-gray-700);
    border-radius: var(--k-badge-card-border-radius);
    box-shadow: var(--k-shadow-sm);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 12px;
    height: var(--k-badge-card-height);
    padding: 12px;
    position: relative;
    transform: translateY(0);
    transition: all var(--k-transition-fast) var(--k-badge-card-lift-easing), box-shadow var(--k-transition-fast) var(--k-badge-card-lift-easing);
    width: var(--k-badge-card-width)
}

.badge-card__content:before {
    border-radius: var(--k-badge-card-border-radius);
    content: "";
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%
}

.badge-card__head {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column
}

.badge-card__image-container {
    background: var(--k-color-gray-50);
    border: 1px solid var(--k-color-gray-500);
    border-radius: 12px;
    height: 64px;
    overflow: hidden;
    position: relative;
    width: 64px
}

.badge-card__link {
    border-radius: var(--k-badge-card-border-radius);
    bottom: 0;
    height: 100%;
    left: 0;
    outline: 0;
    position: absolute;
    right: 0;
    transition: height var(--k-transition-fast) var(--k-badge-card-lift-easing);
    z-index: var(--k-z-index-10)
}

.badge-card__link:focus {
    outline: 0
}

.badge-card__top {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    justify-content: space-between
}

.badge-card slot[name=description] {
    -webkit-line-clamp: 3;
    color: var(--k-color-white)
}

.badge-card slot[name=description], .badge-card slot[name=game-title] {
    -webkit-box-orient: vertical;
    align-self: stretch;
    display: -webkit-box;
    font-size: var(--k-font-size-xs);
    line-height: var(--k-line-height-xs);
    overflow: hidden
}

.badge-card slot[name=game-title] {
    -webkit-line-clamp: 1;
    color: var(--k-color-gray-400);
    font-weight: var(--k-font-weight-medium);
    margin-top: -1px !important
}

.badge-card slot[name=image]::slotted(img) {
    height: 100%;
    min-height: 100%;
    mix-blend-mode: luminosity;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.badge-card slot[name=info] {
    display: flex;
    margin-left: auto;
    position: relative;
    z-index: var(--k-z-index-20)
}

.badge-card slot[name=title] {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    align-self: stretch;
    color: var(--k-color-white);
    display: -webkit-box;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-sm);
    overflow: hidden
}


:host {
    display: flex
}

.card-action-button {
    --card-action-button-background: var(--k-color-gray-100);
    --card-action-button-color: var(--k-color-gray-900);
    --card-action-button-padding: 8px 12px;
    align-items: center;
    background: var(--card-action-button-background);
    border-radius: 6px;
    border-style: none;
    color: var(--card-action-button-color);
    display: inline-flex;
    font-size: var(--k-font-size-md);
    font-weight: 700;
    gap: 8px;
    line-height: var(--k-line-height-md);
    padding: var(--card-action-button-padding)
}

.card-action-button--action-more.card-action-button {
    --card-action-button-background: transparent
}

.card-action-button--action-more.card-action-button:hover {
    --card-action-button-background: var(--k-color-gray-100)
}

.card-action-button--applied {
    --card-action-button-background: var(--k-gradient-kong-45);
    --card-action-button-color: var(--k-color-white)
}

.card-action-button--mini {
    padding: 9px
}

.card-action-button--mini .card-action-button__label {
    display: none
}

.card-action-button:hover {
    --card-action-button-background: var(--k-color-gray-200)
}

.card-action-button:focus {
    outline: 0
}

.card-action-button:focus-visible {
    box-shadow: var(--k-focus-ring-kong-4)
}

.card-action-button:not(:disabled) {
    cursor: pointer
}

.card-action-button__icon {
    font-size: 22px
}

.card-action-button__icon k-icon {
    pointer-events: none
}

<
/
style >

<
style type

=
"text/css"
> :host {
    --k-info-card-height: 300px;
    --k-info-card-icon-size: 40px;
    --k-info-card-width: 300px;
    display: flex
}

:host([theme=default]) {
    --k-info-card-background: var(--k-color-white);
    --k-info-card-box-shadow-focus: var(--k-focus-ring-kong-4);
    --k-info-card-color: var(--k-color-gray-900)
}

:host([theme=reversed]) {
    --k-info-card-background: var(--k-color-gray-900);
    --k-info-card-box-shadow-focus: var(--k-focus-ring-kong-4);
    --k-info-card-color: var(--k-color-white)
}

:host([theme=kong]) {
    --k-info-card-background: var(--k-color-kong);
    --k-info-card-box-shadow-focus: var(--k-focus-ring-transp-kong-4);
    --k-info-card-color: var(--k-color-white)
}

.info-card {
    background: var(--k-info-card-background);
    border-radius: var(--k-size-6);
    box-shadow: var(--k-shadow-sm);
    color: var(--k-info-card-color);
    display: flex;
    flex-direction: column;
    gap: var(--k-size-1);
    height: var(--k-info-card-height);
    padding: var(--k-size-5);
    width: var(--k-info-card-width)
}

.info-card--hovered {
    cursor: pointer
}

.info-card--focused {
    box-shadow: var(--k-focus-ring-kong-4);
    outline: 0
}

.info-card--outline {
    background: var(--k-info-card-color);
    border: 1px solid var(--k-info-card-background);
    color: var(--k-info-card-background)
}

.info-card__icon {
    display: block;
    flex: none
}

.info-card__icon::slotted(*) {
    align-items: center;
    background: var(--k-info-card-color);
    border-radius: 50%;
    color: var(--k-info-card-background);
    display: flex;
    flex: 1;
    font-size: var(--k-font-size-xl);
    height: var(--k-info-card-icon-size);
    justify-content: center;
    margin-bottom: var(--k-size-1-5);
    overflow: hidden;
    width: var(--k-info-card-icon-size)
}

.info-card--outline .info-card__icon::slotted(*) {
    background: var(--k-info-card-background);
    color: var(--k-info-card-color)
}

.info-card__content {
    display: block;
    flex: 1;
    overflow: hidden
}

.info-card__heading {
    display: block;
    font-size: var(--k-font-size-lg);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-lg)
}

.info-card__cta {
    display: block;
    flex: none;
    margin-top: auto;
    padding-top: var(--k-size-4);
    pointer-events: none;
    width: 100%
}

.info-card__cta::slotted(*), .info-card__cta > * {
    pointer-events: none
}

:host {
    display: block
}

.check-icon {
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.check-icon--disabled {
    cursor: not-allowed
}

.check-icon__inlay {
    border-radius: var(--k-size-3);
    inset: -1px;
    position: absolute
}

:host {
    display: block
}

.checkbox-group-item {
    align-items: flex-start;
    background-color: var(--k-color-white);
    border: 1px solid var(--k-color-gray-200);
    border-radius: var(--k-size-3);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: var(--k-size-1);
    padding: var(--k-size-4);
    position: relative
}

.checkbox-group-item:hover {
    border-color: var(--k-color-gray-300)
}

.checkbox-group-item--checked {
    background-color: var(--k-color-gray-50)
}

.checkbox-group-item--checked.checkbox-group-item--sm {
    border-color: var(--k-color-kong);
    box-shadow: inset 0 0 0 1px var(--k-color-kong)
}

.checkbox-group-item--checked.checkbox-group-item--md {
    border-color: var(--k-color-gray-600);
    box-shadow: inset 0 0 0 1px var(--k-color-gray-600)
}

.checkbox-group-item:not(.checkbox-group-item--disabled).checkbox-group-item--checked:hover {
    background-color: var(--k-color-gray-50);
    border-color: var(--k-color-gray-600);
    box-shadow: inset 0 0 0 1px var(--k-color-gray-600)
}

.checkbox-group-item:not(.checkbox-group-item--disabled):focus-within {
    border-color: var(--k-color-gray-300);
    box-shadow: var(--k-focus-ring-kong-4)
}

.checkbox-group-item:not(.checkbox-group-item--disabled).checkbox-group-item--checked:focus-visible, .checkbox-group-item:not(.checkbox-group-item--disabled).checkbox-group-item--checked:focus-within {
    border-color: var(--k-color-gray-600);
    box-shadow: var(--k-focus-ring-kong-4)
}

.checkbox-group-item__indicator-icon {
    pointer-events: none
}

.checkbox-group-item:not(.checkbox-group-item--disabled).checkbox-group-item--checked:focus-visible .checkbox-group-item__indicator-icon, .checkbox-group-item:not(.checkbox-group-item--disabled).checkbox-group-item--checked:focus-within .checkbox-group-item__indicator-icon {
    border-radius: 100px;
    box-shadow: 0 0 0 1px var(--k-color-gray-900)
}

.checkbox-group-item.checkbox-group-item--disabled {
    background-color: var(--k-color-gray-50);
    border-color: var(--k-color-gray-200);
    box-shadow: inset 0 0 0 1px var(--k-color-gray-200);
    cursor: not-allowed
}

.checkbox-group-item--sm {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

.checkbox-group-item--md {
    font-size: var(--k-font-size-base);
    line-height: var(--k-line-height-base)
}

.checkbox-group-item__actions::slotted(*) {
    align-items: flex-start;
    display: flex;
    gap: var(--k-size-2)
}

.checkbox-group-item__container {
    align-items: flex-start;
    display: flex;
    gap: var(--k-size-3);
    inline-size: 100%
}

.checkbox-group-item__content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-weight: var(--k-font-weight-normal);
    gap: var(--k-size-3);
    padding: 0
}

.checkbox-group-item__inlay {
    border-radius: var(--k-size-3);
    inset: -1px;
    pointer-events: none;
    position: absolute
}

.checkbox-group-item__leading {
    display: block;
    width: 46px
}

.checkbox-group-item__text::slotted(*) {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

.checkbox-group-item--md .checkbox-group-item__text::slotted(*) {
    gap: var(--k-size-0-5)
}

.k-indicator-icon::part(icon) {
    pointer-events: none
}

:host([theme=default]) {
    --k-footer-background-color: var(--k-color-white);
    --k-footer-color: var(--k-color-kong);
    --k-footer-divider-color: var(--k-color-kong-12)
}

:host([theme=reversed]) {
    --k-footer-background-color: var(--k-color-gray-900);
    --k-footer-color: var(--k-color-white);
    --k-footer-divider-color: var(--k-color-white-12)
}

:host([theme=transparent]) {
    --k-footer-background-color: transparent;
    --k-footer-color: var(--k-color-white);
    --k-footer-divider-color: var(--k-color-white-12)
}

:host {
    color: var(--k-footer-color);
    display: flex
}

.footer-branding {
    color: var(--k-footer-color)
}

.footer-branding__icon {
    display: block;
    margin-bottom: var(--k-size-4)
}

.footer-branding__mission {
    display: flex;
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-normal);
    line-height: var(--k-line-height-md);
    width: 100%
}

@media (min-width: 80rem) {
    .footer-branding__mission {
        max-width: 480px
    }
}

:host([breakpoint=xl]) .footer-branding__mission {
    max-width: 480px
}

:host([theme=default]) {
    --k-footer-background-color: var(--k-color-white);
    --k-footer-color: var(--k-color-kong);
    --k-footer-divider-color: var(--k-color-kong-12)
}

:host([theme=reversed]) {
    --k-footer-background-color: var(--k-color-gray-900);
    --k-footer-color: var(--k-color-white);
    --k-footer-divider-color: var(--k-color-white-12)
}

:host([theme=transparent]) {
    --k-footer-background-color: transparent;
    --k-footer-color: var(--k-color-white);
    --k-footer-divider-color: var(--k-color-white-12)
}

:host {
    display: flex;
    width: 100%
}

.footer {
    background-color: var(--k-footer-background-color);
    color: var(--k-footer-color);
    display: block;
    padding-bottom: var(--k-size-11);
    padding-top: var(--k-size-11);
    width: 100%
}

.footer__inner-wrapper {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    padding-inline: var(--k-size-4)
}

@media (min-width: 64rem) {
    .footer__inner-wrapper {
        padding-inline: var(--k-size-8)
    }
}

:host([breakpoint=lg]) .footer__inner-wrapper, :host([breakpoint=xl]) .footer__inner-wrapper {
    padding-inline: var(--k-size-8)
}

.footer__main {
    border-bottom: 1px solid var(--k-footer-divider-color);
    display: grid;
    gap: var(--k-size-8);
    grid-template-columns:repeat(1, minmax(0, 1fr));
    padding-bottom: var(--k-size-8);
    width: 100%
}

@media (min-width: 64rem) {
    .footer__main {
        grid-template-columns:max-content 1fr
    }
}

:host([breakpoint=lg]) .footer__main, :host([breakpoint=xl]) .footer__main {
    grid-template-columns:max-content 1fr
}

.footer__content {
    display: grid;
    font-size: var(--k-font-size-md);
    gap: var(--k-size-8);
    grid-template-columns:repeat(2, minmax(0, 1fr));
    line-height: var(--k-line-height-md)
}

.footer__content::slotted(k-button) {
    width: 100%
}

@media (min-width: 40rem) {
    .footer__content {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

:host([breakpoint=lg]) .footer__content, :host([breakpoint=md]) .footer__content, :host([breakpoint=sm]) .footer__content, :host([breakpoint=xl]) .footer__content {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

@media (min-width: 64rem) {
    .footer__content {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

:host([breakpoint=lg]) .footer__content, :host([breakpoint=xl]) .footer__content {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

.footer__content::slotted(div) {
    grid-column: 1/-1
}

@media (min-width: 64rem) {
    .footer__content::slotted(div) {
        grid-column: auto
    }
}

:host([breakpoint=lg]) .footer__content::slotted(div), :host([breakpoint=xl]) .footer__content::slotted(div) {
    grid-column: auto
}

@media (min-width: 48rem) {
    .footer__content {
        font-size: var(--k-font-size-xl);
        line-height: var(--k-line-height-xl)
    }
}

:host([breakpoint=lg]) .footer__content, :host([breakpoint=md]) .footer__content, :host([breakpoint=xl]) .footer__content {
    font-size: var(--k-font-size-xl);
    line-height: var(--k-line-height-xl)
}

.footer__branding {
    display: flex;
    max-width: 480px;
    width: 100%
}

@media (min-width: 64rem) {
    .footer__branding {
        padding-right: 32px;
        width: 34vw
    }
}

:host([breakpoint=lg]) .footer__branding, :host([breakpoint=xl]) .footer__branding {
    padding-right: 32px;
    width: 34vw
}

@media (min-width: 90rem) {
    .footer__branding {
        width: 39vw
    }
}

.footer__meta {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--k-size-4);
    justify-content: flex-start;
    padding-top: var(--k-size-8)
}

@media (min-width: 64rem) {
    .footer__meta {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        padding-top: var(--k-size-8)
    }
}

:host([breakpoint=lg]) .footer__meta, :host([breakpoint=xl]) .footer__meta {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding-top: var(--k-size-8)
}

.footer__meta__copyright {
    color: inherit;
    display: block
}

.footer__meta__copyright a {
    color: inherit;
    text-decoration: none
}

.footer__meta__copyright a:hover {
    text-decoration: underline
}

.footer__meta__legal {
    display: flex;
    flex: none;
    width: 100%
}

@media (min-width: 48rem) {
    .footer__meta__legal {
        width: auto
    }
}

:host([breakpoint=lg]) .footer__meta__legal, :host([breakpoint=md]) .footer__meta__legal, :host([breakpoint=xl]) .footer__meta__legal {
    width: auto
}

.footer__meta__legal::slotted(*) {
    display: block;
    flex: none;
    white-space: nowrap;
    width: 100%
}

:host([theme=default]) {
    --k-footer-background-color: var(--k-color-white);
    --k-footer-color: var(--k-color-kong);
    --k-footer-divider-color: var(--k-color-kong-12)
}

:host([theme=reversed]) {
    --k-footer-background-color: var(--k-color-gray-900);
    --k-footer-color: var(--k-color-white);
    --k-footer-divider-color: var(--k-color-white-12)
}

:host([theme=transparent]) {
    --k-footer-background-color: transparent;
    --k-footer-color: var(--k-color-white);
    --k-footer-divider-color: var(--k-color-white-12)
}

:host {
    display: flex
}

.footer-header {
    align-items: center;
    color: var(--k-footer-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding-bottom: var(--k-size-4)
}

@media (min-width: 48rem) {
    .footer-header {
        padding-bottom: var(--k-size-16)
    }
}

:host([breakpoint=lg]) .footer-header, :host([breakpoint=md]) .footer-header, :host([breakpoint=xl]) .footer-header {
    padding-bottom: var(--k-size-16)
}

.footer-header__heading {
    display: flex;
    font-size: var(--k-font-size-display-sm);
    font-size: var(--k-font-size-display-xs);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-display-sm);
    line-height: 1.25;
    margin-bottom: 0;
    margin-bottom: var(--k-size-2);
    margin-top: 0;
    text-align: center
}

@media (min-width: 48rem) {
    .footer-header__heading {
        margin-bottom: var(--k-size-4)
    }
}

:host([breakpoint=lg]) .footer-header__heading, :host([breakpoint=md]) .footer-header__heading, :host([breakpoint=xl]) .footer-header__heading {
    margin-bottom: var(--k-size-4)
}

@media (min-width: 64rem) {
    .footer-header__heading {
        max-width: 960px
    }
}

:host([breakpoint=lg]) .footer-header__heading, :host([breakpoint=xl]) .footer-header__heading {
    max-width: 960px
}

.footer-header__subheading {
    display: flex;
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md);
    text-align: center
}

@media (min-width: 64rem) {
    .footer-header__subheading {
        font-size: var(--k-font-size-xl);
        line-height: var(--k-line-height-xl);
        max-width: 960px
    }
}

:host([breakpoint=lg]) .footer-header__subheading, :host([breakpoint=xl]) .footer-header__subheading {
    font-size: var(--k-font-size-xl);
    line-height: var(--k-line-height-xl);
    max-width: 960px
}

:host([theme=default]) {
    --k-footer-links-color: var(--k-color-kong)
}

:host([theme=reversed]) {
    --k-footer-links-color: var(--k-color-white)
}

:host([theme=transparent]) {
    --k-footer-links-color: var(--k-color-white)
}

.footer-links {
    color: var(--k-footer-links-color);
    display: flex;
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-medium);
    gap: 1rem;
    line-height: var(--k-line-height-md)
}

.footer-links__heading {
    align-items: center;
    display: flex;
    margin: 0;
    position: relative
}

.footer-links__heading:before {
    background: var(--k-footer-links-color);
    block-size: 10px;
    border-radius: 50%;
    content: "";
    display: inline-block;
    inline-size: 10px;
    inset-block-start: 5px;
    inset-inline-start: 0;
    margin-inline-end: 5px
}

.footer-links__links {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    padding-block: 0;
    padding-inline: 0
}

.footer-links--column {
    align-items: flex-start;
    flex-direction: column;
    inline-size: 150px
}

.footer-links--column .footer-links__links {
    flex-direction: column
}

.footer-links--row {
    align-items: center;
    flex-direction: row
}

.footer-links--row .footer-links__links {
    flex-direction: row
}

.footer-links slot, .footer-links slot a, .footer-links slot::slotted(a) {
    color: inherit;
    font-weight: var(--k-font-weight-medium);
    text-decoration: none
}

.footer-links slot a:hover, .footer-links slot::slotted(a:hover) {
    text-decoration: underline !important
}

.form-checkbox__error {
    color: var(--k-color-error-500)
}

.form-checkbox__error, .form-checkbox__hint {
    display: flex;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

.form-checkbox__hint {
    color: var(--k-color-gray-500)
}

.form-checkbox__label {
    color: var(--k-color-gray-900);
    display: flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-sm)
}

:host {
    display: flex
}

.form-checkbox {
    align-items: flex-start;
    display: flex;
    gap: var(--k-size-2)
}

.form-checkbox__container {
    cursor: pointer;
    display: block;
    font-size: 22px;
    height: 16px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 16px
}

.form-checkbox--md .form-checkbox__container {
    height: 20px;
    width: 20px
}

.form-checkbox__checkmark {
    background-color: var(--k-color-white);
    border-color: var(--k-color-gray-900);
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    color: var(--k-color-gray-900);
    height: 16px;
    left: 0;
    margin-top: 2px;
    position: absolute;
    top: 0;
    width: 16px
}

.form-checkbox__checkmark svg {
    display: none;
    height: auto;
    width: 100%
}

.form-checkbox--md .form-checkbox__checkmark {
    height: 20px;
    width: 20px
}

.form-checkbox--checked .form-checkbox__checkmark svg {
    display: block
}

.form-checkbox--disabled .form-checkbox__checkmark {
    background-color: var(--k-color-gray-100) !important;
    border-color: var(--k-color-gray-400) !important;
    color: var(--k-color-gray-400) !important;
    cursor: not-allowed
}

.form-checkbox--checked:not(.form-checkbox--indeterminate) .form-checkbox__checkmark {
    background-color: var(--k-color-gray-900);
    color: var(--k-color-white)
}

.form-checkbox--checked.form-checkbox--hovered:not(.form-checkbox--indeterminate) .form-checkbox__checkmark {
    background-color: var(--k-color-gray-600);
    color: var(--k-color-white)
}

.form-checkbox--focused .form-checkbox__checkmark {
    border-color: transparent;
    box-shadow: var(--k-focus-ring-kong-4)
}

.form-checkbox__input {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

.form-checkbox--md .form-checkbox__label {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.form-checkbox--disabled .form-checkbox__label {
    color: var(--k-color-gray-500)
}

.form-checkbox__hint {
    color: var(--k-color-gray-900)
}

.form-checkbox--md .form-checkbox__hint {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.form-checkbox--disabled .form-checkbox__hint {
    color: var(--k-color-gray-500)
}

.form-checkbox--md .form-checkbox__error {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.form-error {
    color: var(--k-color-error-500);
    display: flex;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

:host {
    display: flex
}

:host {
    --k-form-file-input-background-color: var(--k-color-white);
    --k-form-file-input-background-color-disabled: var(--k-color-gray-50);
    --k-form-file-input-background-color-hovered: var(--k-color-gray-25);
    --k-form-file-input-color: var(--k-color-gray-900);
    --k-form-file-input-color-disabled: var(--k-color-gray-25);
    --k-form-file-input-color-hovered: var(--k-color-gray-50);
    --k-form-file-input-border-color: var(--k-color-gray-300);
    --k-form-file-input-border-radius: var(--k-size-1-5);
    display: flex;
    width: 100%
}

.form-file-input {
    align-items: center;
    background-color: var(--k-color-white);
    border-color: var(--k-color-gray-300);
    border-radius: var(--k-size-1-5);
    border-style: solid;
    border-width: 1px;
    color: var(--k-color-gray-600);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm);
    padding: var(--k-size-4) var(--k-size-6);
    width: 100%
}

.form-file-input strong {
    color: var(--k-color-gray-900)
}

.form-file-input__spinner {
    display: block;
    margin-left: auto
}

.form-file-input--has-file {
    flex-direction: row;
    padding: var(--k-size-2-5) var(--k-size-3-5)
}

.form-file-input--hovered {
    background-color: var(--k-color-gray-25)
}

.form-file-input--focused:not(.form-file-input--disabled) {
    box-shadow: var(--k-focus-ring-kong-4);
    outline: 0
}

.form-file-input--disabled {
    background-color: var(--k-color-gray-50);
    cursor: not-allowed
}

.form-file-input--disabled, .form-file-input--disabled strong {
    color: var(--k-color-gray-500)
}

.form-file-input__preview {
    display: block;
    margin-bottom: var(--k-size-3)
}

.form-file-input--has-file .form-file-input__preview {
    margin-bottom: 0;
    margin-right: var(--k-size-3)
}

.form-file-input__input {
    height: 0;
    position: absolute;
    width: 0
}

.form-file-input__meta {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.form-file-input--has-file .form-file-input__meta {
    align-items: flex-start;
    justify-content: flex-start
}


:host {
    display: flex
}

.form-input {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md);
    width: 100%
}

.form-input__container {
    align-items: flex-start;
    background-color: var(--k-color-white);
    border: 1px solid var(--k-color-gray-300);
    border-radius: var(--k-size-1-5);
    display: flex;
    min-height: 40px;
    padding: var(--k-size-2) var(--k-size-4)
}

.form-input--disabled .form-input__container {
    border-style: dashed
}

.form-input--error .form-input__container {
    border-color: var(--k-color-error-500) !important
}

.form-input--focused .form-input__container {
    outline: 1px solid var(--k-color-gray-900);
    outline-offset: -1px
}

.form-input--error.form-input--focused .form-input__container {
    outline: 3px solid var(--k-color-error-500)
}

.form-input__container input {
    background: inherit;
    border: none;
    box-shadow: none;
    color: var(--k-color-gray-900);
    flex: 1;
    font-family: var(--k-font-sans);
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md);
    max-width: 100%;
    padding: 0;
    width: 100%
}

.form-input--focused .form-input__container input, .form-input__container input:focus {
    outline: 0
}

.form-input__container input::-moz-placeholder {
    color: var(--k-color-gray-500)
}

.form-input__container input::placeholder {
    color: var(--k-color-gray-500)
}

.form-input__label::slotted(*), .form-input__label > * {
    margin-bottom: var(--k-size-1)
}

.form-input__meta::slotted(*), .form-input__meta > * {
    margin-top: var(--k-size-1)
}

.form-input__leading, .form-input__trailing, .form-input__trailing__error {
    display: flex
}

.form-input__trailing__hint {
    cursor: help;
    display: flex
}

.form-hint-icon {
    cursor: help
}

.form-hint {
    color: var(--k-color-gray-500);
    display: flex;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

:host {
    display: flex
}

.form-label {
    color: var(--k-color-gray-900);
    display: flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-sm)
}

:host {
    display: flex
}

.form-radio__error {
    color: var(--k-color-error-500)
}

.form-radio__error, .form-radio__hint {
    display: flex;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

.form-radio__hint {
    color: var(--k-color-gray-500)
}

.form-radio__label {
    color: var(--k-color-gray-900);
    display: flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-sm)
}

:host {
    display: flex
}

.form-radio {
    align-items: flex-start;
    display: flex;
    gap: var(--k-size-2)
}

.form-radio__container {
    cursor: pointer;
    display: block;
    font-size: 22px;
    height: 16px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 16px
}

.form-radio--md .form-radio__container {
    height: 20px;
    width: 20px
}

.form-radio__radio {
    background-color: var(--k-color-white);
    border-color: var(--k-color-gray-900);
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    color: var(--k-color-gray-900);
    height: 16px;
    left: 0;
    position: absolute;
    top: 0;
    width: 16px
}

.form-radio__radio:after {
    background-color: currentColor;
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: none;
    height: 6px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 6px
}

.form-radio--md .form-radio__radio {
    height: 20px;
    width: 20px
}

.form-radio--md .form-radio__radio:after {
    height: 8px;
    width: 8px
}

.form-radio--checked .form-radio__radio:after {
    display: block
}

.form-radio--disabled .form-radio__radio {
    background-color: var(--k-color-gray-100) !important;
    border-color: var(--k-color-gray-400) !important;
    color: var(--k-color-gray-400) !important;
    cursor: not-allowed
}

.form-radio--focused .form-radio__radio {
    border-color: transparent;
    box-shadow: var(--k-focus-ring-kong-4)
}

.form-radio__input {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

.form-radio--md .form-radio__label {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.form-radio--disabled .form-radio__label {
    color: var(--k-color-gray-500)
}

.form-radio--md .form-radio__hint {
    color: var(--k-color-gray-900);
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.form-radio--disabled .form-radio__hint {
    color: var(--k-color-gray-500)
}

.form-radio--md .form-radio__error {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

<
/
style >

<
style type

=
"text/css"
> :host {
    display: flex
}

.form-select {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md);
    width: 100%
}

.form-select__container {
    align-items: flex-start;
    background-color: var(--k-color-white);
    border: 1px solid var(--k-color-gray-300);
    border-radius: var(--k-size-1-5);
    display: flex;
    justify-content: space-between;
    min-height: 40px;
    overflow: hidden;
    padding-right: var(--k-size-4)
}

.form-field--disabled .form-select__container {
    border-style: dashed
}

.form-field--error .form-select__container {
    border-color: var(--k-color-error-500) !important
}

.form-field--focused .form-select__container {
    outline: 1px solid var(--k-color-gray-900);
    outline-offset: -1px
}

.form-field--error.form-field--focused .form-select__container {
    outline: 3px solid var(--k-color-error-500)
}

.form-select__container select {
    border: none;
    box-shadow: none;
    color: var(--k-color-gray-900);
    flex: 1;
    font-family: var(--k-font-sans);
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md);
    max-width: 100%;
    padding: var(--k-size-2) 0 var(--k-size-2) var(--k-size-4);
    width: 100%
}

.form-field--focused .form-select__container select, .form-select__container select:focus {
    outline: 0
}

.form-select__label::slotted(*), .form-select__label > * {
    margin-bottom: var(--k-size-1)
}

.form-select__meta::slotted(*), .form-select__meta > * {
    margin-top: var(--k-size-1)
}

.form-select__leading, .form-select__trailing {
    display: flex;
    flex: 0
}

:host {
    display: flex
}

.form-textarea {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md);
    width: 100%
}

.form-textarea__container {
    align-items: flex-start;
    background-color: var(--k-color-white);
    border: 1px solid var(--k-color-gray-300);
    border-radius: var(--k-size-1-5);
    display: flex;
    min-height: 40px;
    padding: var(--k-size-2) var(--k-size-4)
}

.form-field--disabled .form-textarea__container {
    border-style: dashed
}

.form-field--error .form-textarea__container {
    border-color: var(--k-color-error-500) !important
}

.form-field--focused .form-textarea__container {
    outline: 1px solid var(--k-color-gray-900);
    outline-offset: -1px
}

.form-field--error.form-field--focused .form-textarea__container {
    outline: 3px solid var(--k-color-error-500)
}

.form-textarea__container textarea {
    background: inherit;
    border: none;
    box-shadow: none;
    color: var(--k-color-gray-900);
    flex: 1;
    font-family: var(--k-font-sans);
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md);
    max-width: 100%;
    padding: 0;
    resize: none;
    width: 100%
}

.form-field--focused .form-textarea__container textarea, .form-textarea__container textarea:focus {
    outline: 0
}

.form-textarea__container textarea::-moz-placeholder {
    color: var(--k-color-gray-500)
}

.form-textarea__container textarea::placeholder {
    color: var(--k-color-gray-500)
}

.form-textarea__label::slotted(*), .form-textarea__label > * {
    margin-bottom: var(--k-size-1)
}

.form-textarea__meta::slotted(*), .form-textarea__meta > * {
    margin-top: var(--k-size-1)
}

.form-textarea__leading, .form-textarea__trailing, .form-textarea__trailing__error {
    display: flex
}

.form-textarea__trailing__hint {
    cursor: help;
    display: flex
}

.form-toggle__error {
    color: var(--k-color-error-500)
}

.form-toggle__error, .form-toggle__hint {
    display: flex;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

.form-toggle__hint {
    color: var(--k-color-gray-500)
}

.form-toggle__label {
    color: var(--k-color-gray-900);
    display: flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-sm)
}

:host {
    display: flex
}

.form-toggle {
    align-items: flex-start;
    display: flex;
    gap: var(--k-size-2)
}

.form-toggle__container {
    cursor: pointer;
    display: block;
    font-size: 22px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.form-toggle__toggle {
    background-color: var(--k-color-white);
    border: 1px solid var(--k-color-gray-900);
    border-radius: 12px;
    display: block;
    height: 18px;
    position: relative;
    width: 35px
}

.form-toggle__toggle:after {
    background-color: var(--k-color-gray-900);
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 10px;
    left: 4px;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    top: 0;
    width: 10px
}

.form-toggle--md .form-toggle__toggle {
    height: 22px;
    width: 44px
}

.form-toggle--md .form-toggle__toggle:after {
    height: 14px;
    width: 14px
}

.form-toggle--checked .form-toggle__toggle {
    background-color: var(--k-color-gray-900)
}

.form-toggle--checked .form-toggle__toggle:after {
    background-color: var(--k-color-white);
    left: unset;
    right: 4px
}

.form-toggle--disabled .form-toggle__toggle {
    background-color: var(--k-color-gray-100) !important;
    border-color: var(--k-color-gray-400) !important;
    color: var(--k-color-gray-400) !important;
    cursor: not-allowed
}

.form-toggle--disabled .form-toggle__toggle:after {
    background-color: var(--k-color-gray-400)
}

.form-toggle__toggle .form-toggle--checked {
    background-color: var(--k-color-gray-900);
    color: var(--k-color-white)
}

.form-toggle--hovered:not(.form-toggle--checked) .form-toggle__toggle {
    border-color: var(--k-color-gray-600)
}

.form-toggle--hovered:not(.form-toggle--checked) .form-toggle__toggle:after {
    background-color: var(--k-color-gray-600)
}

.form-toggle--checked.form-toggle--hovered .form-toggle__toggle {
    background-color: var(--k-color-gray-600);
    color: var(--k-color-white)
}

.form-toggle--focused .form-toggle__toggle {
    border-color: transparent;
    box-shadow: var(--k-focus-ring-kong-4)
}

.form-toggle__input {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

.form-toggle--md .form-toggle__label {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.form-toggle--disabled .form-toggle__label {
    color: var(--k-color-gray-500)
}

.form-toggle__hint {
    color: var(--k-color-gray-900)
}

.form-toggle--md .form-toggle__hint {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.form-toggle--disabled .form-toggle__hint {
    color: var(--k-color-gray-500)
}

.form-toggle--md .form-toggle__error {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

:host {
    --k-challenge-badge-background: var(--k-color-white);
    --k-challenge-badge-border: 1px solid var(--k-color-sheer-cool-black-50);
    --k-challenge-badge-color: var(--k-color-gray-900);
    --k-challenge-badge-content-padding: 12px;
    --k-challenge-badge-image-background: var(--k-color-gray-800);
    --k-challenge-badge-image-border: 1px solid var(--k-color-sheer-cool-black-100);
    --k-challenge-badge-lift: 4px;
    display: flex
}

.challenge-badge {
    align-items: flex-start;
    color: var(--k-challenge-badge-color);
    display: flex;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm);
    max-width: 480px;
    min-width: 260px;
    position: relative;
    width: 100%
}

@media (min-width: 64rem) {
    .challenge-badge {
        width: 480px
    }
}

:host([breakpoint=lg]) .challenge-badge, :host([breakpoint=xl]) .challenge-badge {
    width: 480px
}

@media (hover: hover) and (pointer: fine) {
    .challenge-badge:has(:hover) .challenge-badge__content {
        box-shadow: var(--k-shadow-xl);
        transform: translateY(calc(var(--k-challenge-badge-lift) * -1))
    }

    .challenge-badge:has(:hover) .challenge-badge__link {
        box-shadow: none;
        height: calc(100% + var(--k-challenge-badge-lift) + 2px)
    }
}

.challenge-badge:has(:focus-visible) .challenge-badge__content:before {
    box-shadow: var(--k-focus-ring-kong-4)
}

.challenge-badge k-modal-button {
    z-index: var(--k-z-index-20)
}

.challenge-badge--celebration {
    --k-challenge-badge-content-padding: 12px 6px 12px 12px
}

@media (min-width: 64rem) {
    .challenge-badge--celebration {
        --k-challenge-badge-content-padding: 12px
    }
}

:host([breakpoint=lg]) .challenge-badge--celebration, :host([breakpoint=xl]) .challenge-badge--celebration {
    --k-challenge-badge-content-padding: 12px
}

.challenge-badge--theme-reversed {
    --k-challenge-badge-background: var(--k-color-gray-800);
    --k-challenge-badge-color: var(--k-color-white)
}

.challenge-badge--theme-reversed k-modal-button::part(base) {
    --action-button-border: 1px solid var(--k-color-gray-700);
    --action-button-background: var(--k-color-gray-800)
}

.challenge-badge__content {
    align-items: flex-start;
    background: var(--k-challenge-badge-background);
    border: var(--k-challenge-badge-border);
    border-radius: var(--k-size-6);
    box-shadow: var(--k-shadow-lg);
    display: flex;
    position: relative;
    transform: translateY(0);
    transition-delay: 50ms;
    transition-duration: var(--k-transition-fast);
    transition-property: box-shadow transform;
    width: 100%
}

.challenge-badge__content:before {
    border-radius: var(--k-size-6);
    content: "";
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%
}

.challenge-badge__content--primary {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    padding: var(--k-challenge-badge-content-padding);
    width: 100%
}

@media (min-width: 64rem) {
    .challenge-badge__content--primary {
        gap: 16px
    }
}

:host([breakpoint=lg]) .challenge-badge__content--primary, :host([breakpoint=xl]) .challenge-badge__content--primary {
    gap: 16px
}

.challenge-badge__content--text {
    align-items: flex-start;
    flex: 1 0 0;
    flex-direction: column;
    gap: 4px;
    text-align: left
}

.challenge-badge__content--text, .challenge-badge__cta {
    align-self: stretch;
    display: flex;
    justify-content: center
}

.challenge-badge__cta {
    align-items: center;
    gap: 10px
}

.challenge-badge__cta * {
    position: relative;
    z-index: var(--k-z-index-20)
}

.challenge-badge__link {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
    z-index: var(--k-z-index-10)
}

.challenge-badge__link:focus {
    outline: 0
}

.challenge-badge__link:focus-visible {
    outline: 0
}

.challenge-badge__name {
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-bold);
    line-height: var(--k-line-height-md)
}

.challenge-badge slot:not([name]) {
    align-self: stretch;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-normal);
    line-height: var(--k-line-height-sm)
}

@media (min-width: 64rem) {
    .challenge-badge slot:not([name]) {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }
}

:host([breakpoint=lg]) .challenge-badge slot:not([name]), :host([breakpoint=xl]) .challenge-badge slot:not([name]) {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.challenge-badge slot[name=heading] {
    align-self: stretch;
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-bold);
    line-height: var(--k-line-height-md);
    text-align: left
}

@media (min-width: 64rem) {
    .challenge-badge slot[name=heading] {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }
}

:host([breakpoint=lg]) .challenge-badge slot[name=heading], :host([breakpoint=xl]) .challenge-badge slot[name=heading] {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.challenge-badge slot[name=image] {
    align-items: center;
    border: var(--k-challenge-badge-image-border);
    border-radius: 14px;
    display: flex;
    flex-shrink: 0;
    height: 64px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 64px
}

@media (min-width: 64rem) {
    .challenge-badge slot[name=image] {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        height: 96px;
        justify-content: center;
        width: 96px
    }
}

:host([breakpoint=lg]) .challenge-badge slot[name=image], :host([breakpoint=xl]) .challenge-badge slot[name=image] {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 96px;
    justify-content: center;
    width: 96px
}

.challenge-badge slot[name=image]::slotted(img) {
    background: var(--k-challenge-badge-image-background);
    height: 100% !important;
    min-height: 100%;
    min-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.challenge-badge slot[name=share] {
    align-items: flex-end;
    align-self: stretch;
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    padding-right: 12px
}

.challenge-badge slot[name=share]::slotted(img) {
    flex-shrink: 0
}

:host {
    --k-challenge-header-content-background: var(--k-color-gray-50);
    display: flex
}

.challenge-header {
    align-items: flex-end;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
    position: relative;
    width: 100%
}

@media (min-width: 64rem) {
    .challenge-header {
        flex-direction: row;
        justify-content: center;
        padding-bottom: 0
    }

    .challenge-header:before {
        background: var(--k-challenge-header-content-background);
        border-radius: 12px;
        content: "";
        display: block;
        flex-shrink: 0;
        height: 68px;
        position: absolute;
        top: 148px;
        width: 100%;
        z-index: -1
    }
}

:host([breakpoint=lg]) .challenge-header, :host([breakpoint=xl]) .challenge-header {
    flex-direction: row;
    justify-content: center;
    padding-bottom: 0
}

:host([breakpoint=lg]) .challenge-header:before, :host([breakpoint=xl]) .challenge-header:before {
    background: var(--k-challenge-header-content-background);
    border-radius: 12px;
    content: "";
    display: block;
    flex-shrink: 0;
    height: 68px;
    position: absolute;
    top: 148px;
    width: 100%;
    z-index: -1
}

.challenge-header--shiny {
    --k-challenge-header-content-background: var(--k-color-yellow-50)
}

.challenge-header__content {
    align-self: stretch;
    background: var(--k-challenge-header-content-background);
    border-radius: 0 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    margin: 0 1rem;
    padding-bottom: 12px
}

@media (min-width: 64rem) {
    .challenge-header__content {
        align-items: center;
        background: 0 0;
        border-radius: 0;
        flex: 1 0 0;
        gap: 0;
        justify-content: flex-end;
        margin: 0;
        max-width: 420px;
        padding-bottom: 0
    }
}

:host([breakpoint=lg]) .challenge-header__content, :host([breakpoint=xl]) .challenge-header__content {
    align-items: center;
    background: 0 0;
    border-radius: 0;
    flex: 1 0 0;
    gap: 0;
    justify-content: flex-end;
    margin: 0;
    max-width: 420px;
    padding-bottom: 0
}

.challenge-header__image {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1rem
}

@media (min-width: 64rem) {
    .challenge-header__image {
        align-items: center;
        gap: -24px;
        height: 216px;
        padding: 0;
        width: 220px
    }
}

:host([breakpoint=lg]) .challenge-header__image, :host([breakpoint=xl]) .challenge-header__image {
    align-items: center;
    gap: -24px;
    height: 216px;
    padding: 0;
    width: 220px
}

.challenge-header__kongpanion-head {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0 12px
}

@media (min-width: 64rem) {
    .challenge-header__kongpanion-head {
        padding: 0
    }
}

:host([breakpoint=lg]) .challenge-header__kongpanion-head, :host([breakpoint=xl]) .challenge-header__kongpanion-head {
    padding: 0
}

.challenge-header__kongpanion-info {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center
}

@media (min-width: 64rem) {
    .challenge-header__kongpanion-info {
        flex: 1 0 0;
        gap: 4px;
        padding: 0 32px 0 0
    }
}

:host([breakpoint=lg]) .challenge-header__kongpanion-info, :host([breakpoint=xl]) .challenge-header__kongpanion-info {
    flex: 1 0 0;
    gap: 4px;
    padding: 0 32px 0 0
}

.challenge-header__shadow {
    align-items: center;
    align-self: stretch;
    background: var(--k-challenge-header-content-background);
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 51px;
    justify-content: center;
    margin-top: -24px;
    padding: 1rem 0 0
}

@media (min-width: 64rem) {
    .challenge-header__shadow {
        background: 0 0;
        border-radius: 12px 0 0 12px;
        flex-shrink: 0;
        height: 68px;
        padding: 0
    }
}

:host([breakpoint=lg]) .challenge-header__shadow, :host([breakpoint=xl]) .challenge-header__shadow {
    background: 0 0;
    border-radius: 12px 0 0 12px;
    flex-shrink: 0;
    height: 68px;
    padding: 0
}

.challenge-header__shadow svg {
    fill: var(--k-color-sheer-black-100);
    filter: blur(4px);
    flex-shrink: 0
}

.challenge-header__week {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
    margin-bottom: 12px;
    margin-top: 12px
}

@media (min-width: 64rem) {
    .challenge-header__week {
        align-items: center;
        flex: 1 0 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        max-width: 740px;
        min-width: 480px
    }
}

:host([breakpoint=lg]) .challenge-header__week, :host([breakpoint=xl]) .challenge-header__week {
    align-items: center;
    flex: 1 0 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    max-width: 740px;
    min-width: 480px
}

.challenge-header__weekdays {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 9px;
    padding-top: 9px;
    scroll-behavior: smooth;
    scrollbar-width: none
}

.challenge-header__weekdays::-webkit-scrollbar {
    display: none
}

@media (min-width: 64rem) {
    .challenge-header__weekdays {
        border-radius: 0 12px 12px 0;
        height: 68px;
        justify-content: center;
        overflow-x: visible;
        padding-bottom: 0;
        padding-top: 0
    }
}

:host([breakpoint=lg]) .challenge-header__weekdays, :host([breakpoint=xl]) .challenge-header__weekdays {
    border-radius: 0 12px 12px 0;
    height: 68px;
    justify-content: center;
    overflow-x: visible;
    padding-bottom: 0;
    padding-top: 0
}

.challenge-header__weekdays-inner {
    align-items: center;
    align-self: stretch;
    background: var(--k-challenge-header-content-background);
    border-radius: 12px;
    display: flex;
    flex: 1;
    margin: 0 1rem;
    padding-bottom: 9px;
    padding-top: 9px
}

@media (min-width: 64rem) {
    .challenge-header__weekdays-inner {
        background: 0 0;
        border-radius: 0 12px 12px 0;
        height: 68px;
        margin: 0;
        max-width: 740px;
        overflow-x: visible;
        padding: 0;
        width: 100%
    }
}

:host([breakpoint=lg]) .challenge-header__weekdays-inner, :host([breakpoint=xl]) .challenge-header__weekdays-inner {
    background: 0 0;
    border-radius: 0 12px 12px 0;
    height: 68px;
    margin: 0;
    max-width: 740px;
    overflow-x: visible;
    padding: 0;
    width: 100%
}

.challenge-header slot[name=card]::slotted(*) {
    --k-challenge-badge-image-background: var(--k-color-white);
    --k-challenge-badge-image-border: 1px solid var(--k-color-sheer-cool-black-100);
    max-width: 480px;
    padding: 0 1rem
}

@media (min-width: 64rem) {
    .challenge-header slot[name=card]::slotted(*) {
        padding: 0
    }
}

:host([breakpoint=lg]) .challenge-header slot[name=card]::slotted(*), :host([breakpoint=xl]) .challenge-header slot[name=card]::slotted(*) {
    padding: 0
}

.challenge-header slot[name=edition]::slotted(*) {
    align-items: flex-start;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px
}

.challenge-header slot[name=heading]::slotted(*) {
    align-items: center;
    align-self: stretch;
    display: flex;
    font-size: var(--k-font-size-display-xs);
    font-weight: var(--k-font-weight-bold);
    gap: 6px;
    line-height: var(--k-line-height-display-xs);
    word-break: break-word
}

@media (min-width: 64rem) {
    .challenge-header slot[name=heading]::slotted(*) {
        gap: 8px
    }
}

:host([breakpoint=lg]) .challenge-header slot[name=heading]::slotted(*), :host([breakpoint=xl]) .challenge-header slot[name=heading]::slotted(*) {
    gap: 8px
}

@media (min-width: 64rem) {
    .challenge-header slot[name=heading]::slotted(*) {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: var(--k-color-gray-900);
        display: -webkit-box;
        font-size: var(--k-font-size-display-sm);
        line-height: var(--k-line-height-display-sm);
        overflow: hidden
    }
}

:host([breakpoint=lg]) .challenge-header slot[name=heading]::slotted(*), :host([breakpoint=xl]) .challenge-header slot[name=heading]::slotted(*) {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--k-color-gray-900);
    display: -webkit-box;
    font-size: var(--k-font-size-display-sm);
    line-height: var(--k-line-height-display-sm);
    overflow: hidden
}

.challenge-header slot[name=kongpanion] {
    align-items: center;
    display: flex;
    height: 170px;
    justify-content: center;
    width: 170px
}

@media (min-width: 64rem) {
    .challenge-header slot[name=kongpanion] {
        flex-shrink: 0
    }
}

:host([breakpoint=lg]) .challenge-header slot[name=kongpanion], :host([breakpoint=xl]) .challenge-header slot[name=kongpanion] {
    flex-shrink: 0
}

.challenge-header slot[name=message] {
    align-self: stretch;
    border-top: 1px solid var(--k-color-gray-200);
    color: var(--k-color-gray-900);
    display: flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-sm);
    margin: 0 12px;
    padding-top: 6px
}

.challenge-header slot[name=message]::slotted(*) {
    align-items: center;
    align-self: stretch;
    display: flex
}

@media (min-width: 64rem) {
    .challenge-header slot[name=message] {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        border-top: none;
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        padding: 0
    }

    .challenge-header slot[name=message]::slotted(*) {
        gap: 72px;
        height: 68px;
        padding: 0 32px 0 0
    }
}

:host([breakpoint=lg]) .challenge-header slot[name=message], :host([breakpoint=xl]) .challenge-header slot[name=message] {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    border-top: none;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    padding: 0
}

:host([breakpoint=lg]) .challenge-header slot[name=message]::slotted(*), :host([breakpoint=xl]) .challenge-header slot[name=message]::slotted(*) {
    gap: 72px;
    height: 68px;
    padding: 0 32px 0 0
}

.challenge-header slot[name=subheading] {
    display: flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-normal);
    line-height: var(--k-line-height-sm);
    padding: 0 12px
}

@media (min-width: 64rem) {
    .challenge-header slot[name=subheading] {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: var(--k-color-gray-900);
        display: -webkit-box;
        overflow: hidden;
        padding: 0
    }
}

:host([breakpoint=lg]) .challenge-header slot[name=subheading], :host([breakpoint=xl]) .challenge-header slot[name=subheading] {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--k-color-gray-900);
    display: -webkit-box;
    overflow: hidden;
    padding: 0
}

.challenge-header slot[name=weekday]::slotted(*) {
    flex: 1
}

.challenge-header slot[name=weekday]::slotted(:first-of-type) {
    --k-challenge-weekday-tile-border-left: none
}

@media (min-width: 64rem) {
    .challenge-header slot[name=weekday]::slotted(:first-of-type) {
        --k-challenge-weekday-tile-border-left: 1px solid var(--k-color-gray-200)
    }
}

:host([breakpoint=lg]) .challenge-header slot[name=weekday]::slotted(:first-of-type), :host([breakpoint=xl]) .challenge-header slot[name=weekday]::slotted(:first-of-type) {
    --k-challenge-weekday-tile-border-left: 1px solid var(--k-color-gray-200)
}

.turbo-progress-bar {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    height: 3px;
    background: #0076ff;
    z-index: 2147483647;
    transition: width 300ms ease-out,
    opacity 150ms 150ms ease-in;
    transform: translate3d(0, 0, 0);
}


:host {
    --k-challenge-weekday-tile-background-hover: var(--k-color-gray-100);
    --k-challenge-weekday-tile-background: transparent;
    --k-challenge-weekday-tile-border-left: 1px solid var(--k-color-gray-200);
    --k-challenge-weekday-transition-timing-bounce-sm: cubic-bezier(0.4, 2.3, 0.8, 0.93);
    display: flex
}

.challenge-weekday {
    align-items: center;
    border-left: var(--k-challenge-weekday-tile-border-left);
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
    gap: -4px;
    padding: 0 8px;
    position: relative
}

.challenge-weekday--completed .challenge-weekday__tile {
    gap: -2px;
    padding-bottom: 2px
}

.challenge-weekday--shiny {
    --k-challenge-weekday-tile-background: var(--k-color-yellow-50);
    --k-challenge-weekday-tile-background-hover: var(--k-color-yellow-200);
    --k-challenge-weekday-tile-border-left: 1px solid var(--k-color-yellow-200)
}

@media (min-width: 64rem) {
    .challenge-weekday--shiny {
        --k-challenge-weekday-tile-background: var(--k-color-yellow-50)
    }
}

:host([breakpoint=lg]) .challenge-weekday--shiny, :host([breakpoint=xl]) .challenge-weekday--shiny {
    --k-challenge-weekday-tile-background: var(--k-color-yellow-50)
}

.challenge-weekday--today {
    --k-challenge-weekday-tile-background-hover: var(--k-color-gray-50);
    --k-challenge-weekday-tile-background: var(--k-color-gray-50);
    --k-challenge-weekday-tile-border-left: none;
    border-radius: 8px;
    flex-shrink: 0;
    height: 50px;
    justify-content: center;
    padding: 0 10px
}

.challenge-weekday--today.challenge-weekday--shiny {
    --k-challenge-weekday-tile-background-hover: var(--k-color-yellow-50);
    --k-challenge-weekday-tile-background: var(--k-color-yellow-50)
}

.challenge-weekday--today .challenge-weekday__link {
    margin-top: -12px;
    padding: 37px 0
}

.challenge-weekday--today .challenge-weekday__tile {
    align-items: center;
    align-self: stretch;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: -4px;
    padding: 7px 6px 8px;
    position: relative;
    transform-style: preserve-3d
}

.challenge-weekday--today .challenge-weekday__tile:before {
    background: var(--k-gradient-primary-glow);
    border-radius: 12px;
    content: "";
    filter: blur(0);
    inset: -5px;
    pointer-events: none;
    position: absolute;
    transform: translateZ(-1px);
    transition: inset .18s var(--k-challenge-weekday-transition-timing-bounce-sm)
}

@media (hover: hover) and (pointer: fine) {
    .challenge-weekday--today:has(a):hover .challenge-weekday__tile:before {
        inset: -7px
    }
}

@media (hover: hover) and (pointer: fine) {
    .challenge-weekday:has(a:hover) .challenge-weekday__tile {
        background: var(--k-challenge-weekday-tile-background-hover)
    }
}

.challenge-weekday__day {
    color: var(--k-color-gray-900);
    font-size: var(--k-font-size-display-xs);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-display-xs);
    text-align: center
}

.challenge-weekday__link {
    inset: 0;
    position: absolute;
    z-index: var(--k-z-index-20)
}

.challenge-weekday__link:focus {
    outline: 0
}

.challenge-weekday__link:focus-visible {
    border-radius: 6px;
    box-shadow: var(--k-focus-ring-kong-4);
    outline: 0
}

.challenge-weekday__shadow {
    display: none
}

.challenge-weekday__tile {
    align-items: center;
    align-self: stretch;
    background: var(--k-challenge-weekday-tile-background);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: -4px;
    position: relative;
    z-index: var(--k-z-index-10)
}

.challenge-weekday slot[name=label] {
    color: var(--k-color-gray-500);
    display: flex;
    flex-direction: column;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    height: 22px;
    justify-content: center;
    line-height: var(--k-line-height-sm);
    text-align: center;
    text-transform: uppercase;
    width: 50px
}

:host {
    --k-icon-background: currentColor;
    --k-icon-foreground: #fff;
    box-sizing: content-box !important;
    color: inherit;
    display: inline-block;
    font-size: inherit;
    height: 1em;
    line-height: inherit;
    width: 1em
}

:host::part(background) {
    fill: var(--k-icon-background)
}

:host::part(foreground) {
    fill: var(--k-icon-foreground)
}

:host svg {
    display: block;
    height: 100%;
    width: 100%
}

:host {
    --theme-border-color: inherit;
    display: inline-block
}

.indicator-icon {
    align-items: center;
    background-color: transparent;
    border: 1px solid;
    border-radius: 100px;
    display: inline-flex;
    justify-content: center;
    transition: background-color 75ms, border-color 75ms, color 75ms
}

.indicator-icon--xs {
    block-size: 20px;
    font-size: 12px;
    inline-size: 20px
}

.indicator-icon--sm {
    block-size: 24px;
    font-size: 14px;
    inline-size: 24px
}

.indicator-icon--md {
    block-size: 28px;
    font-size: 16px;
    inline-size: 28px
}

.indicator-icon--lg {
    block-size: 32px;
    font-size: 19px;
    inline-size: 32px
}

.indicator-icon--xl {
    block-size: 36px;
    font-size: 21px;
    inline-size: 36px
}

.indicator-icon--xxl {
    block-size: 40px;
    font-size: 24px;
    inline-size: 40px
}

.indicator-icon--default {
    color: var(--k-color-gray-900)
}

.indicator-icon--active.indicator-icon--default {
    background-color: var(--k-color-gray-100);
    border-color: var(--theme-border-color, var(--k-color-gray-100))
}

.indicator-icon--reversed {
    color: var(--k-color-white)
}

.indicator-icon--active.indicator-icon--reversed {
    background-color: var(--k-color-gray-900);
    border-color: var(--theme-border-color, var(--k-color-gray-900))
}

.indicator-icon--kong {
    color: var(--k-color-white)
}

.indicator-icon--active.indicator-icon--kong {
    background-color: var(--k-color-kong);
    border-color: var(--theme-border-color, var(--k-color-kong))
}

.indicator-icon__icon {
    opacity: 0;
    transition: opacity 75ms
}

.indicator-icon--active .indicator-icon__icon {
    opacity: 1
}

:host {
    box-sizing: content-box !important;
    color: inherit;
    display: inline-flex;
    font-size: var(--k-font-size-xl);
    line-height: inherit;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.material-icons, .material-symbols {
    color: inherit;
    display: inline-block;
    font-size: inherit !important;
    text-decoration: none
}

.material-icons__label, .material-symbols__label {
    color: inherit;
    display: flex;
    opacity: 1
}

:host {
    display: inline-block;
    position: relative
}

.dropdown::part(popup) {
    z-index: var(--k-z-index-50)
}

.dropdown__panel--open {
    display: block;
    pointer-events: all
}

.dropdown__trigger {
    display: block
}

:host {
    --dot-color: var(--k-color-success-400);
    --dot-width: 6px;
    --dot-height: 6px;
    display: inline-flex
}

.dot {
    align-items: center;
    display: inline-flex;
    height: var(--dot-height);
    justify-content: center;
    padding: 1px;
    position: relative;
    width: var(--dot-width)
}

.dot__pulse, .dot__pulse-ring, .dot__static {
    background: var(--dot-color);
    border-radius: 50%;
    content: "";
    display: block;
    height: var(--dot-height);
    position: absolute;
    width: var(--dot-width)
}

.dot__pulse-ring {
    opacity: 0
}

.dot--size-sm {
    --dot-width: 6px;
    --dot-height: 6px
}

.dot--size-md {
    --dot-width: 8px;
    --dot-height: 8px
}

.dot--size-lg {
    --dot-width: 10px;
    --dot-height: 10px
}

:host {
    display: flex
}

@keyframes float {
    0% {
        transform: translatey(0)
    }
    50% {
        transform: translatey(-8px)
    }
    to {
        transform: translatey(0)
    }
}

.kongpanion {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 170px;
    justify-content: center;
    width: 170px
}

.kongpanion:hover .kongpanion__image-container {
    transform: translatey(-8px)
}

.kongpanion__image-container {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 170px;
    justify-content: center;
    position: relative;
    transition: transform .2s ease-in-out;
    width: 170px;
    z-index: var(--k-z-index-20)
}

.kongpanion__image {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    width: 100%
}

.kongpanion--animated .kongpanion__image {
    animation: float 6s ease-in-out infinite;
    transform: translatey(0)
}

.kongpanion__shiny-background {
    background-size: cover;
    border-radius: 24px;
    display: flex;
    height: 180px;
    overflow: hidden;
    position: absolute;
    width: 180px;
    z-index: var(--k-z-index-10)
}

.kongpanion__shiny-background img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

:host {
    display: block
}

.item-top {
    align-items: center;
    background-color: var(--k-color-teal-500);
    background-position: 50%;
    background-size: cover;
    border-radius: var(--k-size-3);
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    justify-content: center;
    overflow: hidden;
    padding: 0
}

.item-top--kreds, .item-top--product-sm {
    block-size: 110px
}

.item-top--kreds.item-top--mobile, .item-top--product-sm.item-top--mobile {
    block-size: 90px
}

.item-top--product-lg {
    block-size: 240px
}

.item-top--product-lg.item-top--mobile {
    block-size: 200px
}

.item-top__image-container {
    aspect-ratio: 1/1
}

.item-top__image {
    block-size: 100%;
    display: block;
    inline-size: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.item-top--product-sm .item-top__image-container {
    inline-size: 90px
}

.item-top--product-sm.item-top--mobile .item-top__image-container {
    inline-size: 70px
}

.item-top--product-lg .item-top__image-container {
    inline-size: 140px
}

.item-top__container {
    align-items: center;
    block-size: 100%;
    border-radius: var(--k-size-3);
    display: flex;
    gap: 12px;
    inline-size: 100%;
    justify-content: center;
    overflow: hidden
}

.item-top__product-label {
    color: var(--k-color-white);
    font-size: var(--k-font-size-xl);
    font-weight: var(--k-font-weight-bold);
    line-height: var(--k-line-height-xl);
    text-align: center
}

.item-top__content::slotted(*) {
    display: flex
}

.item-top--with-background-image .item-top__container {
    -webkit-backdrop-filter: blur(var(--k-blur-md));
    backdrop-filter: blur(var(--k-blur-md))
}

:host {
    display: block
}

.list-item {
    align-items: center;
    border-radius: var(--k-size-1-5);
    display: flex;
    flex-direction: column;
    position: relative
}

.list-item--banner, .list-item--default.list-item--selected, .list-item--default.list-item:hover:not(.list-item--focused) {
    --theme-effect: linear-gradient(var(--k-color-white), var(--k-color-white));
    background-color: var(--k-color-teal-500);
    box-shadow: none;
    color: var(--k-color-white)
}

.list-item--default.list-item:hover:not(.list-item--focused):not(.list-item--selected) {
    --theme-border-color: var(--k-color-white)
}

.list-item__controls::slotted(k-kreds-price)::part(base) {
    color: #fff
}

.list-item--default:focus {
    outline: 0
}

.list-item--default.list-item--focused {
    box-shadow: var(--k-focus-ring-kong-4);
    outline: var(--k-size-px) solid var(--k-color-gray-100);
    outline-offset: calc(var(--k-size-px) * -1)
}

.list-item--default.list-item--focused:not(.list-item--selected) {
    background-color: var(--k-color-white)
}

.list-item--selected.list-item--focused {
    outline-color: transparent
}

.list-item--banner {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-weight: var(--k-font-weight-semibold);
    justify-content: center;
    padding-block: var(--k-size-4);
    padding-inline: var(--k-size-8)
}

.list-item--banner, .list-item--default {
    font-size: var(--k-font-size-base);
    line-height: var(--k-line-height-base)
}

.list-item--default {
    background-color: var(--k-color-white);
    box-shadow: inset 0 0 0 1px var(--k-color-gray-100);
    font-weight: var(--k-font-weight-bold);
    padding-block: var(--k-size-2-5);
    padding-inline: var(--k-size-3)
}

.list-item--info {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: var(--k-font-size-xs);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-sm);
    padding-block: var(--k-size-1);
    padding-inline: var(--k-size-1)
}

.list-item--info .list-item__content {
    display: flex;
    gap: var(--k-size-3)
}

.list-item--info .list-item__content::slotted(:not(:first-child)) {
    padding-inline-start: 12px
}

.list-item--info .list-item__content::slotted(:not(:first-child)):before {
    background-color: var(--k-color-gray-200);
    block-size: 13px;
    content: "";
    display: block;
    inline-size: 1px;
    inset-block-start: 6px;
    inset-inline-start: 0;
    position: absolute
}

.list-item--game-item, .list-item--order {
    color: var(--k-color-white);
    font-size: var(--k-font-size-xl);
    font-weight: var(--k-font-weight-bold);
    line-height: var(--k-line-height-xl)
}

.list-item--order {
    padding-block: var(--k-size-3);
    padding-inline: var(--k-size-3)
}

.list-item__content-wrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 23px;
    inline-size: 100%;
    justify-content: space-between;
    padding: 0
}

.list-item--banner .list-item__content-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--k-size-1);
    justify-content: center;
    text-align: center
}

.list-item--info .list-item__content-wrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--k-size-3);
    justify-content: flex-end
}

.list-item__controls::slotted(*) {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--k-size-4);
    padding-block: var(--k-size-0-5)
}

.list-item__kreds::slotted(*) {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 3px;
    justify-content: center;
    padding: 0
}

:host {
    display: inline-block
}

.price {
    align-items: center;
    border-radius: 0 4px 0 0;
    display: flex;
    flex-direction: row
}

.price--dollars {
    block-size: 24px
}

.price--kreds {
    block-size: 30px
}

.price__arrow {
    block-size: 0;
    border-color: transparent;
    border-style: solid;
    inline-size: 0
}

.price--dollars .price__arrow {
    border-width: 12px 7px 12px 0
}

.price--kreds .price__arrow {
    border-width: 15px 7px 15px 0
}

.price--default.price--discount.price--dollars .price__arrow {
    border-color: transparent var(--k-color-teal-500) transparent transparent
}

.price--discount.price--kreds .price__arrow, .price--reversed.price--discount.price--dollars .price__arrow {
    border-color: transparent var(--k-color-white) transparent transparent
}

.price__label {
    align-items: center;
    display: flex;
    flex-direction: row
}

.price--reversed .price__label {
    color: var(--k-color-white)
}

.price--dollars .price__label {
    font-size: var(--k-font-size-base);
    font-weight: var(--k-font-weight-bold);
    line-height: var(--k-line-height-md);
    padding-inline-end: 4px;
    padding-inline-start: 1px
}

.price--kreds .price__label {
    font-size: var(--k-font-size-xl);
    font-weight: var(--k-font-weight-bold);
    line-height: var(--k-line-height-xl);
    padding-inline-end: 5px
}

.price--default.price--discount.price--kreds .price__label {
    background-color: var(--k-color-white)
}

.price--reversed.price--discount.price--dollars .price__label {
    background-color: var(--k-color-white);
    color: var(--k-color-gray-900)
}

.price--default.price--discount.price--dollars .price__label {
    background-color: var(--k-color-teal-500);
    color: var(--k-color-white)
}

:host {
    display: inline-flex
}

.window {
    align-items: center;
    -webkit-backdrop-filter: blur(var(--k-blur-sm));
    backdrop-filter: blur(var(--k-blur-sm));
    background-color: var(--k-color-black-6);
    border: 1px solid var(--k-color-white);
    border-radius: var(--k-size-2-5);
    color: var(--k-color-white);
    display: flex;
    font-weight: var(--k-font-weight-bold);
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.window--size-sm {
    block-size: 34px;
    font-size: var(--k-font-size-lg);
    gap: 6px;
    line-height: var(--k-line-height-lg);
    padding-block: 3px;
    padding-inline: 10px
}

.window--size-md {
    block-size: 40px;
    font-size: var(--k-font-size-xl);
    gap: 6px;
    line-height: var(--k-line-height-xl);
    padding-block: 5px;
    padding-inline: 12px
}

.window--size-lg {
    block-size: 40px;
    font-size: var(--k-font-size-display-xs);
    font-weight: 600;
    gap: 6px;
    line-height: var(--k-line-height-display-xs);
    padding-block: 4px;
    padding-inline: 8px
}

.window--size-xl {
    block-size: 64px;
    font-size: var(--k-font-size-display-lg);
    font-weight: 700;
    gap: 6px;
    line-height: var(--k-line-height-display-lg);
    padding-block: 2px;
    padding-inline: 12px
}

:host {
    --k-menu-background: var(--k-color-white);
    --k-menu-border-color: var(--k-color-gray-100);
    --k-menu-border-radius: var(--k-size-1-5);
    --k-menu-border-style: solid;
    --k-menu-border-width: var(--k-size-px);
    --k-menu-box-shadow: var(--k-shadow-lg);
    display: block;
    overscroll-behavior: none;
    position: relative
}

.menu {
    align-items: flex-start;
    background: var(--k-menu-background);
    border-color: var(--k-menu-border-color);
    border-radius: var(--k-menu-border-radius);
    border-style: var(--k-menu-border-style);
    border-width: var(--k-menu-border-width);
    box-shadow: var(--k-menu-box-shadow);
    display: flex;
    flex-direction: column;
    overflow: auto
}

:host {
    --k-menu-item-width: 240px;
    display: block
}

:host([inert]) {
    display: none
}

.menu-item {
    align-items: center;
    background: 0 0;
    border: 0;
    color: var(--k-color-gray-900);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-medium);
    gap: var(--k-size-3);
    inline-size: var(--k-menu-item-width);
    justify-content: space-between;
    line-height: var(--k-line-height-sm);
    line-height: var(--k-size-5);
    padding-block: var(--k-size-2-5);
    padding-inline: var(--k-size-4);
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.menu-item--disabled {
    color: var(--k-color-gray-400);
    cursor: not-allowed
}

.menu-item--link {
    text-decoration: none
}

.menu-item:focus {
    outline: 0
}

.menu-item:focus-visible {
    background-color: var(--k-color-gray-100);
    outline: 0
}

.menu-item:hover:not([aria-disabled=true]) {
    background-color: var(--k-color-gray-100)
}

.menu-item__content {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding-block: 0;
    padding-inline: 0
}

.menu-item__label {
    color: var(--k-color-gray-900)
}

.menu-item__leading {
    align-items: center;
    display: flex
}

.menu-item__leading::slotted(*) {
    margin-inline-end: var(--k-size-3)
}

.menu-item__leading::slotted(*), .menu-item__trailing::slotted(*) {
    display: flex
}

.menu-item__trailing {
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-normal);
    line-height: var(--k-line-height-sm)
}

.menu-item__trailing::slotted(*) {
    margin-inline-start: var(--k-size-3)
}

:host {
    display: block
}

.modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    z-index: var(--k-z-50)
}

.modal__actions {
    align-self: stretch;
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: var(--k-size-4)
}

.modal__actions::slotted(*) {
    --k-modal-button-width: 100%;
    flex-grow: 1
}

.modal__background::slotted(*) {
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -1
}

.modal__background::slotted(*):after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .4));
    block-size: 100%;
    content: "";
    display: block;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    position: absolute
}

.modal__body {
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    overflow: auto
}

.modal__body, .modal__bottom {
    display: block
}

.modal__bottom::slotted(*) {
    display: grid;
    gap: var(--k-size-6);
    inline-size: 100%;
    justify-items: center;
    place-items: center
}

.modal__content {
    block-size: 100%;
    border-radius: var(--k-size-1-5);
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    isolation: isolate;
    overflow: hidden;
    padding: var(--k-size-3-5);
    position: relative
}

.modal__dismiss-button {
    position: absolute;
    right: var(--k-size-1-5);
    top: var(--k-size-1-5)
}

.modal__overlay {
    -webkit-backdrop-filter: blur(var(--k-blur-md));
    backdrop-filter: blur(var(--k-blur-md));
    background-color: var(--k-color-black-12);
    filter: blur(0);
    inset: 0;
    opacity: 1;
    opacity: 0;
    position: fixed;
    transition-property: opacity;
    z-index: -1
}

.modal__panel {
    background-color: var(--k-color-white);
    border-radius: var(--k-size-3-5);
    box-shadow: var(--k-shadow-xl);
    inline-size: auto;
    margin: var(--k-size-4);
    max-height: 100%;
    max-width: 100%;
    opacity: 0;
    overflow: auto;
    position: relative
}

.modal__top {
    display: block
}

.modal__top::slotted(*) {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--k-size-4);
    inline-size: 100%;
    justify-content: flex-start
}

:host {
    --nav-item-background--current: var(--k-color-gray-900);
    --nav-item-background--current--focus: var(--k-color-gray-900);
    --nav-item-background--focus: var(--k-color-white);
    --nav-item-background--hover: var(--k-color-kong);
    --nav-item-background: transparent;
    --nav-item-box-shadow--focus: var(--k-focus-ring-kong-4);
    --nav-item-box-shadow--current--focus: var(--k-focus-ring-kong-4);
    --nav-item-cta-color--current: var(--k-color-white);
    --nav-item-cta-color--current--focus: var(--k-color-white);
    --nav-item-cta-color--focus: var(--k-color-gray-900);
    --nav-item-cta-color--hover: var(--k-color-white);
    --nav-item-cta-color: var(--k-color-gray-900);
    --nav-item-cta-weight--current: var(--k-font-weight-semibold);
    --nav-item-cta-weight--current--focus: var(--k-font-weight-semibold);
    --nav-item-cta-weight--focus: var(--k-font-weight-bold);
    --nav-item-cta-weight--hover: var(--k-font-weight-semibold);
    --nav-item-cta-weight: var(--k-font-weight-bold);
    display: flex
}

.nav-item {
    align-items: center;
    background: var(--nav-item-background);
    border-radius: 4px;
    border-style: none;
    display: inline-flex;
    flex-direction: row;
    font-family: var(--k-font-sans);
    justify-content: center;
    text-decoration: none
}

.nav-item--mobile.nav-item {
    height: auto;
    padding: 8px 9px 7px;
    width: 100%
}

.nav-item--mobile.nav-item .nav-item.nav-item__cta {
    align-items: center;
    display: flex;
    height: 28px;
    justify-content: center;
    padding: 0 3px 1px
}

.nav-item--size-sm {
    height: 30px;
    padding: 1px 5px
}

.nav-item--size-sm .nav-item__cta {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.nav-item--size-lg {
    height: 32px;
    padding: 2px 5px
}

.nav-item--size-lg .nav-item__cta {
    font-size: var(--k-font-size-lg);
    line-height: var(--k-line-height-lg)
}

.nav-item--theme-kong {
    --nav-item-background--current: var(--k-color-white);
    --nav-item-background--current--focus: var(--k-color-white);
    --nav-item-background--focus: var(--k-color-kong);
    --nav-item-background--hover: var(--k-color-sheer-black-100);
    --nav-item-background: transparent;
    --nav-item-box-shadow--focus: var(--k-focus-ring-dark-4);
    --nav-item-box-shadow--current--focus: var(--k-focus-ring-dark-4);
    --nav-item-cta-color--current: var(--k-color-kong);
    --nav-item-cta-color--current--focus: var(--k-color-kong);
    --nav-item-cta-color--focus: var(--k-color-white);
    --nav-item-cta-color--hover: var(--k-color-white);
    --nav-item-cta-color: var(--k-color-white);
    --nav-item-cta-weight--current: var(--k-font-weight-bold);
    --nav-item-cta-weight--current--focus: var(--k-font-weight-bold);
    --nav-item-cta-weight--focus: var(--k-font-weight-semibold);
    --nav-item-cta-weight--hover: var(--k-font-weight-semibold);
    --nav-item-cta-weight: var(--k-font-weight-semibold)
}

.nav-item--theme-reversed {
    --nav-item-background--current: var(--k-color-white);
    --nav-item-background--current--focus: var(--k-color-white);
    --nav-item-background--focus: var(--k-color-gray-900);
    --nav-item-background--hover: var(--k-color-kong);
    --nav-item-background: transparent;
    --nav-item-box-shadow--focus: var(--k-focus-ring-kong-4);
    --nav-item-box-shadow--current--focus: var(--k-focus-ring-kong-4);
    --nav-item-cta-color--current: var(--k-color-gray-900);
    --nav-item-cta-color--current--focus: var(--k-color-gray-900);
    --nav-item-cta-color--focus: var(--k-color-white);
    --nav-item-cta-color--hover: var(--k-color-white);
    --nav-item-cta-color: var(--k-color-white);
    --nav-item-cta-weight--current: var(--k-font-weight-bold);
    --nav-item-cta-weight--current--focus: var(--k-font-weight-bold);
    --nav-item-cta-weight--focus: var(--k-font-weight-semibold);
    --nav-item-cta-weight--hover: var(--k-font-weight-semibold);
    --nav-item-cta-weight: var(--k-font-weight-semibold)
}

.nav-item--action-dropdown, .nav-item--action-link {
    padding-right: 0;
    text-decoration: none
}

.nav-item--action-dropdown .nav-item__cta, .nav-item--action-link .nav-item__cta {
    padding-right: 0
}

.nav-item:not(.nav-item--action-link) {
    cursor: pointer
}

.nav-item--current {
    background: var(--nav-item-background--current)
}

.nav-item--current .nav-item__cta {
    font-weight: var(--nav-item-cta-weight--current)
}

.nav-item--current .nav-item__cta, .nav-item--current .nav-item__trailing-icon {
    color: var(--nav-item-cta-color--current)
}

.nav-item:hover:not(:focus-visible):not(.nav-item--current) {
    background-color: var(--nav-item-background--hover)
}

.nav-item:hover:not(:focus-visible):not(.nav-item--current) .nav-item__cta {
    color: var(--nav-item-cta-color--hover);
    font-weight: var(--nav-item-cta-weight--hover)
}

.nav-item:hover:not(:focus-visible):not(.nav-item--current) .nav-item__trailing-icon {
    color: var(--nav-item-cta-color--hover)
}

.nav-item:focus {
    outline: 0
}

.nav-item:focus-visible {
    box-shadow: var(--nav-item-box-shadow--focus)
}

.nav-item:focus-visible:not(.nav-item--current) {
    background: var(--nav-item-background--focus);
    box-shadow: var(--nav-item-box-shadow--focus)
}

.nav-item:focus-visible:not(.nav-item--current) .nav-item__cta {
    color: var(--nav-item-cta-color--focus);
    font-weight: var(--nav-item-cta-weight--focus)
}

.nav-item:focus-visible.nav-item--current {
    background: var(--nav-item-background--current--focus);
    box-shadow: var(--nav-item-box-shadow--current--focus)
}

.nav-item:focus-visible.nav-item--current .nav-item__cta {
    color: var(--nav-item-cta-color--current--focus)
}

.nav-item__cta {
    align-items: center;
    color: var(--nav-item-cta-color);
    display: flex;
    flex-direction: column;
    font-weight: var(--nav-item-cta-weight);
    justify-content: center;
    padding: 0 3px 1px;
    white-space: nowrap
}

.nav-item__cta:after {
    content: attr(data-text);
    content: attr(data-text)/"";
    font-weight: var(--k-font-weight-bold);
    height: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    visibility: hidden
}

@media speech {
    .nav-item__cta:after {
        display: none
    }
}

.nav-item__trailing-icon {
    color: var(--nav-item-cta-color);
    display: flex;
    font-size: 24px
}

:host {
    --background: var(--k-color-white);
    display: flex;
    position: relative
}

.navbar {
    align-items: center;
    background: var(--background);
    display: grid;
    gap: var(--k-size-4);
    grid-template-columns:1fr 2fr 1fr;
    height: 60px;
    justify-content: space-between;
    padding: 10px 20px;
    place-content: center;
    position: sticky;
    top: 0;
    width: 100vw;
    z-index: var(--k-z-index-50)
}

.navbar--mobile {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    height: 50px;
    padding: 9px 12px;
    width: 100vw
}

.navbar--theme-kong {
    --background: var(--k-color-kong)
}

.navbar--theme-reversed {
    --background: var(--k-color-gray-900)
}

.navbar--transparent.navbar {
    --background: transparent
}

.navbar__brand-icon, .navbar__brand-wordmark, .navbar__menu-toggle {
    display: flex
}

.navbar__menu-toggle-button {
    background: 0 0;
    border-style: none;
    padding: 0
}

.navbar__nav-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    width: 100%
}

.navbar__mobile-menu-container {
    height: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100vw
}

.navbar__mobile-menu-container--open {
    height: 100vh;
    overflow: scroll
}

.navbar__mobile-menu {
    align-items: center;
    align-self: stretch;
    background: var(--k-color-white);
    display: flex;
    flex-direction: column;
    gap: var(--k-size-2-5);
    overflow-y: auto;
    padding: 82px 32px 32px;
    position: absolute;
    top: 0;
    transform-origin: top;
    width: 100%;
    z-index: var(--k-z-index-40)
}

.navbar__mobile-menu:after {
    background-image: var(--k-gradient-kong-glow);
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%
}

.navbar__mobile-menu::slotted(*) {
    --nav-item-background--current: linear-gradient(105deg, #f04438 39.66%, #e478fa);
    display: flex;
    flex-direction: column;
    width: 100%
}

.navbar__nav-items {
    align-items: center;
    display: flex;
    gap: var(--k-size-1-5);
    justify-content: center;
    width: 100%
}

:host {
    --nav-sign-in-color: var(--k-color-gray-900);
    --nav-sign-in-dot-color: var(--k-color-gray-900);
    --nav-sign-in-font-weight: var(--k-font-weight-bold);
    display: inline-block
}

.nav-sign-in {
    align-items: center;
    background: 0 0;
    border-radius: 4px;
    border-style: none;
    display: flex;
    gap: 8px;
    height: 32px;
    padding: 0 4px 0 24px;
    position: relative;
    white-space: nowrap
}

.nav-sign-in--theme-kong, .nav-sign-in--theme-reversed {
    --nav-sign-in-color: var(--k-color-white);
    --nav-sign-in-dot-color: var(--k-color-white);
    --nav-sign-in-font-weight: var(--k-font-weight-semibold)
}

.nav-sign-in:hover:not(:disabled) {
    background: var(--k-color-sheer-black-100);
    cursor: pointer
}

.nav-sign-in__dot {
    --dot-color: var(--nav-sign-in-dot-color);
    left: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.nav-sign-in__label {
    color: var(--nav-sign-in-color);
    font-size: var(--k-font-size-lg);
    font-weight: var(--nav-sign-in-font-weight);
    line-height: var(--k-line-height-lg)
}

:host {
    display: flex
}

.nav-section {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%
}

.nav-section--default {
    --color: var(--k-color-gray-900)
}

.nav-section--reversed {
    --color: var(--k-color-white)
}

.nav-section--mobile .nav-section__body {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm);
    width: auto
}

.nav-section__body {
    align-items: flex-start;
    align-self: stretch;
    color: var(--color);
    display: flex;
    font-size: var(--k-font-size-md);
    font-weight: 400;
    line-height: var(--k-line-height-md);
    width: 50%
}

.nav-section__body--has-content {
    padding-bottom: 4px
}

.nav-section__head {
    align-items: center;
    align-self: stretch;
    color: var(--color);
    display: flex;
    font-size: var(--k-font-size-lg);
    font-weight: 700;
    gap: 10px;
    height: 32px;
    justify-content: space-between;
    line-height: var(--k-line-height-lg)
}

.nav-section__headline::slotted(*) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.nav-section__controls {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end
}

.nav-section__tabs::slotted(*) {
    align-items: center;
    display: flex;
    gap: 4px
}

:host {
    --nav-profile-user-color: var(--k-color-gray-900);
    display: flex
}

.nav-profile {
    --nav-profile-user-color: var(--k-color-gray-900);
    --nav-profile-user-font-weight: var(--k-font-weight-bold);
    display: flex;
    font-size: var(--k-font-size-lg);
    line-height: var(--k-line-height-lg)
}

.nav-profile--theme-reversed {
    --nav-profile-user-color: var(--k-color-white);
    --nav-profile-user-font-weight: var(--k-font-weight-semibold)
}

.nav-profile__avatar::slotted(*) {
    pointer-events: none
}

.nav-profile__avatar-container {
    width: auto
}

.nav-profile__avatar-container, .nav-profile__badge {
    align-items: flex-start;
    display: flex;
    position: relative
}

.nav-profile__badge {
    align-self: stretch;
    flex-direction: column;
    gap: 10px;
    right: 3px;
    top: 1px
}

.nav-profile__badge::slotted(*) {
    display: flex
}

.nav-profile__button {
    align-items: center;
    background: 0 0;
    border-radius: 32px 8px 8px 32px;
    border-style: none;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    padding-left: 0;
    padding-right: 4px;
    position: relative
}

@media (hover: hover) and (pointer: fine) {
    .nav-profile__button:before {
        background: var(--k-color-sheer-black-100);
        border-radius: 32px 8px 8px 32px;
        content: "";
        height: 32px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: calc(100% - 10px)
    }

    .nav-profile__button:hover:not(:disabled) {
        cursor: pointer
    }

    .nav-profile__button:hover:not(:disabled):before {
        opacity: 1
    }
}

.nav-profile__user {
    align-items: center;
    align-self: stretch;
    color: var(--nav-profile-user-color);
    display: flex;
    font-size: var(--k-font-size-lg);
    font-weight: var(--nav-profile-user-font-weight);
    line-height: var(--k-line-height-lg);
    padding-bottom: 0;
    padding-left: 4px;
    position: relative
}

:host {
    display: flex
}

.nav-more {
    align-items: center;
    background: 0 0;
    border-radius: 4px;
    border-style: none;
    color: var(--k-color-gray-900);
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    width: 32px
}

.nav-more:hover:not(:disabled) {
    background: rgba(0, 0, 0, .1);
    cursor: pointer
}

.nav-more--theme-reversed {
    color: var(--k-color-white)
}

:host {
    display: inline-flex
}

.nav-item-divider {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0 2px
}

.nav-item-divider--theme-default {
    color: var(--k-color-gray-900)
}

.nav-item-divider--theme-reversed {
    color: var(--k-color-white)
}

:host {
    display: flex
}

.nav-alert {
    align-items: center;
    background: 0 0;
    border-radius: 4px;
    border-style: none;
    color: var(--k-color-gray-900);
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    position: relative;
    width: 32px
}

.nav-alert:hover:not(:disabled) {
    background: rgba(0, 0, 0, .1)
}

.nav-alert--theme-reversed {
    color: var(--k-color-white)
}

.nav-alert__dot {
    inset-block-start: 3px;
    inset-inline-end: 3px;
    position: absolute
}

.menu-toggle {
    background: 0 0;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    padding: 0
}

.menu-toggle:hover {
    background: rgba(0, 0, 0, .1)
}

@media (hover: none) {
    .menu-toggle {
        touch-action: manipulation
    }

    .menu-toggle:hover {
        background: 0 0
    }
}

.menu-toggle--open .menu-toggle__bar {
    height: 2.6px;
    width: 16px
}

.menu-toggle--open .menu-toggle__bar-bottom {
    left: 11.5;
    rotate: -45deg;
    top: 15px
}

.menu-toggle--open .menu-toggle__bar-top {
    left: 11.5;
    rotate: 45deg;
    top: 15px
}

.menu-toggle--theme-default .menu-toggle__bar {
    background-color: var(--k-color-gray-900)
}

.menu-toggle--theme-reversed .menu-toggle__bar {
    background-color: var(--k-color-white)
}

.menu-toggle__bar {
    height: 2.6px;
    position: absolute;
    width: 16px
}

.menu-toggle__bar-bottom {
    left: 8px;
    top: 18px
}

.menu-toggle__bar-top {
    left: 8px;
    top: 11px
}

@media (prefers-reduced-motion: no-preference) {
    .menu-toggle__bar {
        transform-origin: center;
        transition: all .2s cubic-bezier(.08, .6, .54, .92)
    }
}

.menu-toggle__bars {
    align-items: center;
    block-size: 32px;
    display: flex;
    flex-direction: column;
    inline-size: 32px;
    justify-content: center;
    position: relative
}

:host {
    display: flex
}

.nav-kred {
    align-items: center;
    background: 0 0;
    border-radius: 32px 8px 8px 32px;
    border-style: none;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    padding-left: 0;
    padding-right: 9px;
    position: relative;
    text-decoration: none
}

@media (hover: hover) and (pointer: fine) {
    .nav-kred:before {
        background: var(--k-color-sheer-black-100);
        border-radius: 32px 8px 8px 32px;
        content: "";
        height: 32px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: calc(100% - 10px)
    }

    .nav-kred:hover:not(:disabled) {
        cursor: pointer
    }

    .nav-kred:hover:not(:disabled):before {
        opacity: 1
    }
}

.nav-kred__kred {
    font-size: 32px;
    height: 32px;
    width: 32px
}

.nav-kred__badge, .nav-kred__kred {
    align-items: flex-start;
    display: flex;
    position: relative
}

.nav-kred__badge {
    align-self: stretch;
    flex-direction: column;
    gap: 10px;
    margin-right: -11px;
    right: 9px;
    top: 2px
}

.nav-kred__badge::slotted(*) {
    display: flex;
    pointer-events: none
}

.nav-kred__icon {
    pointer-events: none
}

:host {
    --border-color: var(--k-color-gray-modern-200)
}

.pagination {
    align-items: center;
    display: flex
}

.pagination.pagination--orientation-center {
    text-align: center
}

.pagination.pagination--orientation-left {
    text-align: left
}

.pagination.pagination--orientation-right {
    text-align: right
}

.pagination, .pagination__button-group, .pagination__page-count {
    display: flex;
    flex: 1;
    justify-content: center;
    width: 100%
}

.pagination__page-count {
    font-size: var(--k-font-size-sm)
}

.pagination--card {
    padding: 12px 24px 16px
}

.pagination--card.pagination--variant-count, .pagination--card.pagination--variant-default {
    border-top: 1px solid var(--border-color)
}

.pagination-button {
    align-items: center;
    background: 0 0;
    border: none;
    color: var(--k-color-gray-900);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    min-width: 40px;
    transition: all .1s ease-in-out
}

.pagination-button-group {
    display: inline-flex
}

.pagination-button-group--variant-strip {
    background: var(--k-color-white);
    border-radius: 6px;
    display: inline-flex;
    overflow: hidden
}

.pagination-button-group--variant-strip slot::slotted(*), .pagination-button-group--variant-strip slot > * {
    border-right: 1px solid var(--k-color-gray-modern-100)
}

.pagination-button-group--variant-strip slot::slotted(:last-child), .pagination-button-group--variant-strip slot > :last-child {
    border-right: none
}

:host([theme=default]) {
    --k-payment-card-background-color: var(--k-color-kong);
    --k-payment-card-color: var(--k-color-white);
    --k-payment-card-strip-background-color: var(--k-color-gray-700);
    --k-payment-card-strip-color: var(--k-color-white)
}

:host([theme=dark]) {
    --k-payment-card-background-color: var(--k-color-gray-700);
    --k-payment-card-color: var(--k-color-white);
    --k-payment-card-strip-background-color: var(--k-color-kong);
    --k-payment-card-strip-color: var(--k-color-white)
}

:host([theme=light]) {
    --k-payment-card-background-color: var(--k-color-gray-100);
    --k-payment-card-color: var(--k-color-gray-700);
    --k-payment-card-strip-background-color: var(--k-color-gray-700);
    --k-payment-card-strip-color: var(--k-color-white)
}

:host([theme=transparent]) {
    --k-payment-card-background-color: transparent;
    --k-payment-card-color: var(--k-color-white);
    --k-payment-card-strip-background-color: transparent;
    --k-payment-card-strip-color: var(--k-color-white)
}

.payment-card {
    background-color: var(--k-payment-card-background-color);
    border-radius: 20px;
    box-shadow: 8px 10px 16px rgba(0, 0, 0, .05);
    color: var(--k-payment-card-color);
    display: flex;
    height: 190px;
    position: relative;
    width: 316px
}

.payment-card__content {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    overflow: hidden;
    padding: 20px;
    width: calc(100% - 88px)
}

:host([strip=vertical]) .payment-card__content {
    background-color: var(--k-payment-card-strip-background-color);
    color: var(--k-payment-card-strip-color)
}

.payment-card__card-info {
    display: flex;
    flex-wrap: wrap;
    z-index: 1
}

.payment-card__number {
    font-size: var(--k-font-size-md);
    font-weight: 600;
    line-height: var(--k-line-height-md)
}

.payment-card__strip {
    background: var(--k-payment-card-strip-background-colorw);
    position: absolute;
    z-index: 0
}

.payment-card__lines {
    background-position: 0 40px;
    background-repeat: no-repeat;
    height: 100%;
    left: 0;
    opacity: .5;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.payment-input-field {
    display: flex
}

.payment-cvv-field {
    display: flex
}

:host {
    --k-popup-arrow-color: var(--k-color-white);
    --k-popup-arrow-size: 20px;
    display: contents
}

.popup {
    isolation: isolate;
    left: 0;
    position: absolute;
    top: 0;
    width: -moz-max-content;
    width: max-content;
    z-index: 100
}

.popup:not(.popup--active) {
    display: none
}

.popup--fixed {
    position: fixed
}

.popup__arrow {
    color: var(--k-popup-arrow-color);
    height: var(--k-popup-arrow-size);
    position: absolute;
    width: var(--k-popup-arrow-size);
    z-index: 0
}

:host {
    --track-width: 2px;
    --track-color: var(--k-color-sheer-primary-200);
    --indicator-color: var(--k-color-kong);
    --speed: 2s;
    box-sizing: border-box;
    display: inline-flex;
    height: 1em;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 1em
}

.spinner {
    flex: 1 1 auto;
    height: 100%;
    width: 100%
}

.spinner--theme-light {
    --track-color: var(--k-color-sheer-white-200);
    --indicator-color: var(--k-color-white)
}

.spinner--theme-dark {
    --track-color: var(--k-color-sheer-black-50);
    --indicator-color: var(--k-color-gray-900)
}

.spinner__indicator, .spinner__track {
    fill: none;
    stroke-width: var(--track-width);
    transform-origin: 50% 50%
}

.spinner__track {
    stroke: var(--track-color);
    transform-origin: 0 0
}

.spinner__indicator {
    stroke-dasharray: 150% 75%;
    stroke-linecap: square;
    stroke: var(--indicator-color);
    animation: spin var(--speed) linear infinite
}

@keyframes spin {
    0% {
        stroke-dasharray: .01em, 2.75em;
        transform: rotate(0)
    }
    50% {
        stroke-dasharray: 1.375em, 1.375em;
        transform: rotate(450deg)
    }
    to {
        stroke-dasharray: .01em, 2.75em;
        transform: rotate(3turn)
    }
}

:host {
    --spinner-flower-animation-duration: 1s;
    --spinner-flower-color: var(--k-color-gray-900);
    box-sizing: border-box;
    display: inline-flex;
    height: 1em;
    width: 1em
}

.spinner-flower {
    color: var(--spinner-flower-color);
    flex: 1 1 auto;
    height: 100%;
    width: 100%
}

.spinner-flower--theme-dark {
    --spinner-flower-color: var(--k-color-gray-900)
}

.spinner-flower--theme-light {
    --spinner-flower-color: var(--k-color-white)
}

.spinner-flower--theme-kong {
    --spinner-flower-color: var(--k-color-kong)
}

.spinner-flower path {
    animation-duration: var(--spinner-flower-animation-duration);
    animation-iteration-count: infinite;
    animation-name: spinner-flower-opacity;
    animation-timing-function: ease-in-out
}

.spinner-flower path:first-child {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .08333s) * -1)
}

.spinner-flower path:nth-child(2) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .16667s) * -1)
}

.spinner-flower path:nth-child(3) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .25s) * -1)
}

.spinner-flower path:nth-child(4) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .33333s) * -1)
}

.spinner-flower path:nth-child(5) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .41667s) * -1)
}

.spinner-flower path:nth-child(6) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .5s) * -1)
}

.spinner-flower path:nth-child(7) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .58333s) * -1)
}

.spinner-flower path:nth-child(8) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .66667s) * -1)
}

.spinner-flower path:nth-child(9) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .75s) * -1)
}

.spinner-flower path:nth-child(10) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .83333s) * -1)
}

.spinner-flower path:nth-child(11) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - .91667s) * -1)
}

.spinner-flower path:nth-child(12) {
    animation-delay: calc((var(--spinner-flower-animation-duration) - 1s) * -1)
}

@keyframes spinner-flower-opacity {
    0% {
        opacity: .96
    }
    to {
        opacity: .08
    }
}

:host {
    display: block
}

:host(:focus) .search-result {
    background-color: var(--k-color-gray-50) !important
}

:host(:focus-visible) {
    outline: 0
}

:host(:not([aria-disabled=true])) .search-result {
    background-color: transparent;
    cursor: pointer
}

:host(:hover:not([aria-disabled=true])) .search-result, :host([tabindex="0"]) .search-result {
    background-color: var(--k-color-gray-50)
}

:host(:hover:not([aria-disabled=true])) .search-result .search-result__heading, :host(:hover:not([aria-disabled=true])) .search-result .search-result__subheading, :host([tabindex="0"]) .search-result .search-result__heading, :host([tabindex="0"]) .search-result .search-result__subheading {
    padding-left: 1px
}

:host(:focus-visible) .search-result {
    outline: 0
}

.search-result {
    align-items: center;
    border-style: none;
    color: inherit;
    display: flex;
    gap: 11px;
    isolation: isolate;
    padding: 0 12px;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 100%
}

.search-result__content {
    align-items: center;
    border-bottom: 1px solid var(--k-color-gray-50);
    display: flex;
    flex: 1 0 0;
    gap: 10px;
    padding: 9px 0 6px
}

.search-result__heading {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-sm);
    overflow: hidden;
    width: 100%
}

.search-result__heading, .search-result__subheading {
    transition: all var(--k-transition-x-fast) ease-in-out
}

.search-result__subheading {
    align-self: stretch;
    color: var(--k-color-gray-900);
    display: flex;
    flex-direction: column;
    font-size: var(--k-font-size-xs);
    font-weight: 400;
    justify-content: center;
    line-height: var(--k-line-height-xs)
}

.search-result__subheading::slotted(*) {
    margin-top: -4px
}

.search-result__text {
    align-items: flex-start;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    margin-top: -2px
}

:host {
    display: block;
    display: contents
}

.search-results {
    background: var(--k-color-white);
    border: 1px solid var(--k-color-gray-100);
    border-radius: 6px;
    box-shadow: var(--k-shadow-xxxl);
    display: flex;
    flex-direction: column;
    overflow: auto;
    overscroll-behavior: none;
    transform-origin: top
}

.search-button {
    --icon-size: 16px;
    --size: 26px;
    align-items: center;
    background: var(--background);
    border: none;
    border-radius: 50%;
    box-sizing: content-box;
    color: var(--color);
    cursor: inherit;
    display: inline-flex;
    height: var(--size);
    justify-content: center;
    padding: 0;
    transition: width var(--k-transition-medium) ease-in-out, height var(--k-transition-medium) ease-in-out;
    width: var(--size)
}

.search-button--default {
    --background-active: var(--k-color-kong);
    --background-focus: var(--k-color-white);
    --background-hover: var(--k-color-kong);
    --background-pressed: var(--k-color-pressed-kong);
    --background: var(--k-color-white);
    --box-shadow: var(--k-focus-ring-kong-4);
    --color-active: var(--k-color-white);
    --color-focus: var(--k-color-gray-900);
    --color-hover: var(--k-color-white);
    --color-pressed: var(--k-color-white);
    --color: var(--k-color-gray-900)
}

.search-button--reversed {
    --background-active: var(--k-color-kong);
    --background-focus: var(--k-color-gray-900);
    --background-hover: var(--k-color-kong);
    --background-pressed: var(--k-color-pressed-kong);
    --background: var(--k-color-gray-900);
    --box-shadow: var(--k-focus-ring-kong-4);
    --color-active: var(--k-color-white);
    --color-focus: var(--k-color-white);
    --color-hover: var(--k-color-white);
    --color-pressed: var(--k-color-white);
    --color: var(--k-color-white)
}

.search-button:focus {
    outline: 0
}

.search-button:not(.search-button--active):hover:not(:disabled) {
    background: var(--background-hover);
    color: var(--color-hover);
    cursor: pointer
}

.search-button:not(.search-button--active):active:not(:disabled) {
    background: var(--background-pressed);
    color: var(--color-pressed);
    outline: 0
}

.search-button:not(.search-button--active):focus-visible:not(:disabled) {
    background: var(--background-focus);
    box-shadow: var(--box-shadow);
    color: var(--color-focus);
    outline: 0
}

.search-button--active {
    background: var(--background-active);
    color: var(--color-active)
}

.search-button--active:hover:not(:disabled) {
    background: var(--background-pressed);
    color: var(--color-hover);
    cursor: pointer
}

.search-button--sm {
    --icon-size: 20px;
    --size: 32px
}

.search-button--sm.search-button--contained {
    --icon-size: 16px;
    --size: 26px
}

.search-button--md {
    --icon-size: 22px;
    --size: 40px
}

.search-button--md.search-button--contained {
    --icon-size: 20px;
    --size: 34px
}

.search-button--lg {
    --icon-size: 30px;
    --size: 48px
}

.search-button--lg.search-button--contained {
    --icon-size: 24px;
    --size: 40px
}

.search-button__icon {
    height: var(--icon-size);
    transition: width var(--k-transition-medium) ease-in-out, height var(--k-transition-medium) ease-in-out;
    width: var(--icon-size)
}

:host {
    --search-bar-caret-color: var(--k-color-gray-900);
    --search-bar-caret-height: 24px;
    --search-bar-caret-left: 19px;
    --search-bar-caret-top: 12px;
    --search-bar-caret-width: 1px;
    --search-bar-gap: 0;
    --search-bar-input-color: var(--k-color-gray-900);
    --search-bar-input-disabled-color: var(--k-color-gray-400);
    --search-bar-input-height: auto;
    --search-bar-input-padding: 0;
    --search-bar-input-padding-focused: 0;
    --search-bar-input-width: 0;
    --search-bar-loading-spinner-size: 24px;
    --search-bar-padding: 0;
    --search-bar-placeholder-color: var(--k-color-gray-500);
    --search-bar-width: inherit;
    --easing-bounce: cubic-bezier(0.43, 1.58, 0.47, 1.01);
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%
}

@keyframes blink {
    0%, to {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

.search-bar {
    align-items: stretch;
    background-color: transparent;
    border-radius: 100px;
    cursor: text;
    display: inline-flex;
    gap: var(--search-bar-gap);
    isolation: isolate;
    justify-content: space-between;
    padding: var(--search-bar-padding);
    transition: all var(--k-transition-medium) var(--easing-bounce);
    vertical-align: middle;
    z-index: 50
}

.search-bar--active .search-bar__input-control {
    caret-color: var(--search-bar-caret-color);
    padding: var(--search-bar-input-padding-focused)
}

.search-bar--active:before {
    display: none
}

.search-bar--focused:before {
    animation: blink 1s step-end .25s infinite
}

.search-bar--focused .search-bar__input-control {
    padding: var(--search-bar-input-padding-focused)
}

.search-bar--active .search-bar__input-control {
    box-shadow: none !important;
    outline: 0 !important
}

.search-bar--closed.search-bar {
    --search-bar-gap: 0;
    --search-bar-padding: 0;
    width: var(--search-bar-input-height)
}

.search-bar--closed.search-bar .search-bar__input-control {
    padding: 0;
    width: 0
}

.search-bar--open {
    --search-bar-input-width: 100%;
    --search-bar-padding: 0 var(--search-bar-gap) 0 0;
    width: 100%
}

.search-bar--open .search-bar__input-control {
    box-shadow: none;
    opacity: 1;
    outline: 0
}

.search-bar--open .search-bar__input-control:focus:not(:focus-visible) {
    box-shadow: none;
    outline: 0
}

.search-bar--open .search-bar__input-control:focus-visible {
    outline: 0
}

.search-bar--sm {
    --search-bar-caret-height: 16px;
    --search-bar-caret-left: 14px;
    --search-bar-caret-top: 8px;
    --search-bar-caret-width: 1px;
    --search-bar-gap: 3px;
    --search-bar-input-height: 32px;
    --search-bar-input-padding-focused: 3px 3px 4px 12px;
    --search-bar-input-padding: 3px 3px 4px 12px;
    --search-bar-loading-spinner-size: 18px;
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

.search-bar--md {
    --search-bar-caret-height: 21px;
    --search-bar-caret-left: 18px;
    --search-bar-caret-top: 11px;
    --search-bar-caret-width: 1px;
    --search-bar-gap: 4px;
    --search-bar-input-height: 42px;
    --search-bar-input-padding-focused: 3px 0 3px 16px;
    --search-bar-input-padding: 3px 0 3px 16px;
    --search-bar-loading-spinner-size: 24px;
    font-size: var(--k-font-size-lg);
    line-height: var(--k-line-height-lg)
}

.search-bar--lg {
    --search-bar-caret-height: 24px;
    --search-bar-caret-left: 19px;
    --search-bar-caret-top: 12px;
    --search-bar-caret-width: 1px;
    --search-bar-gap: 4px;
    --search-bar-input-height: 48px;
    --search-bar-input-padding-focused: 4px 0 5px 16px;
    --search-bar-input-padding: 4px 0 5px 16px;
    --search-bar-loading-spinner-size: 24px;
    font-size: var(--k-font-size-xl);
    line-height: var(--k-line-height-xl)
}

.search-bar--default.search-bar--open {
    background-color: var(--k-color-white)
}

.search-bar--reversed {
    --search-bar-caret-color: var(--k-color-white);
    --search-bar-input-color: var(--k-color-white);
    --search-bar-input-disabled-color: var(--k-color-gray-600);
    --search-bar-placeholder-color: var(--k-color-gray-400)
}

.search-bar--reversed.search-bar--open {
    background-color: var(--k-color-gray-900)
}

.search-bar--disabled .search-bar__button, .search-bar--disabled .search-bar__button::slotted(*) {
    pointer-events: none
}

.search-bar__button {
    align-items: center;
    cursor: default;
    display: inline-flex;
    flex: 0 0 auto;
    position: relative;
    transition: all var(--k-transition-medium) var(--easing-bounce)
}

.search-bar__controls {
    display: inline-flex
}

.search-bar__input-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    border: none;
    border-bottom-left-radius: calc(var(--search-bar-input-height) / 2);
    border-bottom-right-radius: 4px;
    border-top-left-radius: calc(var(--search-bar-input-height) / 2);
    border-top-right-radius: 4px;
    box-shadow: none;
    cursor: inherit;
    flex: 1 1 auto;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    height: var(--search-bar-input-height);
    margin: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    padding: var(--search-bar-input-padding);
    position: relative;
    text-overflow: ellipsis;
    transition: all var(--k-transition-fast) var(--easing-bounce), padding var(--k-transition-medium) var(--easing-bounce);
    white-space: nowrap;
    width: var(--search-bar-input-width)
}

.search-bar__input-control::-moz-placeholder {
    color: var(--search-bar-placeholder-color);
    -moz-user-select: none;
    user-select: none
}

.search-bar__input-control::placeholder {
    color: var(--search-bar-placeholder-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.search-bar__loading {
    align-self: center;
    display: flex;
    position: relative;
    width: 0
}

.search-bar__loading-spinner {
    display: flex;
    font-size: var(--search-bar-loading-spinner-size);
    opacity: 0;
    transform: scale(.9);
    transition: opacity var(--k-transition-medium) linear, transform var(--k-transition-medium) var(--easing-bounce)
}

.search-bar--loading.search-bar--open.search-bar--loading .search-bar__loading {
    margin-right: 8px;
    width: auto
}

.search-bar--loading.search-bar--open.search-bar--loading .search-bar__loading-spinner {
    opacity: 1;
    transform: scale(1)
}

.search-bar:not(.search-bar--disabled) .search-bar__input-control {
    color: var(--search-bar-input-color)
}

.search-bar.search-bar--disabled .search-bar__input-control {
    color: var(--search-bar-input-disabled-color)
}

:host {
    display: flex
}

.carousel-arrow {
    align-items: center;
    background: var(--k-color-white);
    border-style: none;
    color: var(--k-color-gray-900);
    display: inline-flex;
    gap: 12px;
    justify-content: center
}

.carousel-arrow:hover:not(:disabled) {
    background: var(--k-color-kong);
    color: var(--k-color-white);
    cursor: pointer
}

.carousel-arrow--size-md {
    border-radius: 18px;
    font-size: 32px;
    height: 36px;
    padding: 2px;
    width: 36px
}

.carousel-arrow--size-md .carousel-arrow__icon {
    height: 32px;
    width: 32px
}

.carousel-arrow--size-lg {
    border-radius: 22px;
    font-size: 36px;
    height: 44px;
    padding: 4px;
    width: 44px
}

.carousel-arrow--size-lg .carousel-arrow__icon {
    height: 36px;
    width: 36px
}

.carousel-arrow--theme-reversed {
    background: var(--k-color-gray-800);
    color: var(--k-color-white)
}

.carousel-arrow:focus {
    outline: 0
}

.carousel-arrow:not(:disabled):focus-visible {
    box-shadow: var(--k-focus-ring-kong-4)
}

.carousel-arrow__icon {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center
}

:host {
    color: rgba(0, 0, 0, .122);
    display: inline-block
}

.tab {
    background: 0 0;
    border: none;
    cursor: pointer;
    display: inline-flex;
    text-decoration: none
}

.tab:focus {
    outline: 0
}

.tab--disabled {
    cursor: not-allowed
}

.tab__badge::slotted(*) {
    background-color: var(--k-color-kong);
    border-radius: 4px;
    color: var(--k-color-white);
    display: inline-flex;
    font-weight: var(--k-font-weight-medium)
}

.tab--sm {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

.tab--md {
    font-size: var(--k-font-size-base);
    line-height: var(--k-line-height-base)
}

.tab--sm .tab__badge::slotted(*) {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm);
    padding-block: var(--k-size-0-5);
    padding-inline: var(--k-size-1-5)
}

.tab--md .tab__badge::slotted(*) {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm);
    padding-block: var(--k-size-0-5);
    padding-inline: var(--k-size-2)
}

.tab--pill {
    align-items: center;
    border-radius: 100px;
    color: var(--k-color-gray-900);
    display: flex;
    font-weight: var(--k-font-weight-semibold);
    justify-content: center
}

.tab--pill.tab--reversed {
    color: var(--k-color-white)
}

.tab--pill.tab--reversed.tab--current {
    background-color: var(--k-color-white);
    color: var(--k-color-gray-900)
}

.tab--pill.tab--current:not(.tab--disabled):hover, .tab--pill:not(.tab--disabled):hover {
    background-color: var(--k-color-gray-800);
    color: var(--k-color-white)
}

.tab--pill.tab--reversed.tab--current:not(.tab--disabled):hover, .tab--pill.tab--reversed:not(.tab--disabled):hover {
    background-color: var(--k-color-white);
    color: var(--k-color-gray-800)
}

.tab--pill:not(.tab--disabled):focus-visible {
    background-color: var(--k-color-white);
    box-shadow: var(--k-focus-ring-kong-4);
    color: var(--k-color-gray-900)
}

.tab--pill.tab--current:not(.tab--disabled):focus-visible {
    background-color: var(--k-color-gray-800);
    box-shadow: var(--k-focus-ring-kong-4);
    color: var(--k-color-white)
}

.tab--pill.tab--sm {
    gap: var(--k-size-2);
    padding-block: 7px;
    padding-inline: var(--k-size-3)
}

.tab--pill.tab--md {
    gap: var(--k-size-2);
    padding-block: var(--k-size-2);
    padding-inline: var(--k-size-3-5)
}

.tab--pill.tab--current {
    background-color: var(--k-color-gray-800);
    color: var(--k-color-white)
}

.tab--underline {
    align-items: center;
    color: var(--k-color-gray-900);
    display: flex;
    font-weight: var(--k-font-weight-semibold);
    justify-content: center
}

.tab--underline.tab--sm {
    gap: 8px;
    padding-block: var(--k-size-1) var(--k-size-1-5);
    padding-inline: var(--k-size-0-5)
}

.tab--underline.tab--md {
    gap: 8px;
    padding-block: 0 var(--k-size-3);
    padding-inline: var(--k-size-1)
}

.tab--underline.tab--current {
    box-shadow: inset 0 -3px 0 0 var(--k-color-gray-900)
}

.tab--underline:not(.tab--disabled):focus-visible, .tab--underline:not(.tab--disabled):hover {
    box-shadow: inset 0 -3px 0 0 var(--k-color-kong)
}

:host {
    display: none
}

:host([active]) {
    display: block
}

.tab-panel {
    display: block
}

:host {
    display: block
}

.tabs {
    display: flex;
    flex-direction: column;
    height: 100%
}

.tabs__tab-items {
    box-shadow: inset 0 -3px 0 0 var(--k-color-gray-200);
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    gap: var(--k-size-3-5);
    position: relative
}

.tabs__body {
    display: block
}

.tabs__nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none
}

.tabs .tabs__nav::-webkit-scrollbar {
    height: 0;
    width: 0
}

:host {
    --tag-background: var(--k-color-gray-100);
    --tag-background-hover: var(--k-color-kong);
    --tag-color: var(--k-color-gray-900);
    --tag-color-hover: var(--k-color-white);
    --tag-dismiss-background-hover: var(--k-color-white-20);
    --tag-dismiss-shadow: var(--k-focus-ring-kong-4);
    display: inline-flex
}

.tag {
    align-items: center;
    background: var(--tag-background);
    border-radius: 4px;
    border-style: none;
    color: var(--tag-color);
    display: inline-flex;
    font-size: var(--tag-font-size);
    font-weight: var(--tag-font-weight);
    gap: var(--tag-gap);
    height: var(--tag-height);
    justify-content: center;
    line-height: var(--tag-line-height);
    padding: var(--tag-padding);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap
}

.tag:hover {
    background: var(--tag-background-hover)
}

.tag:hover, .tag:hover .tag__dismiss {
    color: var(--tag-color-hover)
}

.tag--size-sm {
    --tag-dismiss-font-size: 10px;
    --tag-dismiss-padding: 2px;
    --tag-font-size: 12px;
    --tag-font-weight: 600;
    --tag-gap: 1px;
    --tag-height: 20px;
    --tag-line-height: 18px;
    --tag-padding: 1px 5px
}

.tag--size-sm.tag--dismissable {
    --tag-padding: 1px 2px 1px 5px
}

.tag--size-md {
    --tag-dismiss-font-size: 12px;
    --tag-dismiss-padding: 2px;
    --tag-font-size: 14px;
    --tag-font-weight: 500;
    --tag-gap: 2px;
    --tag-height: 24px;
    --tag-line-height: 20px;
    --tag-padding: 2px 8px
}

.tag--size-md.tag--dismissable {
    --tag-padding: 2px 3px 2px 8px
}

.tag--size-lg {
    --tag-dismiss-font-size: 14px;
    --tag-dismiss-padding: 3px;
    --tag-font-size: 14px;
    --tag-font-weight: 500;
    --tag-gap: 3px;
    --tag-height: 28px;
    --tag-line-height: 20px;
    --tag-padding: 4px 10px
}

.tag--size-lg.tag--dismissable {
    --tag-padding: 4px 3px 4px 9px
}

.tag--theme-reversed {
    --tag-background-hover: var(--k-color-kong);
    --tag-background: var(--k-color-gray-900);
    --tag-color-hover: var(--k-color-white);
    --tag-color: var(--k-color-white);
    --tag-dismiss-background-hover: var(--k-color-black-20);
    --tag-dismiss-shadow: var(--k-focus-ring-dark-4)
}

.tag--blurred {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.tag__dismiss {
    align-items: flex-start;
    background: 0 0;
    border-radius: 4px;
    border-style: none;
    color: var(--tag-color);
    display: inline-flex;
    flex-direction: column;
    font-size: var(--tag-dismiss-font-size);
    padding: var(--tag-dismiss-padding)
}

.tag__dismiss:not(:disabled) k-material-icon {
    cursor: pointer
}

.tag__dismiss:hover {
    background: var(--tag-dismiss-background-hover)
}

.tag__dismiss:focus {
    outline: 0
}

.tag__dismiss:focus-visible {
    background: 0 0;
    box-shadow: var(--tag-dismiss-shadow)
}


:host {
    --k-category-tag-active-background: var(--k-color-gray-900);
    --k-category-tag-active-color: var(--k-color-white);
    --k-category-tag-background-disabled: var(--k-color-sheer-white-50);
    --k-category-tag-background: var(--k-color-sheer-white-50);
    --k-category-tag-backdrop-filter-blur: var(--k-blur-xl);
    --k-category-tag-border-disabled-color: var(--k-color-sheer-cool-black-200);
    --k-category-tag-border-color: var(--k-color-sheer-cool-black-200);
    --k-category-tag-border-color-hover: var(--k-color-sheer-cool-black-200);
    --k-category-tag-color: var(--k-color-gray-900);
    --k-category-tag-color-disabled: var(--k-color-gray-500);
    --k-category-tag-focus-background: var(--k-color-sheer-white-50);
    --k-category-tag-focus-color: var(--k-color-gray-900);
    --k-category-tag-hover-background: var(--k-color-kong);
    --k-category-tag-hover-color: var(--k-color-white);
    display: block
}

.category-tag {
    align-items: center;
    -webkit-backdrop-filter: blur(var(--k-category-tag-backdrop-filter-blur));
    backdrop-filter: blur(var(--k-category-tag-backdrop-filter-blur));
    background: var(--k-category-tag-background);
    border: 1px solid var(--k-category-tag-border-color);
    border-radius: 100px;
    box-sizing: border-box;
    color: var(--k-category-tag-color);
    display: inline-flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-medium);
    gap: 4px;
    justify-content: center;
    line-height: var(--k-line-height-sm);
    min-height: 32px;
    padding: 0 12px;
    position: relative;
    text-decoration: none;
    white-space: nowrap
}

.category-tag--has-count {
    padding: 0 6px 0 10px
}

.category-tag--has-count .category-tag__count {
    display: inline-flex;
    margin-top: -1px
}

.category-tag--theme-reversed {
    --k-category-tag-active-background: var(--k-color-white);
    --k-category-tag-active-color: var(--k-color-gray-900);
    --k-category-tag-background-disabled: var(--k-color-sheer-black-50);
    --k-category-tag-background: var(--k-color-sheer-black-50);
    --k-category-tag-border-color: var(--k-color-sheer-white-200);
    --k-category-tag-border-color-hover: var(--k-color-sheer-cool-black-200);
    --k-category-tag-border-disabled-color: var(--k-color-sheer-white-200);
    --k-category-tag-color: var(--k-color-white);
    --k-category-tag-focus-background: var(--k-color-sheer-cool-black-50);
    --k-category-tag-focus-color: var(--k-color-white)
}

.category-tag--active:not(.category-tag--disabled) {
    background: var(--k-category-tag-active-background);
    border-color: transparent;
    color: var(--k-category-tag-active-color)
}

.category-tag--disabled {
    background: var(--k-category-tag-background-disabled);
    border-color: var(--k-category-tag-border-disabled-color);
    color: var(--k-category-tag-color-disabled);
    padding: 0 12px;
    text-decoration: line-through
}

.category-tag--disabled .category-tag__count {
    display: none
}

@media (hover: hover) and (pointer: fine) {
    .category-tag:not(.category-tag--disabled):hover {
        background: var(--k-category-tag-hover-background);
        border-color: var(--k-category-tag-border-color-hover);
        color: var(--k-category-tag-hover-color)
    }
}

.category-tag:focus {
    outline: 0
}

.category-tag:focus-visible:not(.category-tag--disabled) {
    border-color: transparent;
    box-shadow: var(--k-focus-ring-kong-4)
}

.category-tag:focus-visible:not(.category-tag--disabled):not(.category-tag--active) {
    background: var(--k-category-tag-focus-background);
    color: var(--k-category-tag-focus-color)
}

:host {
    --k-category-tag-count-background: var(--k-color-sheer-cool-black-200);
    --k-category-tag-count-color: var(--k-color-sheer-cool-black-600);
    display: inline-flex
}

.category-tag-count {
    align-items: center;
    background: var(--k-category-tag-count-background);
    border-radius: 11px;
    color: var(--k-category-tag-count-color);
    display: inline-flex;
    font-size: var(--k-font-size-xs);
    font-weight: var(--k-font-weight-medium);
    gap: 10px;
    justify-content: center;
    line-height: var(--k-line-height-xs);
    padding: 1px 4px;
    text-align: center
}

.category-tag-count--theme-reversed {
    --k-category-tag-count-background: var(--k-color-sheer-white-200);
    --k-category-tag-count-color: var(--k-color-sheer-white-600)
}

:host {
    --ticker-banner-gap: 10px;
    --ticker-banner-speed: 20s;
    display: block
}

:host ::slotted(*), :host slot {
    font-family: inherit
}

@keyframes scroll {
    0% {
        transform: translateX(0);
        visibility: visible
    }
    to {
        transform: translateX(-100%)
    }
}

.ticker-banner {
    align-items: center;
    box-sizing: content-box;
    display: flex;
    height: 32px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.ticker-banner__ticker {
    animation: scroll var(--ticker-banner-speed) linear infinite;
    box-sizing: content-box;
    cursor: pointer;
    display: flex;
    padding-left: 100%;
    white-space: nowrap
}

.ticker-banner__ticker-item {
    display: inline-block;
    font-size: var(--k-font-size-lg);
    font-weight: var(--k-font-weight-bold);
    line-height: var(--k-line-height-lg);
    pointer-events: none;
    text-transform: uppercase
}

.ticker-banner__ticker-item:after {
    content: "//";
    display: inline-flex;
    padding-left: var(--ticker-banner-gap);
    padding-right: var(--ticker-banner-gap)
}

.ticker-banner__ticker-item:last-child:after {
    content: ""
}

.ticker-banner--theme-info {
    background-color: var(--k-color-blue-dark-300);
    color: var(--k-color-blue-dark-900)
}

.ticker-banner--theme-warning {
    background-color: var(--k-color-warning-400);
    color: var(--k-color-warning-900)
}

.ticker-banner--theme-urgent {
    background-color: var(--k-color-error-400);
    color: var(--k-color-error-900)
}

@media (prefers-reduced-motion: reduce) {
    .ticker-banner__ticker {
        animation-play-state: paused !important;
        display: flex;
        justify-content: center;
        padding-left: 0
    }
}

:host {
    --k-ticker-marquee-background: var(--k-color-blue-dark-300);
    --k-ticker-marquee-color: var(--k-color-blue-dark-900);
    --k-ticker-marquee-gap: 1.125rem;
    --k-ticker-marquee-speed: var(var(--k-ticker-marquee-speed), 100s);
    display: block
}

@keyframes marquee {
    0% {
        transform: translateY(-50%)
    }
    to {
        transform: translate(-50%, -50%)
    }
}

.ticker-marquee {
    background: var(--k-ticker-marquee-background);
    block-size: 32px;
    color: var(--k-ticker-marquee-color);
    display: flex;
    overflow-x: hidden;
    padding-block: 4px;
    position: relative
}

.ticker-marquee--theme-info {
    --k-ticker-marquee-background: var(--k-color-blue-dark-300);
    --k-ticker-marquee-color: var(--k-color-blue-dark-900)
}

.ticker-marquee--theme-warning {
    --k-ticker-marquee-background: var(--k-color-warning-400);
    --k-ticker-marquee-color: var(--k-color-warning-900)
}

.ticker-marquee--theme-urgent {
    --k-ticker-marquee-background: var(--k-color-error-400);
    --k-ticker-marquee-color: var(--k-color-error-900)
}

.ticker-marquee__inner {
    display: flex;
    gap: var(--k-ticker-marquee-gap);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap
}

@media (prefers-reduced-motion: no-preference) {
    .ticker-marquee__inner {
        animation: marquee var(--k-ticker-marquee-speed) linear infinite
    }
}

.ticker-marquee__item {
    align-items: center;
    display: flex;
    font-family: var(--k-font-sans);
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-md);
    margin: 0;
    padding: 0
}

.ticker-marquee__item, .ticker-marquee__item a {
    color: var(--k-ticker-marquee-color);
    text-decoration: none
}

.ticker-marquee__item a {
    font-weight: var(--k-font-weight-bold)
}

:host {
    display: contents
}

.toast {
    align-items: stretch;
    box-shadow: var(--k-shadow-xl);
    color: var(--k-color-white);
    display: flex;
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-medium);
    gap: var(--k-size-1);
    line-height: var(--k-line-height-sm);
    margin-bottom: var(--k-size-4);
    padding: var(--k-size-2-5);
    position: relative;
    transform-origin: top
}

.toast--alert {
    background-color: var(--k-color-kong)
}

.toast--default {
    background-color: var(--k-color-gray-800)
}

.toast--info {
    background-color: var(--k-color-blue-dark-500)
}

.toast--warning {
    background-color: var(--k-color-warning-500)
}

.toast__close-button:focus {
    outline: 0
}

.toast__close-button:focus-visible {
    box-shadow: 0 0 0 2px var(--k-color-white)
}

.toast__content {
    display: block;
    flex: 1 1 auto
}

.toast k-material-icon {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

:host {
    --k-tooltip-background-color: var(--k-color-gray-900);
    --k-tooltip-border-radius: 8px;
    --k-tooltip-color: var(--k-color-white);
    --k-tooltip-max-width: 320px;
    --k-tooltip-padding: 8px 12px;
    display: flex
}

.tooltip {
    --k-popup-arrow-color: var(--k-color-gray-900)
}

.tooltip::part(popup) {
    z-index: var(--k-z-index-100)
}

.tooltip[placement^=top]::part(popup) {
    transform-origin: bottom
}

.tooltip[placement^=bottom]::part(popup) {
    transform-origin: top
}

.tooltip[placement^=left]::part(popup) {
    transform-origin: right
}

.tooltip[placement^=right]::part(popup) {
    transform-origin: left
}

.tooltip__body {
    align-items: flex-start;
    align-self: stretch;
    background-color: var(--k-tooltip-background-color);
    border-radius: var(--k-tooltip-border-radius);
    color: var(--k-tooltip-color);
    display: block;
    display: flex;
    font-size: var(--k-font-size-xs);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-xs);
    max-width: var(--k-tooltip-max-width);
    padding: var(--k-tooltip-padding);
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-max-content;
    width: max-content
}

.text {
    color: inherit;
    margin: 0
}

.text--xs {
    font-size: var(--k-font-size-xs);
    line-height: var(--k-line-height-xs)
}

.text--xs.text--display {
    font-size: var(--k-font-size-display-xs);
    line-height: var(--k-line-height-display-xs)
}

.text--sm {
    font-size: var(--k-font-size-sm);
    line-height: var(--k-line-height-sm)
}

.text--sm.text--display {
    font-size: var(--k-font-size-display-sm);
    line-height: var(--k-line-height-display-sm)
}

.text--md {
    font-size: var(--k-font-size-md);
    line-height: var(--k-line-height-md)
}

.text--md.text--display {
    font-size: var(--k-font-size-display-md);
    letter-spacing: .02em;
    line-height: var(--k-line-height-display-md)
}

.text--lg {
    font-size: var(--k-font-size-lg);
    line-height: var(--k-line-height-lg)
}

.text--lg.text--display {
    font-size: var(--k-font-size-display-lg);
    letter-spacing: .02em;
    line-height: var(--k-line-height-display-lg)
}

.text--xl {
    font-size: var(--k-font-size-xl);
    line-height: var(--k-line-height-xl)
}

.text--xl.text--display {
    font-size: var(--k-font-size-display-xl);
    letter-spacing: .02em;
    line-height: var(--k-line-height-display-xl)
}

.text--xxl.text--display {
    font-size: var(--k-font-size-display-xxl);
    letter-spacing: .02em;
    line-height: var(--k-line-height-display-xxl)
}

.text--light {
    font-weight: var(--k-font-weight-light)
}

.text--normal {
    font-weight: var(--k-font-weight-normal)
}

.text--medium {
    font-weight: var(--k-font-weight-medium)
}

.text--semibold {
    font-weight: var(--k-font-weight-semibold)
}

.text--bold {
    font-weight: var(--k-font-weight-bold)
}

:host {
    --theme-effect: inherit;
    display: inline
}

.text-effect {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: var(--theme-effect, var(--effect));
    display: inline
}

.text-effect--kong-45 {
    --effect: var(--k-gradient-kong-45)
}

.text-effect--kong-fade {
    --effect: var(--k-gradient-kong-fade)
}

.text-effect--kong-glow {
    --effect: var(--k-gradient-kong-glow)
}

.text-effect--developer-45 {
    --effect: var(--k-gradient-developer-45)
}

.text-effect--unset {
    -webkit-text-fill-color: currentcolor;
    text-fill-color: currentcolor;
    -webkit-background-clip: none;
    background-clip: none;
    background-image: none;
    color: var(--k-color-white)
}

:host {
    display: block
}

.stat-item {
    color: inherit;
    gap: 14px;
    min-width: 271px
}

.stat-item, .stat-item__content {
    align-items: center;
    display: flex;
    flex-direction: column
}

.stat-item__content {
    gap: var(--k-size-1)
}

.stat-item slot[name=cta] {
    align-items: center;
    display: none;
    justify-content: center
}

.stat-item--has-cta slot[name=cta] {
    display: flex
}

.stat-item slot[name=text] {
    display: flex;
    font-size: var(--k-font-size-lg);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-lg);
    text-align: center
}

.stat-item slot:not([name]) {
    color: var(--k-color-gray-900);
    font-size: var(--k-font-size-display-md);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-display-md);
    text-align: center
}

:host {
    display: flex;
    width: 100%
}

:host([theme=default]) {
    --k-stat-item-background: var(--k-color-gray-50);
    --k-stat-item-color: var(--k-color-gray-900)
}

:host([theme=kong]) {
    --k-stat-item-background: var(--k-gradient-kong-45);
    --k-stat-item-color: var(--k-color-white)
}

:host([theme=reversed]) {
    --k-stat-item-background: var(--k-color-gray-900);
    --k-stat-item-color: var(--k-color-white)
}

.stats {
    background: var(--k-stat-item-background);
    border-radius: var(--k-size-6);
    color: var(--k-stat-item-color);
    display: flex;
    gap: var(--k-size-8);
    justify-content: space-around;
    padding: var(--k-size-8)
}

.stats--view-desktop {
    width: 100%
}

.stats--view-mobile {
    flex-direction: column
}

:host {
    display: flex
}

.stats-banner__heading {
    display: block;
    font-size: var(--k-font-size-display-md);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-display-md);
    margin: 0 auto;
    max-width: 768px;
    text-align: center
}

.stats-banner__heading::slotted(*), .stats-banner__heading > * {
    margin-bottom: var(--k-size-3-5)
}

.stats-banner--view-mobile .stats-banner__heading {
    font-size: var(--k-font-size-display-sm);
    line-height: var(--k-line-height-display-sm)
}

.stats-banner__subheading {
    display: block;
    font-size: var(--k-font-size-xl);
    font-weight: var(--k-font-weight-medium);
    line-height: var(--k-line-height-xl);
    margin: 0 auto;
    max-width: 768px;
    text-align: center
}

.stats-banner__subheading::slotted(*), .stats-banner__subheading > * {
    margin-bottom: var(--k-size-8)
}

.stats-banner--view-mobile .stats-banner__subheading {
    font-size: var(--k-font-size-lg);
    line-height: var(--k-line-height-lg);
    max-width: 335px
}

.stats-banner__stats {
    align-items: center;
    display: flex;
    justify-content: center
}

.stats-banner__stats::slotted(*) {
    margin-left: auto;
    margin-right: auto;
    width: auto
}

:host {
    --k-kongpanion-banner-height-desktop: 420px;
    --k-kongpanion-banner-height-mobile: 200px;
    display: flex
}

.kongpanion-banner {
    align-items: center;
    background-position: 50%;
    background-size: cover;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%
}

.kongpanion-banner[role=link] {
    cursor: pointer
}

.kongpanion-banner--view-desktop {
    height: var(--k-kongpanion-banner-height-desktop)
}

.kongpanion-banner--view-mobile {
    height: var(--k-kongpanion-banner-height-mobile)
}

.kongpanion-banner__kongpanion {
    display: flex;
    width: 220px
}

.kongpanion-banner--view-mobile .kongpanion-banner__kongpanion {
    flex: 1;
    width: 50%
}

.kongpanion-banner__kongpanion, .kongpanion-banner__kongpanion ::slotted(*), .kongpanion-banner__kongpanion > * {
    pointer-events: none
}

.kongpanion-banner__content {
    align-items: center;
    color: var(--k-color-white);
    display: flex;
    font-size: var(--k-font-size-display-md);
    font-weight: var(--k-font-weight-bold);
    justify-content: center;
    line-height: var(--k-line-height-display-md);
    width: 220px
}

.kongpanion-banner--view-mobile .kongpanion-banner__content {
    flex: none;
    font-size: var(--k-font-size-xl);
    line-height: var(--k-line-height-xl);
    width: 50%
}

.kongpanion-banner__content, .kongpanion-banner__content ::slotted(*), .kongpanion-banner__content > * {
    pointer-events: none
}

.kongpanion-banner__badge {
    display: flex;
    margin-left: var(--k-size-8);
    max-width: 430px;
    width: 430px
}

.kongpanion-banner__play-now {
    bottom: var(--k-size-4);
    position: absolute;
    right: var(--k-size-4)
}

:host {
    --k-inpage-banner-background: var(--k-color-gray-50);
    --k-inpage-banner-color: var(--k-color-gray-900);
    display: flex
}

.inpage-banner {
    align-items: center;
    background: var(--k-inpage-banner-background);
    border-radius: 24px;
    color: var(--k-inpage-banner-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    width: 100%
}

.inpage-banner--theme-reversed {
    --k-inpage-banner-background: var(--k-color-gray-800);
    --k-inpage-banner-color: var(--k-color-white)
}

.inpage-banner__actions {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    width: 100%
}

@media (min-width: 64rem) {
    .inpage-banner__actions {
        flex-direction: row
    }
}

:host([breakpoint=lg]) .inpage-banner__actions, :host([breakpoint=xl]) .inpage-banner__actions {
    flex-direction: row
}

.inpage-banner__body {
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-normal);
    line-height: var(--k-line-height-md);
    text-align: center
}

.inpage-banner__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--k-size-3);
    width: 100%
}

@media (min-width: 64rem) {
    .inpage-banner__content {
        gap: 8px;
        max-width: 768px
    }
}

:host([breakpoint=lg]) .inpage-banner__content, :host([breakpoint=xl]) .inpage-banner__content {
    gap: 8px;
    max-width: 768px
}

.inpage-banner__heading {
    font-size: var(--k-font-size-display-xs);
    font-weight: var(--k-font-weight-semibold);
    line-height: var(--k-line-height-display-xs);
    text-align: center
}

@media (min-width: 64rem) {
    .inpage-banner__heading {
        font-size: var(--k-font-size-display-xs);
        line-height: var(--k-line-height-display-xs)
    }
}

:host([breakpoint=lg]) .inpage-banner__heading, :host([breakpoint=xl]) .inpage-banner__heading {
    font-size: var(--k-font-size-display-xs);
    line-height: var(--k-line-height-display-xs)
}

:host {
    --k-empty-state-image-height: 100px;
    --k-empty-state-image-width: 100px;
    --k-empty-state-content-font-color: var(--k-color-gray-900);
    --k-empty-state-content-font-size: var(--k-font-size-md);
    --k-empty-state-content-line-height: var(--k-line-height-md);
    --k-empty-state-heading-font-color: var(--k-color-gray-900);
    --k-empty-state-heading-font-size: var(--k-font-size-xl);
    --k-empty-state-heading-font-weight: var(--k-font-weight-semibold);
    --k-empty-state-heading-line-height: var(--k-line-height-xl);
    display: block
}

.empty-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 32px;
    width: 768px
}

@media (min-width: 64rem) {
    .empty-state {
        --k-empty-state-content-font-size: var(--k-font-size-md);
        --k-empty-state-content-line-height: var(--k-line-height-md);
        --k-empty-state-heading-font-size: var(--k-font-size-display-xs);
        --k-empty-state-heading-line-height: var(--k-line-height-display-xs)
    }
}

:host([breakpoint=lg]) .empty-state, :host([breakpoint=xl]) .empty-state {
    --k-empty-state-content-font-size: var(--k-font-size-md);
    --k-empty-state-content-line-height: var(--k-line-height-md);
    --k-empty-state-heading-font-size: var(--k-font-size-display-xs);
    --k-empty-state-heading-line-height: var(--k-line-height-display-xs)
}

.empty-state.empty-state--size-lg {
    --k-empty-state-image-height: 100px;
    --k-empty-state-image-width: 100px
}

@media (min-width: 64rem) {
    .empty-state.empty-state--size-lg {
        --k-empty-state-image-height: 140px;
        --k-empty-state-image-width: 140px
    }
}

:host([breakpoint=lg]) .empty-state.empty-state--size-lg, :host([breakpoint=xl]) .empty-state.empty-state--size-lg {
    --k-empty-state-image-height: 140px;
    --k-empty-state-image-width: 140px
}

.empty-state.empty-state--size-sm {
    --k-empty-state-image-height: 80px;
    --k-empty-state-image-width: 80px
}

@media (min-width: 64rem) {
    .empty-state.empty-state--size-sm {
        --k-empty-state-image-height: 80px;
        --k-empty-state-image-width: 80px
    }
}

:host([breakpoint=lg]) .empty-state.empty-state--size-sm, :host([breakpoint=xl]) .empty-state.empty-state--size-sm {
    --k-empty-state-image-height: 80px;
    --k-empty-state-image-width: 80px
}

.empty-state--size-sm {
    --k-empty-state-content-gap: 4px;
    --k-empty-state-content-font-size: var(--k-font-size-sm);
    --k-empty-state-content-line-height: var(--k-line-height-sm);
    --k-empty-state-heading-font-size: var(--k-font-size-lg);
    --k-empty-state-heading-line-height: var(--k-line-height-lg)
}

.empty-state--size-lg {
    --k-empty-state-content-gap: 8px
}

.empty-state--theme-reversed {
    --k-empty-state-content-font-color: var(--k-color-gray-400);
    --k-empty-state-heading-font-color: var(--k-color-gray-400)
}

.empty-state__actions {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 12px;
    justify-content: center
}

.empty-state__body {
    align-items: flex-start;
    gap: var(--k-empty-state-content-gap)
}

.empty-state__body, .empty-state__content {
    align-self: stretch;
    display: flex;
    flex-direction: column
}

.empty-state__content {
    color: var(--k-empty-state-content-font-color);
    font-size: var(--k-empty-state-content-font-size);
    font-weight: var(--k-font-weight-normal);
    line-height: var(--k-empty-state-content-line-height);
    text-align: center
}

.empty-state__heading {
    align-self: stretch;
    color: var(--k-empty-state-heading-font-color);
    display: flex;
    flex-direction: column;
    font-size: var(--k-empty-state-heading-font-size);
    font-weight: var(--k-empty-state-heading-font-weight);
    line-height: var(--k-empty-state-heading-line-height);
    text-align: center
}

.empty-state__image::slotted(*) {
    height: var(--k-empty-state-image-height);
    width: var(--k-empty-state-image-width)
}

:host {
    --k-rating-color: var(--k-color-gray-900);
    --k-rating-gap: var(--k-size-0-5);
    --k-rating-star-color-active: var(--k-color-kong);
    --k-rating-star-color-inactive: var(--k-color-sheer-cool-black-400);
    --k-rating-star-size: 1.125rem;
    display: inline-flex
}

.rating {
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    font-size: var(--k-font-size-sm);
    gap: var(--k-rating-gap);
    line-height: var(--k-line-height-sm)
}

.rating:focus, .rating:focus-visible {
    outline: 0
}

.rating:focus-visible {
    box-shadow: var(--k-focus-ring-kong-4)
}

.rating--theme-reversed {
    --k-rating-color: var(--k-color-white);
    --k-rating-star-color-active: var(--k-color-kong);
    --k-rating-star-color-inactive: var(--k-color-sheer-white-400)
}

@media (hover: hover) and (pointer: fine) {
    .rating--disabled .rating__star:hover, .rating--readonly .rating__star:hover {
        transform: scale(1)
    }
}

.rating--disabled .rating__stars, .rating--readonly .rating__stars {
    cursor: not-allowed
}

.rating--mini {
    pointer-events: none
}

.rating--mini .rating__star:nth-child(n+2) {
    display: none
}

.rating__score {
    color: var(--k-rating-color);
    display: flex;
    font-size: var(--k-font-size-sm);
    font-variant-numeric: tabular-nums;
    font-weight: var(--k-font-weight-semibold);
    justify-content: flex-end;
    line-height: var(--k-line-height-sm);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.rating__star {
    color: var(--k-color-kong);
    display: inline-flex;
    font-size: var(--k-rating-star-size);
    position: relative;
    transition: transform var(--k-transition-fast) ease-out
}

@media (hover: hover) and (pointer: fine) {
    .rating__star:hover {
        transform: scale(1.3)
    }
}

.rating__star--partial {
    color: var(--k-rating-star-color-inactive)
}

.rating__star--static {
    align-items: center;
    display: none;
    line-height: 0;
    position: relative
}

.rating__star-container {
    height: 100%;
    overflow: hidden;
    position: absolute
}

.rating__stars {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: var(--k-rating-gap);
    line-height: 0;
    position: relative;
    white-space: nowrap
}

.rating k-icon {
    pointer-events: none
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
    /* Blurs */
    --k-blur-xs: 1.5px;
    --k-blur-sm: 4px;
    --k-blur-md: 8px;
    --k-blur-lg: 12px;
    --k-blur-xl: 20px;
    --k-blur-xxl: 40px;
    --k-blur-xxxl: 60px;

    /* Breakpoints */
    --k-breakpoint-sm: 40rem;
    --k-breakpoint-md: 45rem;
    --k-breakpoint-lg: 64rem;
    --k-breakpoint-xl: 80rem;
    --k-breakpoint-xxl: 90rem;

    /* Colors */
    --k-color-sheer-black-10: rgba(0 0 0 / 1%);
    --k-color-sheer-black-50: rgba(0 0 0 / 5%);
    --k-color-sheer-black-100: rgba(0 0 0 / 10%);
    --k-color-sheer-black-200: rgba(0 0 0 / 20%);
    --k-color-sheer-black-300: rgba(0 0 0 / 30%);
    --k-color-sheer-black-400: rgba(0 0 0 / 40%);
    --k-color-sheer-black-500: rgba(0 0 0 / 50%);
    --k-color-sheer-black-600: rgba(0 0 0 / 60%);
    --k-color-sheer-black-700: rgba(0 0 0 / 70%);
    --k-color-sheer-black-800: rgba(0 0 0 / 80%);
    --k-color-sheer-black-900: rgba(0 0 0 / 90%);
    --k-color-sheer-black-950: rgba(0 0 0 / 95%);
    --k-color-sheer-cool-black-10: rgba(13 18 28 / 1%);
    --k-color-sheer-cool-black-50: rgba(13 18 28 / 5%);
    --k-color-sheer-cool-black-100: rgba(13 18 28 / 10%);
    --k-color-sheer-cool-black-200: rgba(13 18 28 / 20%);
    --k-color-sheer-cool-black-300: rgba(13 18 28 / 30%);
    --k-color-sheer-cool-black-400: rgba(13 18 28 / 40%);
    --k-color-sheer-cool-black-500: rgba(13 18 28 / 50%);
    --k-color-sheer-cool-black-600: rgba(13 18 28 / 60%);
    --k-color-sheer-cool-black-700: rgba(13 18 28 / 70%);
    --k-color-sheer-cool-black-800: rgba(13 18 28 / 80%);
    --k-color-sheer-cool-black-900: rgba(13 18 28 / 90%);
    --k-color-sheer-cool-black-950: rgba(13 18 28 / 95%);
    --k-color-sheer-primary-10: rgba(240 68 56 / 1%);
    --k-color-sheer-primary-50: rgba(240 68 56 / 5%);
    --k-color-sheer-primary-100: rgba(240 68 56 / 10%);
    --k-color-sheer-primary-200: rgba(240 68 56 / 20%);
    --k-color-sheer-primary-300: rgba(240 68 56 / 30%);
    --k-color-sheer-primary-400: rgba(240 68 56 / 40%);
    --k-color-sheer-primary-500: rgba(240 68 56 / 50%);
    --k-color-sheer-primary-600: rgba(240 68 56 / 60%);
    --k-color-sheer-primary-700: rgba(240 68 56 / 70%);
    --k-color-sheer-primary-800: rgba(240 68 56 / 80%);
    --k-color-sheer-primary-900: rgba(240 68 56 / 90%);
    --k-color-sheer-primary-950: rgba(240 68 56 / 95%);
    --k-color-sheer-white-10: rgba(255 255 255 / 1%);
    --k-color-sheer-white-50: rgba(255 255 255 / 5%);
    --k-color-sheer-white-100: rgba(255 255 255 / 10%);
    --k-color-sheer-white-200: rgba(255 255 255 / 20%);
    --k-color-sheer-white-300: rgba(255 255 255 / 30%);
    --k-color-sheer-white-400: rgba(255 255 255 / 40%);
    --k-color-sheer-white-500: rgba(255 255 255 / 50%);
    --k-color-sheer-white-600: rgba(255 255 255 / 60%);
    --k-color-sheer-white-700: rgba(255 255 255 / 70%);
    --k-color-sheer-white-800: rgba(255 255 255 / 80%);
    --k-color-sheer-white-900: rgba(255 255 255 / 90%);
    --k-color-sheer-white-950: rgba(255 255 255 / 95%);

    --k-color-black-12: rgb(0 0 0 / 12%);
    --k-color-black-20: rgb(0 0 0 / 20%);
    --k-color-black-6: rgb(0 0 0 / 6%);
    --k-color-black: #000;
    --k-color-blue-25: #f5faff;
    --k-color-blue-50: #eff8ff;
    --k-color-blue-100: #d1e9ff;
    --k-color-blue-200: #b2ddff;
    --k-color-blue-300: #84caff;
    --k-color-blue-400: #53b1fd;
    --k-color-blue-500: #2e90fa;
    --k-color-blue-600: #1570ef;
    --k-color-blue-700: #175cd3;
    --k-color-blue-800: #1849a9;
    --k-color-blue-900: #194185;
    --k-color-blue-dark-25: #f5f8ff;
    --k-color-blue-dark-50: #eff4ff;
    --k-color-blue-dark-100: #d1e0ff;
    --k-color-blue-dark-200: #b2ccff;
    --k-color-blue-dark-300: #84adff;
    --k-color-blue-dark-400: #528bff;
    --k-color-blue-dark-500: #2970ff;
    --k-color-blue-dark-600: #155eef;
    --k-color-blue-dark-700: #004eeb;
    --k-color-blue-dark-800: #0040c1;
    --k-color-blue-dark-900: #00359e;
    --k-color-blue-light-25: #f5fbff;
    --k-color-blue-light-50: #f0f9ff;
    --k-color-blue-light-100: #e0f2fe;
    --k-color-blue-light-200: #b9e6fe;
    --k-color-blue-light-300: #7cd4fd;
    --k-color-blue-light-400: #36bffa;
    --k-color-blue-light-500: #0ba5ec;
    --k-color-blue-light-600: #0086c9;
    --k-color-blue-light-700: #026aa2;
    --k-color-blue-light-800: #065986;
    --k-color-blue-light-900: #0b4a6f;
    --k-color-cyan-25: #f5feff;
    --k-color-cyan-50: #ecfdff;
    --k-color-cyan-100: #cff9fe;
    --k-color-cyan-200: #a5f0fc;
    --k-color-cyan-300: #67e3f9;
    --k-color-cyan-400: #2ce;
    --k-color-cyan-500: #06aed4;
    --k-color-cyan-600: #088ab2;
    --k-color-cyan-700: #0e7090;
    --k-color-cyan-800: #155b75;
    --k-color-cyan-900: #164c63;
    --k-color-error-25: #fffbfa;
    --k-color-error-50: #fef3f2;
    --k-color-error-100: #fee4e2;
    --k-color-error-200: #fecdca;
    --k-color-error-300: #fda29b;
    --k-color-error-400: #f97066;
    --k-color-error-500: #f04438;
    --k-color-error-600: #d92d20;
    --k-color-error-700: #b42318;
    --k-color-error-800: #912018;
    --k-color-error-900: #7a271a;
    --k-color-fuchsia-25: #fefaff;
    --k-color-fuchsia-50: #fdf4ff;
    --k-color-fuchsia-100: #fbe8ff;
    --k-color-fuchsia-200: #f6d0fe;
    --k-color-fuchsia-300: #eeaafd;
    --k-color-fuchsia-400: #e478fa;
    --k-color-fuchsia-500: #d444f1;
    --k-color-fuchsia-600: #ba24d5;
    --k-color-fuchsia-700: #9f1ab1;
    --k-color-fuchsia-800: #821890;
    --k-color-fuchsia-900: #6f1877;
    --k-color-gray-25: #fcfcfd;
    --k-color-gray-50: #f8fafc;
    --k-color-gray-100: #eef2f6;
    --k-color-gray-200: #e3e8ef;
    --k-color-gray-300: #cdd5df;
    --k-color-gray-400: #9aa4b2;
    --k-color-gray-500: #697586;
    --k-color-gray-600: #4b5565;
    --k-color-gray-700: #364152;
    --k-color-gray-800: #202939;
    --k-color-gray-900: #121926;
    --k-color-gray-base-25: #fcfcfd;
    --k-color-gray-base-50: #f9fafb;
    --k-color-gray-base-100: #f2f4f7;
    --k-color-gray-base-200: #eaecf0;
    --k-color-gray-base-300: #d0d5dd;
    --k-color-gray-base-400: #98a2b3;
    --k-color-gray-base-500: #667085;
    --k-color-gray-base-600: #475467;
    --k-color-gray-base-700: #344054;
    --k-color-gray-base-800: #1d2939;
    --k-color-gray-base-900: #101828;
    --k-color-gray-blue-25: #fcfcfd;
    --k-color-gray-blue-50: #f8f9fc;
    --k-color-gray-blue-100: #eaecf5;
    --k-color-gray-blue-200: #d5d9eb;
    --k-color-gray-blue-300: #b3b8db;
    --k-color-gray-blue-400: #717bbc;
    --k-color-gray-blue-500: #4e5ba6;
    --k-color-gray-blue-600: #3e4784;
    --k-color-gray-blue-700: #363f72;
    --k-color-gray-blue-800: #293056;
    --k-color-gray-blue-900: #101323;
    --k-color-gray-cool-25: #fcfcfd;
    --k-color-gray-cool-50: #f9f9fb;
    --k-color-gray-cool-100: #eff1f5;
    --k-color-gray-cool-200: #dcdfea;
    --k-color-gray-cool-300: #b9c0d4;
    --k-color-gray-cool-400: #7d89b0;
    --k-color-gray-cool-500: #5d6b98;
    --k-color-gray-cool-600: #4a5578;
    --k-color-gray-cool-700: #404968;
    --k-color-gray-cool-800: #30374f;
    --k-color-gray-cool-900: #111322;
    --k-color-gray-iron-25: #fcfcfc;
    --k-color-gray-iron-50: #fafafa;
    --k-color-gray-iron-100: #f4f4f5;
    --k-color-gray-iron-200: #e4e4e7;
    --k-color-gray-iron-300: #d1d1d6;
    --k-color-gray-iron-400: #a0a0ab;
    --k-color-gray-iron-500: #70707b;
    --k-color-gray-iron-600: #51525c;
    --k-color-gray-iron-700: #3f3f46;
    --k-color-gray-iron-800: #26272b;
    --k-color-gray-iron-900: #18181b;
    --k-color-gray-modern-25: #fcfcfd;
    --k-color-gray-modern-50: #f8fafc;
    --k-color-gray-modern-100: #eef2f6;
    --k-color-gray-modern-200: #e3e8ef;
    --k-color-gray-modern-300: #cdd5df;
    --k-color-gray-modern-400: #9aa4b2;
    --k-color-gray-modern-500: #697586;
    --k-color-gray-modern-600: #4b5565;
    --k-color-gray-modern-700: #364152;
    --k-color-gray-modern-800: #202939;
    --k-color-gray-modern-900: #121926;
    --k-color-gray-neutral-25: #fcfcfd;
    --k-color-gray-neutral-50: #f9fafb;
    --k-color-gray-neutral-100: #f3f4f6;
    --k-color-gray-neutral-200: #e5e7eb;
    --k-color-gray-neutral-300: #d2d6db;
    --k-color-gray-neutral-400: #9da4ae;
    --k-color-gray-neutral-500: #6c737f;
    --k-color-gray-neutral-600: #4d5761;
    --k-color-gray-neutral-700: #384250;
    --k-color-gray-neutral-800: #1f2a37;
    --k-color-gray-neutral-900: #111927;
    --k-color-gray-true-25: #fcfcfc;
    --k-color-gray-true-50: #fafafa;
    --k-color-gray-true-100: #f5f5f5;
    --k-color-gray-true-200: #e5e5e5;
    --k-color-gray-true-300: #d6d6d6;
    --k-color-gray-true-400: #a3a3a3;
    --k-color-gray-true-500: #737373;
    --k-color-gray-true-600: #525252;
    --k-color-gray-true-700: #424242;
    --k-color-gray-true-800: #292929;
    --k-color-gray-true-900: #141414;
    --k-color-gray-warm-25: #fdfdfc;
    --k-color-gray-warm-50: #fafaf9;
    --k-color-gray-warm-100: #f5f5f4;
    --k-color-gray-warm-200: #e7e5e4;
    --k-color-gray-warm-300: #d7d3d0;
    --k-color-gray-warm-400: #a9a29d;
    --k-color-gray-warm-500: #79716b;
    --k-color-gray-warm-600: #57534e;
    --k-color-gray-warm-700: #44403c;
    --k-color-gray-warm-800: #292524;
    --k-color-gray-warm-900: #1c1917;
    --k-color-green-25: #f6fef9;
    --k-color-green-50: #edfcf2;
    --k-color-green-100: #d3f8df;
    --k-color-green-200: #aaf0c4;
    --k-color-green-300: #73e2a3;
    --k-color-green-400: #3ccb7f;
    --k-color-green-500: #16b364;
    --k-color-green-600: #099250;
    --k-color-green-700: #087443;
    --k-color-green-800: #095c37;
    --k-color-green-900: #084c2e;
    --k-color-green-light-25: #fafef5;
    --k-color-green-light-50: #f3fee7;
    --k-color-green-light-100: #e3fbcc;
    --k-color-green-light-200: #d0f8ab;
    --k-color-green-light-300: #a6ef67;
    --k-color-green-light-400: #85e13a;
    --k-color-green-light-500: #66c61c;
    --k-color-green-light-600: #4ca30d;
    --k-color-green-light-700: #3b7c0f;
    --k-color-green-light-800: #326212;
    --k-color-green-light-900: #2b5314;
    --k-color-indigo-25: #f5f8ff;
    --k-color-indigo-50: #eef4ff;
    --k-color-indigo-100: #e0eaff;
    --k-color-indigo-200: #c7d7fe;
    --k-color-indigo-300: #a4bcfd;
    --k-color-indigo-400: #8098f9;
    --k-color-indigo-500: #6172f3;
    --k-color-indigo-600: #444ce7;
    --k-color-indigo-700: #3538cd;
    --k-color-indigo-800: #2d31a6;
    --k-color-indigo-900: #2d3282;
    --k-color-kong-12: rgb(240 68 56 / 12%);
    --k-color-kong-20: rgb(240 68 56 / 16%);
    --k-color-kong-40: rgb(240 68 56 / 40%);
    --k-color-kong: #f04438;
    --k-color-moss-25: #fafdf7;
    --k-color-moss-50: #f5fbee;
    --k-color-moss-100: #e6f4d7;
    --k-color-moss-200: #ceeab0;
    --k-color-moss-300: #acdc79;
    --k-color-moss-400: #86cb3c;
    --k-color-moss-500: #669f2a;
    --k-color-moss-600: #4f7a21;
    --k-color-moss-700: #3f621a;
    --k-color-moss-800: #335015;
    --k-color-moss-900: #2b4212;
    --k-color-orange-25: #fefaf5;
    --k-color-orange-50: #fef6ee;
    --k-color-orange-100: #fdead7;
    --k-color-orange-200: #f9dbaf;
    --k-color-orange-300: #f7b27a;
    --k-color-orange-400: #f38744;
    --k-color-orange-500: #ef6820;
    --k-color-orange-600: #e04f16;
    --k-color-orange-700: #b93815;
    --k-color-orange-800: #932f19;
    --k-color-orange-900: #772917;
    --k-color-orange-dark-25: #fff9f5;
    --k-color-orange-dark-50: #fff4ed;
    --k-color-orange-dark-100: #ffe6d5;
    --k-color-orange-dark-200: #ffd6ae;
    --k-color-orange-dark-300: #ff9c66;
    --k-color-orange-dark-400: #ff692e;
    --k-color-orange-dark-500: #ff4405;
    --k-color-orange-dark-600: #e62e05;
    --k-color-orange-dark-700: #bc1b06;
    --k-color-orange-dark-800: #97180c;
    --k-color-orange-dark-900: #771a0d;
    --k-color-pink-25: #fef6fb;
    --k-color-pink-50: #fdf2fa;
    --k-color-pink-100: #fce7f6;
    --k-color-pink-200: #fcceee;
    --k-color-pink-300: #faa7e0;
    --k-color-pink-400: #f670c7;
    --k-color-pink-500: #ee46bc;
    --k-color-pink-600: #dd2590;
    --k-color-pink-700: #c11574;
    --k-color-pink-800: #9e165f;
    --k-color-pink-900: #851651;
    --k-color-purple-25: #fafaff;
    --k-color-purple-50: #f4f3ff;
    --k-color-purple-100: #ebe9fe;
    --k-color-purple-200: #d9d6fe;
    --k-color-purple-300: #bdb4fe;
    --k-color-purple-400: #9b8afb;
    --k-color-purple-500: #7a5af8;
    --k-color-purple-600: #6938ef;
    --k-color-purple-700: #5925dc;
    --k-color-purple-800: #4a1fb8;
    --k-color-purple-900: #3e1c96;
    --k-color-rose-25: #fff5f6;
    --k-color-rose-50: #fff1f3;
    --k-color-rose-100: #ffe4e8;
    --k-color-rose-200: #fecdd6;
    --k-color-rose-300: #fea3b4;
    --k-color-rose-400: #fd6f8e;
    --k-color-rose-500: #f63d68;
    --k-color-rose-600: #e31b54;
    --k-color-rose-700: #c01048;
    --k-color-rose-800: #a11043;
    --k-color-rose-900: #89123e;
    --k-color-success-25: #f6fef9;
    --k-color-success-50: #ecfdf3;
    --k-color-success-100: #d1fadf;
    --k-color-success-200: #a6f4c5;
    --k-color-success-300: #6ce9a6;
    --k-color-success-400: #32d583;
    --k-color-success-500: #12b76a;
    --k-color-success-600: #039855;
    --k-color-success-700: #027a48;
    --k-color-success-800: #05603a;
    --k-color-success-900: #054f31;
    --k-color-teal-25: #f6fefc;
    --k-color-teal-50: #f0fdf9;
    --k-color-teal-100: #ccfbef;
    --k-color-teal-200: #99f6e0;
    --k-color-teal-300: #5fe9d0;
    --k-color-teal-400: #2ed3b7;
    --k-color-teal-500: #15b79e;
    --k-color-teal-600: #0e9384;
    --k-color-teal-700: #107569;
    --k-color-teal-800: #125d56;
    --k-color-teal-900: #134e48;
    --k-color-violet-25: #fbfaff;
    --k-color-violet-50: #f5f3ff;
    --k-color-violet-100: #ece9fe;
    --k-color-violet-200: #ddd6fe;
    --k-color-violet-300: #c3b5fd;
    --k-color-violet-400: #a48afb;
    --k-color-violet-500: #875bf7;
    --k-color-violet-600: #7839ee;
    --k-color-violet-700: #6927da;
    --k-color-violet-800: #5720b7;
    --k-color-violet-900: #491c96;
    --k-color-warning-25: #fffcf5;
    --k-color-warning-50: #fffaeb;
    --k-color-warning-100: #fef0c7;
    --k-color-warning-200: #fedf89;
    --k-color-warning-300: #fec84b;
    --k-color-warning-400: #fdb022;
    --k-color-warning-500: #f79009;
    --k-color-warning-600: #dc6803;
    --k-color-warning-700: #b54708;
    --k-color-warning-800: #93370d;
    --k-color-warning-900: #7a2e0e;
    --k-color-white-12: rgb(255 255 255 / 12%);
    --k-color-white-20: rgb(255 255 255 / 20%);
    --k-color-white: #fff;
    --k-color-yellow-25: #fefdf0;
    --k-color-yellow-50: #fefbe8;
    --k-color-yellow-100: #fef7c3;
    --k-color-yellow-200: #feee95;
    --k-color-yellow-300: #fde272;
    --k-color-yellow-400: #fac515;
    --k-color-yellow-500: #eaaa08;
    --k-color-yellow-600: #ca8504;
    --k-color-yellow-700: #a15c07;
    --k-color-yellow-800: #854a0e;
    --k-color-yellow-900: #713b12;
    --k-color-pressed-light: linear-gradient(
            0deg,
            var(--k-color-black-12),
            var(--k-color-black-12)
    ),
    var(--k-color-gray-100);
    --k-color-pressed-dark: linear-gradient(
            0deg,
            var(--k-color-white-12),
            var(--k-color-white-12)
    ),
    var(--k-color-gray-900);
    --k-color-pressed-kong: linear-gradient(
            0deg,
            var(--k-color-black-20),
            var(--k-color-black-20)
    ),
    var(--k-color-kong);
    --k-color-primary-glow: linear-gradient(
            0deg,
            var(--k-color-fuchsia-400),
            var(--k-color-kong)
    );
    /* Focus Rings */
    --k-focus-ring-3: 3px;
    --k-focus-ring-4: 4px;
    --k-focus-ring-kong-3: 0 0 0 3px var(--k-color-kong);
    --k-focus-ring-kong-4: 0 0 0 4px var(--k-color-kong);
    --k-focus-ring-transp-kong-4: 0 0 0 4px var(--k-color-kong-40);
    --k-focus-ring-kong-6: 0 0 0 6px var(--k-color-kong);
    --k-focus-ring-dark-4: 0 0 0 4px var(--k-color-gray-900);
    --k-focus-ring-dark-6: 0 0 0 6px var(--k-color-gray-900);

    /* Font Families */
    --k-font-sans: inter, ui-sans-serif, system-ui, -apple-system,
    blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans,
    sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol,
    noto color emoji;

    /* Font Sizes */
    --k-font-size-xs: 0.75rem;
    --k-font-size-sm: 0.875rem;
    --k-font-size-md: 1rem;
    --k-font-size-lg: 1.125rem;
    --k-font-size-xl: 1.25rem;
    --k-font-size-display-xs: 1.5rem;
    --k-font-size-display-sm: 1.875rem;
    --k-font-size-display-base: 2.25rem;
    --k-font-size-display-md: 2.25rem;
    --k-font-size-display-lg: 3rem;
    --k-font-size-display-xl: 3.75rem;
    --k-font-size-display-xxl: 4.5rem;

    /* Font Weights */
    --k-font-weight-light: 300;
    --k-font-weight-normal: 400;
    --k-font-weight-medium: 500;
    --k-font-weight-semibold: 600;
    --k-font-weight-bold: 700;

    /* Gradients */
    --k-gradient-developer-45: linear-gradient(
            104.62deg,
            #2970ff 39.66%,
            #e478fa 100%
    );
    --k-gradient-kong-45: linear-gradient(
            104.62deg,
            var(--k-color-kong) 39.66%,
            #e478fa 100%
    );
    --k-gradient-kong-fade: linear-gradient(
            180deg,
            #eeaafd 0%,
            var(--k-color-kong) 59.9%
    );
    --k-gradient-kong-glow: linear-gradient(
            180deg,
            var(--k-color-kong) 0%,
            #e478fa 100%
    );
    --k-gradient-primary-glow: linear-gradient(
            180deg,
            var(--k-color-fuchsia-400) 0%,
            var(--k-color-kong) 100%
    );

    /* Line Heights */
    --k-line-height-xs: 1.125rem;
    --k-line-height-sm: 1.25rem;
    --k-line-height-md: 1.5rem;
    --k-line-height-lg: 1.75rem;
    --k-line-height-xl: 1.875rem;
    --k-line-height-display-xs: 2rem;
    --k-line-height-display-sm: 2.375rem;
    --k-line-height-display-md: 2.75rem;
    --k-line-height-display-lg: 3.75rem;
    --k-line-height-display-xl: 4.5rem;
    --k-line-height-display-xxl: 5.625rem;

    /* Shadows */
    --k-shadow-xs: 0px 1px 2px rgb(0 0 0 / 5%);
    --k-shadow-sm: 0px 1px 3px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 6%);
    --k-shadow-md: 0px 4px 8px -2px rgb(0 0 0 / 10%),
    0px 2px 4px -2px rgb(0 0 0 / 6%);
    --k-shadow-lg: 0px 20px 24px -4px rgb(0 0 0 / 8%),
    0px 8px 8px -4px rgb(0 0 0 / 3%);
    --k-shadow-xl: 0px 20px 24px -4px rgb(0 0 0 / 8%),
    0px 8px 8px -4px rgb(0 0 0 / 3%);
    --k-shadow-xxl: 0px 24px 48px -12px rgb(0 0 0 / 18%);
    --k-shadow-xxxl: 0px 32px 64px -12px rgb(0 0 0 / 14%);

    /* Sizes */
    --k-size-px: 0.0625rem;
    --k-size-0-5: 0.125rem;
    --k-size-1: 0.25rem;
    --k-size-1-5: 0.375rem;
    --k-size-2: 0.5rem;
    --k-size-2-5: 0.625rem;
    --k-size-3: 0.75rem;
    --k-size-3-5: 0.875rem;
    --k-size-4: 1rem;
    --k-size-5: 1.25rem;
    --k-size-6: 1.5rem;
    --k-size-7: 1.75rem;
    --k-size-8: 2rem;
    --k-size-9: 2.25rem;
    --k-size-10: 2.5rem;
    --k-size-11: 2.75rem;
    --k-size-12: 3rem;
    --k-size-14: 3.5rem;
    --k-size-16: 4rem;
    --k-size-20: 5rem;
    --k-size-24: 6rem;
    --k-size-28: 7rem;
    --k-size-32: 8rem;
    --k-size-36: 9rem;
    --k-size-40: 10rem;
    --k-size-44: 11rem;
    --k-size-48: 12rem;
    --k-size-52: 13rem;
    --k-size-56: 14rem;
    --k-size-60: 15rem;
    --k-size-64: 16rem;
    --k-size-72: 18rem;
    --k-size-80: 20rem;
    --k-size-96: 24rem;

    /* Transitions */
    --k-transition-x-slow: 1000ms; /* 1000ms */
    --k-transition-slow: 500ms; /* 500ms */
    --k-transition-medium: 250ms; /* 250ms */
    --k-transition-fast: 150ms; /* 150ms */
    --k-transition-x-fast: 100m; /* 100m */

    /* Z Indexes */
    --k-z-index-10: 10;
    --k-z-index-20: 20;
    --k-z-index-30: 30;
    --k-z-index-40: 40;
    --k-z-index-50: 50;
    --k-z-index-100: 100;
}