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: 1200px;
    --primary: hsla(129, 55%, 23%, 1);
    --primary-5: hsla(129, 55%, 23%, 0.05);
    --primary-10: hsla(129, 55%, 23%, 0.1);
    --primary-20: hsla(129, 55%, 23%, 0.2);
    --primary-30: hsla(129, 55%, 23%, 0.3);
    --primary-40: hsla(129, 55%, 23%, 0.4);
    --primary-50: hsla(129, 55%, 23%, 0.5);
    --primary-60: hsla(129, 55%, 23%, 0.6);
    --primary-70: hsla(129, 55%, 23%, 0.7);
    --primary-80: hsla(129, 55%, 23%, 0.8);
    --primary-90: hsla(129, 55%, 23%, 0.9);
    --primary-d-1: hsl(127, 49%, 19%);
    --primary-d-2: hsl(125, 42%, 15%);
    --primary-d-3: hsl(123, 35%, 11%);
    --primary-d-4: hsl(115, 33%, 7%);
    --primary-l-1: hsl(122, 24%, 38%);
    --primary-l-2: hsl(119, 15%, 53%);
    --primary-l-3: hsl(118, 16%, 68%);
    --primary-l-4: hsl(117, 16%, 84%);
    --secondary: hsla(59, 68%, 63%, 1);
    --secondary-5: hsla(59, 68%, 63%, 0.05);
    --secondary-10: hsla(59, 68%, 63%, 0.1);
    --secondary-20: hsla(59, 68%, 63%, 0.2);
    --secondary-30: hsla(59, 68%, 63%, 0.3);
    --secondary-40: hsla(59, 68%, 63%, 0.4);
    --secondary-50: hsla(59, 68%, 63%, 0.5);
    --secondary-60: hsla(59, 68%, 63%, 0.6);
    --secondary-70: hsla(59, 68%, 63%, 0.7);
    --secondary-80: hsla(59, 68%, 63%, 0.8);
    --secondary-90: hsla(59, 68%, 63%, 0.9);
    --secondary-d-1: hsla(59, 39%, 50%, 1);
    --secondary-d-2: hsla(59, 37%, 37%, 1);
    --secondary-d-3: hsla(58, 34%, 25%, 1);
    --secondary-d-4: hsla(55, 36%, 14%, 1);
    --secondary-l-1: hsla(58, 70%, 71%, 1);
    --secondary-l-2: hsla(57, 72%, 79%, 1);
    --secondary-l-3: hsla(56, 74%, 86%, 1);
    --secondary-l-4: hsla(55, 76%, 93%, 1);
    --bg-body: hsla(0, 0%, 95%, 1);
    --bg-surface: hsla(0, 0%, 100%, 1);
    --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.19vw + 0.76rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.43vw + 0.89rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.8vw + 1.02rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(1.36vw + 1.16rem), 2.8rem);
    --space-l: clamp(2rem, calc(2.23vw + 1.29rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(3.52vw + 1.37rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(5.44vw + 1.38rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(8.28vw + 1.26rem), 11.19rem);
    --space-4xl: clamp(4.88rem, calc(12.44vw + 0.9rem), 15.83rem);
    --text-xs: clamp(1.26rem, calc(-0.29vw + 1.36rem), 1.01rem);
    --text-s: clamp(1.42rem, calc(-0.08vw + 1.45rem), 1.35rem);
    --text-m: clamp(1.6rem, calc(0.23vw + 1.53rem), 1.8rem);
    --text-l: clamp(1.8rem, calc(0.68vw + 1.58rem), 2.4rem);
    --text-xl: clamp(2.02rem, calc(1.33vw + 1.6rem), 3.2rem);
    --text-2xl: clamp(2.28rem, calc(2.26vw + 1.56rem), 4.26rem);
    --text-3xl: clamp(2.56rem, calc(3.55vw + 1.43rem), 5.68rem);
    --text-4xl: clamp(2.88rem, calc(5.33vw + 1.18rem), 7.58rem);
    --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) var(--space-s);
    --card-space: var(--space-s);
    --footer-space: var(--space-s) var(--space-m);
    --columns-1: repeat(1, minmax(0, 1fr));
    --columns-2: repeat(2, minmax(0, 1fr));
    --columns-3: repeat(3, minmax(0, 1fr));
    --columns-4: repeat(4, minmax(0, 1fr));
    --columns-5: repeat(5, minmax(0, 1fr));
    --columns-6: repeat(6, minmax(0, 1fr));
    --columns-7: repeat(7, minmax(0, 1fr));
    --columns-8: repeat(8, minmax(0, 1fr));
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(0.23vw + 0.53rem), 0.8rem);
    --radius-m: clamp(1rem, calc(0.23vw + 0.93rem), 1.2rem);
    --radius-l: clamp(1.6rem, calc(0.45vw + 1.46rem), 2rem);
    --radius-xl: clamp(2.6rem, calc(0.68vw + 2.38rem), 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: hsla(129, 52%, 39%, 1);
    --primary-5: hsla(129, 52%, 39%, 0.05);
    --primary-10: hsla(129, 52%, 39%, 0.1);
    --primary-20: hsla(129, 52%, 39%, 0.2);
    --primary-30: hsla(129, 52%, 39%, 0.3);
    --primary-40: hsla(129, 52%, 39%, 0.4);
    --primary-50: hsla(129, 52%, 39%, 0.5);
    --primary-60: hsla(129, 52%, 39%, 0.6);
    --primary-70: hsla(129, 52%, 39%, 0.7);
    --primary-80: hsla(129, 52%, 39%, 0.8);
    --primary-90: hsla(129, 52%, 39%, 0.9);
    --primary-d-1: hsl(127, 47%, 32%);
    --primary-d-2: hsl(125, 42%, 24%);
    --primary-d-3: hsl(123, 36%, 17%);
    --primary-d-4: hsl(119, 27%, 10%);
    --primary-l-1: hsl(123, 31%, 53%);
    --primary-l-2: hsl(120, 31%, 65%);
    --primary-l-3: hsl(118, 31%, 76%);
    --primary-l-4: hsl(116, 32%, 88%);
    --secondary: hsla(59, 65%, 80%, 1);
    --secondary-5: hsla(59, 65%, 80%, 0.05);
    --secondary-10: hsla(59, 65%, 80%, 0.1);
    --secondary-20: hsla(59, 65%, 80%, 0.2);
    --secondary-30: hsla(59, 65%, 80%, 0.3);
    --secondary-40: hsla(59, 65%, 80%, 0.4);
    --secondary-50: hsla(59, 65%, 80%, 0.5);
    --secondary-60: hsla(59, 65%, 80%, 0.6);
    --secondary-70: hsla(59, 65%, 80%, 0.7);
    --secondary-80: hsla(59, 65%, 80%, 0.8);
    --secondary-90: hsla(59, 65%, 80%, 0.9);
    --secondary-d-1: hsla(59, 26%, 63%, 1);
    --secondary-d-2: hsla(59, 15%, 46%, 1);
    --secondary-d-3: hsla(59, 14%, 30%, 1);
    --secondary-d-4: hsla(58, 12%, 16%, 1);
    --secondary-l-1: hsla(58, 66%, 84%, 1);
    --secondary-l-2: hsla(58, 67%, 88%, 1);
    --secondary-l-3: hsla(57, 68%, 92%, 1);
    --secondary-l-4: hsla(57, 69%, 96%, 1);
    --bg-body: hsla(0, 0%, 5%, 1);
    --bg-surface: hsla(0, 0%, 15%, 1);
    --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-xs) var(--space-s);
    background: var(--primary);
    color: #fff;
    font-size: var(--text-m);
    font-weight: 600;
    border-radius: var(--radius-m);
    border: 1px solid var(--primary-d-1);
    transition: all 0.25s ease-in-out;
    outline: 0;
    cursor: pointer;
}
.btn:hover {
    background: var(--primary-d-1);
    transform: translateY(-0.1rem);
}
.btn.small {
    font-size: var(--text-s);
    padding: var(--space-2xs) var(--space-xs);
}
.btn.large {
    font-size: var(--text-l);
    padding: var(--space-s) var(--space-m);
}
.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);
}
.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.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-2xs) var(--space-s);
    background: var(--dark-10);
    color: var(--primary);
    font-size: var(--text-s);
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 0;
    outline: 0;
}
.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);
    -webkit-text-decoration: none;
    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);
    width: var(--space-2xl);
    height: auto;
    font-size: var(--space-2xl);
}
.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: var(--space-l);
    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.45vw + 1.66rem), 2.2rem);
    height: clamp(1.8rem, calc(0.45vw + 1.66rem), 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.45vw + 1.66rem), 2.2rem);
    height: clamp(1.8rem, calc(0.45vw + 1.66rem), 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);
}