html {
    font-size: 62.5%;
}
html.cf-theme-dark {
    color-scheme: dark;
}
:root, :root.cf-theme-dark .theme-inverted, :root.cf-theme-dark .theme-always-light, :root.cf-theme-light .theme-inverted .theme-always-light {
    --min-screen-width: 320px;
    --max-screen-width: 1280px;
    --primary: hsl(256, 84.11%, 64%);
    --primary-5: hsla(256, 84%, 64%, 0.05);
    --primary-10: hsla(256, 84%, 64%, 0.1);
    --primary-20: hsla(256, 84%, 64%, 0.2);
    --primary-30: hsla(256, 84%, 64%, 0.3);
    --primary-40: hsla(256, 84%, 64%, 0.4);
    --primary-50: hsla(256, 84%, 64%, 0.5);
    --primary-60: hsla(256, 84%, 64%, 0.6);
    --primary-70: hsla(256, 84%, 64%, 0.7);
    --primary-80: hsla(256, 84%, 64%, 0.8);
    --primary-90: hsla(256, 84%, 64%, 0.9);
    --primary-d-1: hsl(256, 46%, 50%);
    --primary-d-2: hsl(257, 44%, 37%);
    --primary-d-3: hsl(258, 41%, 25%);
    --primary-d-4: hsl(260, 34%, 14%);
    --primary-l-1: hsl(258, 85%, 71%);
    --primary-l-2: hsl(260, 87%, 78%);
    --primary-l-3: hsl(261, 89%, 86%);
    --primary-l-4: hsl(263, 91%, 93%);
    --secondary: hsla(0, 94%, 68%, 1);
    --secondary-5: hsla(0, 94%, 68%, 0.05);
    --secondary-10: hsla(0, 94%, 68%, 0.1);
    --secondary-20: hsla(0, 94%, 68%, 0.2);
    --secondary-30: hsla(0, 94%, 68%, 0.3);
    --secondary-40: hsla(0, 94%, 68%, 0.4);
    --secondary-50: hsla(0, 94%, 68%, 0.5);
    --secondary-60: hsla(0, 94%, 68%, 0.6);
    --secondary-70: hsla(0, 94%, 68%, 0.7);
    --secondary-80: hsla(0, 94%, 68%, 0.8);
    --secondary-90: hsla(0, 94%, 68%, 0.9);
    --secondary-d-1: hsla(1, 50%, 53%, 1);
    --secondary-d-2: hsla(1, 42%, 40%, 1);
    --secondary-d-3: hsla(2, 40%, 26%, 1);
    --secondary-d-4: hsla(4, 35%, 14%, 1);
    --secondary-l-1: hsla(3, 100%, 75%, 1);
    --secondary-l-2: hsla(5, 100%, 81%, 1);
    --secondary-l-3: hsla(6, 100%, 87%, 1);
    --secondary-l-4: hsla(7, 100%, 93%, 1);
    --bg-body: hsla(45, 11.11%, 92.94%, 1);
    --bg-surface: hsl(60, 3.45%, 94.31%);
    --text-body: hsla(0, 0%, 25%, 1);
    --text-title: hsla(0, 0%, 0%, 1);
    --border-primary: hsla(0, 0%, 50%, 0.25);
    --shadow-primary: hsla(0, 0%, 0%, 0.15);
    --light: hsla(85, 0%, 100%, 1);
    --light-5: hsla(0, 0%, 100%, 0.05);
    --light-10: hsla(0, 0%, 100%, 0.1);
    --light-20: hsla(0, 0%, 100%, 0.2);
    --light-30: hsla(0, 0%, 100%, 0.3);
    --light-40: hsla(0, 0%, 100%, 0.4);
    --light-50: hsla(0, 0%, 100%, 0.5);
    --light-60: hsla(0, 0%, 100%, 0.6);
    --light-70: hsla(0, 0%, 100%, 0.7);
    --light-80: hsla(0, 0%, 100%, 0.8);
    --light-90: hsla(0, 0%, 100%, 0.9);
    --dark: hsla(0, 0%, 0%, 1);
    --dark-5: hsla(0, 0%, 0%, 0.05);
    --dark-10: hsla(0, 0%, 0%, 0.1);
    --dark-20: hsla(0, 0%, 0%, 0.2);
    --dark-30: hsla(0, 0%, 0%, 0.3);
    --dark-40: hsla(0, 0%, 0%, 0.4);
    --dark-50: hsla(0, 0%, 0%, 0.5);
    --dark-60: hsla(0, 0%, 0%, 0.6);
    --dark-70: hsla(0, 0%, 0%, 0.7);
    --dark-80: hsla(0, 0%, 0%, 0.8);
    --dark-90: hsla(0, 0%, 0%, 0.9);
    --success: hsla(136, 95%, 56%, 1);
    --success-5: hsla(136, 95%, 56%, 0.05);
    --success-10: hsla(136, 95%, 56%, 0.1);
    --success-20: hsla(136, 95%, 56%, 0.2);
    --success-30: hsla(136, 95%, 56%, 0.3);
    --success-40: hsla(136, 95%, 56%, 0.4);
    --success-50: hsla(136, 95%, 56%, 0.5);
    --success-60: hsla(136, 95%, 56%, 0.6);
    --success-70: hsla(136, 95%, 56%, 0.7);
    --success-80: hsla(136, 95%, 56%, 0.8);
    --success-90: hsla(136, 95%, 56%, 0.9);
    --error: hsla(351, 95%, 56%, 1);
    --error-5: hsla(351, 95%, 56%, 0.05);
    --error-10: hsla(351, 95%, 56%, 0.1);
    --error-20: hsla(351, 95%, 56%, 0.2);
    --error-30: hsla(351, 95%, 56%, 0.3);
    --error-40: hsla(351, 95%, 56%, 0.4);
    --error-50: hsla(351, 95%, 56%, 0.5);
    --error-60: hsla(351, 95%, 56%, 0.6);
    --error-70: hsla(351, 95%, 56%, 0.7);
    --error-80: hsla(351, 95%, 56%, 0.8);
    --error-90: hsla(351, 95%, 56%, 0.9);
    --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.05vw + 0.64rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.18vw + 0.76rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.39vw + 0.9rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.73vw + 1.05rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(1.25vw + 1.2rem), 2.8rem);
    --space-l: clamp(2rem, calc(2.04vw + 1.35rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(3.23vw + 1.47rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(4.99vw + 1.53rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(7.59vw + 1.48rem), 11.19rem);
    --space-4xl: clamp(4.88rem, calc(11.4vw + 1.23rem), 15.83rem);
    --text-xs: clamp(1.26rem, calc(-0.12vw + 1.3rem), 1.15rem);
    --text-s: clamp(1.42rem, calc(0.02vw + 1.42rem), 1.44rem);
    --text-m: clamp(1.6rem, calc(0.21vw + 1.53rem), 1.8rem);
    --text-l: clamp(1.8rem, calc(0.47vw + 1.65rem), 2.25rem);
    --text-xl: clamp(2.02rem, calc(0.82vw + 1.76rem), 2.81rem);
    --text-2xl: clamp(2.28rem, calc(1.29vw + 1.87rem), 3.52rem);
    --text-3xl: clamp(2.56rem, calc(1.91vw + 1.95rem), 4.4rem);
    --text-4xl: clamp(2.88rem, calc(2.72vw + 2.01rem), 5.49rem);
    --hero-title-size: var(--text-4xl);
    --post-title-size: var(--text-2xl);
    --nav-link-size: var(--text-s);
    --header-space: var(--space-s);
    --btn-space: var(--space-xs);
    --card-space: var(--space-s);
    --footer-space: var(--space-s) var(--space-m);
    --icon-space: var(--space-2xs);
    --container-gap: var(--space-xl);
    --block-gap: var(--space-s);
    --fit-content: fit-content;
    --block-content: 700px;
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(0.21vw + 0.53rem), 0.8rem);
    --radius-m: clamp(1rem, calc(0.21vw + 0.93rem), 1.2rem);
    --radius-l: clamp(1.6rem, calc(0.42vw + 1.47rem), 2rem);
    --radius-xl: clamp(2.6rem, calc(0.63vw + 2.4rem), 3.2rem);
    --radius-full: 999rem;
    --shadow-xs: 0 1px 2px var(--shadow-primary);
    --shadow-s: 0 1.5px 3px var(--shadow-primary);
    --shadow-m: 0 2px 6px var(--shadow-primary);
    --shadow-l: 0 3px 12px var(--shadow-primary);
    --shadow-xl: 0 6px 48px var(--shadow-primary);
}
:root.cf-theme-dark, :root.cf-theme-light .theme-inverted, :root.cf-theme-light .theme-always-dark, :root.cf-theme-dark .theme-inverted .theme-always-dark {
    --primary: hsl(96, 84%, 70%);
    --primary-5: hsla(96, 84%, 70%, 0.05);
    --primary-10: hsla(96, 84%, 70%, 0.1);
    --primary-20: hsla(96, 84%, 70%, 0.2);
    --primary-30: hsla(96, 84%, 70%, 0.3);
    --primary-40: hsla(96, 84%, 70%, 0.4);
    --primary-50: hsla(96, 84%, 70%, 0.5);
    --primary-60: hsla(96, 84%, 70%, 0.6);
    --primary-70: hsla(96, 84%, 70%, 0.7);
    --primary-80: hsla(96, 84%, 70%, 0.8);
    --primary-90: hsla(96, 84%, 70%, 0.9);
    --bg-body: hsla(0, 0%, 5%, 1);
    --bg-surface: hsl(60, 3.45%, 15%);
    --text-body: hsla(0, 0%, 75%, 1);
    --text-title: hsla(0, 0%, 100%, 1);
    --border-primary: hsla(0, 0%, 75%, 0.1);
    --shadow-primary: hsla(0, 0%, 0%, 0.4);
    --light: hsla(0, 0%, 0%, 1);
    --light-5: hsla(0, 0%, 0%, 0.05);
    --light-10: hsla(0, 0%, 0%, 0.1);
    --light-20: hsla(0, 0%, 0%, 0.2);
    --light-30: hsla(0, 0%, 0%, 0.3);
    --light-40: hsla(0, 0%, 0%, 0.4);
    --light-50: hsla(0, 0%, 0%, 0.5);
    --light-60: hsla(0, 0%, 0%, 0.6);
    --light-70: hsla(0, 0%, 0%, 0.7);
    --light-80: hsla(0, 0%, 0%, 0.8);
    --light-90: hsla(0, 0%, 0%, 0.9);
    --dark: hsla(0, 0%, 100%, 1);
    --dark-5: hsla(0, 0%, 100%, 0.05);
    --dark-10: hsla(0, 0%, 100%, 0.1);
    --dark-20: hsla(0, 0%, 100%, 0.2);
    --dark-30: hsla(0, 0%, 100%, 0.3);
    --dark-40: hsla(0, 0%, 100%, 0.4);
    --dark-50: hsla(0, 0%, 100%, 0.5);
    --dark-60: hsla(0, 0%, 100%, 0.6);
    --dark-70: hsla(0, 0%, 100%, 0.7);
    --dark-80: hsla(0, 0%, 100%, 0.8);
    --dark-90: hsla(0, 0%, 100%, 0.9);
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-s);
    background: var(--primary);
    color: var(--primary-d-4);
    font-size: var(--text-s);
    font-weight: 600;
    border-radius: var(--radius-m);
    border: 1px solid var(--primary-d-1);
    box-shadow: var(--shadow-m);
    transition: all 0.25s ease-in-out;
    outline: 0;
    cursor: pointer;
}
.btn:hover {
    background: var(--primary-l-1);
    transform: translateY(-0.1rem);
}
.btn.small {
    font-size: var(--text-s);
    padding: var(--space-xs) var(--space-s);
}
.btn.large {
    font-size: var(--text-l);
    padding: var(--space-s) var(--space-m);
}
.btn.tertiary {
    background: var(--tertiary);
    border-color: var(--tertiary-d-1);
}
.btn.ghost {
    color: var(--dark-80);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.btn.slight {
    color: var(--dark-80);
    background: var(--bg-surface);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-s);
}
.btn.secondary {
    background: var(--secondary);
    border-color: var(--secondary-d-1);
}
.btn.ghost:hover {
    background: var(--dark-10);
}
.btn.slight:hover {
    background: var(--dark-5);
}
.btn.tertiary:hover {
    background: var(--tertiary-d-1);
}
.btn.secondary:hover {
    background: var(--secondary-d-1);
}
.btn:focus {
    outline: 4px solid var(--primary-l-3);
    outline-offset: 2px;
}
.btn.no-bg {
    color: var(--dark-80);
    background: transparent;
    box-shadow: none;
    border-color: transparent;
}
.btn.no-bg:hover {
    color: var(--dark);
}
.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4xs);
    padding: var(--space-3xs) var(--space-xs);
    background: var(--primary-l-4);
    color: var(--primary-d-2);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-m);
    border: 1px solid var(--primary);
    outline: 0;
    line-height: 1;
}
.badge.secondary {
    color: var(--secondary);
}
.link {
    color: var(--primary);
    font-size: var(--text-m);
    font-weight: 600;
    letter-spacing: 0.05rem;
    box-shadow: 0 2px 0 var(--primary-20);
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}
.link:hover {
    box-shadow: 0 2px 0 var(--primary-40);
}
.link:focus {
    background: var(--primary-10);
}
.link.secondary {
    color: var(--secondary);
    border-color: var(--secondary-20);
}
.link.tertiary {
    color: var(--tertiary);
    border-color: var(--tertiary-20);
}
.input {
    padding: var(--space-xs) var(--space-s);
    background: var(--dark-5);
    color: var(--text-title);
    font-size: var(--text-m);
    font-weight: 500;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: all 0.25s ease-in-out;
    appearance: none;
    outline: 0;
}
.input:focus {
    background: var(--primary-20);
    border-color: var(--primary);
    box-shadow: var(--shadow-l);
}
.input:hover {
    border-color: var(--primary);
    background: transparent;
    box-shadow: var(--shadow-l);
}
.input::placeholder {
    color: var(--dark-40);
}
.input:invalid {
    border-color: var(--error);
    background: var(--error-10);
}
.input:disabled {
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none;
    background: var(--dark-10);
}
.select {
    padding: var(--space-xs) var(--space-s);
    background: var(--dark-5);
    color: var(--text-body);
    font-size: var(--text-m);
    font-weight: 500;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: all 0.25s ease-in-out;
    outline: 0;
}
.select:focus {
    background: var(--primary-20);
    border-color: var(--primary);
}
.select:hover {
    border-color: var(--primary);
}
.select::placeholder {
    color: var(--dark-40);
}
.select:invalid {
    border-color: var(--error);
    background: var(--error-10);
}
.select:disabled {
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none;
    background: var(--dark-10);
}
.card {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-m);
    font-size: var(--text-m);
    color: var(--text-body);
    background: var(--bg-surface);
    line-height: 1.3;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
}
.card.secondary {
    background: var(--secondary);
    color: #fff;
}
.card.primary {
    background: var(--primary);
    color: #fff;
}
.icon {
    color: var(--primary-d-1);
    width: 24px;
    height: auto;
    font-size: 24px;
}
.icon.large {
    width: var(--space-3xl);
    font-size: var(--space-3xl);
}
.icon.secondary {
    color: var(--secondary);
}
.icon.tertiary {
    color: var(--tertiary);
}
.icon.outline {
    padding: 0.5em;
    border: 1px solid var(--border-primary);
    border-radius: 100%;
    box-sizing: content-box;
}
.icon.filled {
    padding: 0.5em;
    border-radius: 100%;
    box-sizing: content-box;
    background: var(--dark-10);
}
.icon.small {
    width: 24;
    font-size: var(--space-l);
}
.avatar {
    width: var(--space-2xl);
    height: var(--space-2xl);
    border-radius: 100%;
    box-shadow: var(--shadow-m);
    object-fit: cover;
}
.avatar.small {
    width: var(--space-l);
    height: var(--space-l);
}
.avatar.large {
    width: var(--space-4xl);
    height: var(--space-4xl);
}
.divider {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 1px;
    height: 1px;
    max-height: 1px;
    background: var(--border-primary);
    margin: var(--space-m) 0;
    border: 0;
}
.divider.vertical {
    min-width: 1px;
    width: 1px;
    max-width: 1px;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
}
.checkbox {
    appearance: none;
    display: grid;
    place-content: center;
    border: 2px solid var(--dark-40);
    border-radius: var(--radius-s);
    width: clamp(1.8rem, calc(0.42vw + 1.67rem), 2.2rem);
    height: clamp(1.8rem, calc(0.42vw + 1.67rem), 2.2rem);
}
.checkbox:checked:before {
    transform: scale(1);
}
.checkbox::before {
    content: "";
    width: 1em;
    height: 1em;
    box-shadow: inset 1em 1em #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 0.2s;
}
.checkbox:hover {
    border-color: var(--primary);
}
.checkbox:focus {
    outline: 3px solid var(--primary-l-3);
    outline-offset: 2px;
}
.checkbox:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.radio {
    appearance: none;
    display: grid;
    place-content: center;
    border: 2px solid var(--dark-40);
    border-radius: var(--radius-full);
    width: clamp(1.8rem, calc(0.42vw + 1.67rem), 2.2rem);
    height: clamp(1.8rem, calc(0.42vw + 1.67rem), 2.2rem);
}
.radio:checked:before {
    transform: scale(1);
}
.radio::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 100%;
    transform: scale(0);
    transition: transform 0.2s;
    background: var(--primary);
}
.radio:hover {
    border-color: var(--primary);
}
.radio:focus {
    outline: 3px solid var(--primary-l-3);
    outline-offset: 2px;
}
.radio:checked {
    border-color: var(--primary);
}
.bg-surface {
    background-color: var(--bg-surface);
}
H1 {
    font-size: var(--text-4xl);
    line-height: 1.1;
}
H2 {
    font-size: var(--text-3xl);
    line-height: 1.2;
}
H3 {
    font-size: var(--text-2xl);
    line-height: 1.3;
}
H4 {
    font-size: var(--text-xl);
    line-height: 1.3;
}
H5 {
    font-size: var(--text-l);
    line-height: 1.3;
}
H6 {
    font-size: var(--text-m);
    line-height: 1.4;
}
.bg-blur-xs {
    backdrop-filter: blur(2px);
}
.bg-blur-s {
    backdrop-filter: blur(4px);
}
.bg-blur-m {
    backdrop-filter: blur(8px);
}
.bg-blur-l {
    backdrop-filter: blur(16px);
}
.bg-blur-xl {
    backdrop-filter: blur(32px);
}
.display-none {
    display: none;
}
.visible {
    visibility: visible;
}
.hidden {
    visibility: hidden;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-y-auto {
    overflow-y: auto;
}
.list-none {
    list-style-type: none;
}
.white-space-nowrap {
    white-space: nowrap;
}
.transition-global {
    transition: all ease 0.3s;
}
.hero--top-padding {
    padding-top: var(--space-4xl);
}
/* Custom Stylesheets */
/* Add your custom CSS here */