:root {
    --badge--filled-bg: var(--color--primary--500);
    --badge--filled-tx: var(--color--base--0);
    --badge--ghost-tx: var(--color--primary--600);
    --badge--outlined-bg: var(--color--primary--50);
    --badge--outlined-br: var(--color--primary--500);
    --badge--outlined-tx: var(--color--primary--600);
    --badge--tonal-bg: var(--color--primary--100);
    --badge--tonal-tx: var(--color--primary--600);
    --button--filled-bg-disabled: var(--color--base--300);
    --button--filled-bg-enabled: var(--color--primary--500);
    --button--filled-bg-focused: var(--color--primary--600);
    --button--filled-bg-hovered: var(--color--primary--600);
    --button--filled-bg-pressed: var(--color--primary--700);
    --button--filled-tonal-bg-disabled: var(--color--base--300);
    --button--filled-tonal-bg-enabled: var(--color--primary--100);
    --button--filled-tonal-bg-focused: var(--color--primary--200);
    --button--filled-tonal-bg-hovered: var(--color--primary--200);
    --button--filled-tonal-bg-pressed: var(--color--primary--300);
    --button--filled-tonal-tx-disabled: var(--color--base--0);
    --button--filled-tonal-tx-enabled: var(--color--primary--600);
    --button--filled-tonal-tx-focused: var(--color--primary--700);
    --button--filled-tonal-tx-hovered: var(--color--primary--700);
    --button--filled-tonal-tx-pressed: var(--color--primary--800);
    --button--filled-tx-disabled: var(--color--base--0);
    --button--filled-tx-enabled: var(--color--base--0);
    --button--filled-tx-focused: var(--color--base--0);
    --button--filled-tx-hovered: var(--color--base--0);
    --button--filled-tx-pressed: var(--color--base--0);
    --button--ghost-tx-disabled: var(--color--base--500);
    --button--ghost-tx-enabled: var(--color--primary--500);
    --button--ghost-tx-focused: var(--color--primary--600);
    --button--ghost-tx-hovered: var(--color--primary--600);
    --button--ghost-tx-pressed: var(--color--primary--700);
    --button--outlined-bg-disabled: var(--color--base--0);
    --button--outlined-bg-focused: var(--color--primary--50);
    --button--outlined-bg-hovered: var(--color--primary--50);
    --button--outlined-bg-pressed: var(--color--primary--100);
    --button--outlined-br-disabled: var(--color--base--500);
    --button--outlined-br-enabled: var(--color--primary--400);
    --button--outlined-br-focused: var(--color--primary--500);
    --button--outlined-br-hovered: var(--color--primary--500);
    --button--outlined-br-pressed: var(--color--primary--600);
    --button--outlined-tx-disabled: var(--color--base--500);
    --button--outlined-tx-enabled: var(--color--primary--600);
    --button--outlined-tx-focused: var(--color--primary--700);
    --button--outlined-tx-hovered: var(--color--primary--700);
    --button--outlined-tx-pressed: var(--color--primary--800);
    --button--size-sm-scale: 0.85;
    --button--size-lg-scale: 1.3;
    --color--primary--original: oklch(0.56 0.16 32);
    --color--primary--50: oklch(from var(--color--primary--original) 0.97 calc(c * 0.15) h);
    --color--primary--100: oklch(from var(--color--primary--original) 0.93 calc(c * 0.25) h);
    --color--primary--200: oklch(from var(--color--primary--original) 0.87 calc(c * 0.45) h);
    --color--primary--300: oklch(from var(--color--primary--original) 0.78 calc(c * 0.65) h);
    --color--primary--400: oklch(from var(--color--primary--original) 0.68 calc(c * 0.85) h);
    --color--primary--500: oklch(from var(--color--primary--original) 0.58 calc(c * 1.00) h);
    --color--primary--600: oklch(from var(--color--primary--original) 0.48 calc(c * 0.95) h);
    --color--primary--700: oklch(from var(--color--primary--original) 0.39 calc(c * 0.85) h);
    --color--primary--800: oklch(from var(--color--primary--original) 0.31 calc(c * 0.70) h);
    --color--primary--900: oklch(from var(--color--primary--original) 0.25 calc(c * 0.50) h);
    --color--primary--950: oklch(from var(--color--primary--original) 0.18 calc(c * 0.40) h);
    --color--base--0: oklch(1.00 0 0);
    --color--base--50: oklch(from var(--color--primary--original) 0.97 0.008 h);
    --color--base--100: oklch(from var(--color--primary--original) 0.93 0.010 h);
    --color--base--200: oklch(from var(--color--primary--original) 0.87 0.012 h);
    --color--base--300: oklch(from var(--color--primary--original) 0.78 0.014 h);
    --color--base--400: oklch(from var(--color--primary--original) 0.68 0.015 h);
    --color--base--500: oklch(from var(--color--primary--original) 0.58 0.015 h);
    --color--base--600: oklch(from var(--color--primary--original) 0.48 0.014 h);
    --color--base--700: oklch(from var(--color--primary--original) 0.39 0.012 h);
    --color--base--800: oklch(from var(--color--primary--original) 0.31 0.010 h);
    --color--base--900: oklch(from var(--color--primary--original) 0.25 0.008 h);
    --color--base--950: oklch(from var(--color--primary--original) 0.18 0.006 h);
    --color--base--1000: oklch(0.00 0 0);
    --color--error--original: oklch(0.55 0.20 25);
    --color--error--light: oklch(from var(--color--error--original) 0.78 calc(c * 0.65) h);
    --color--error--dark: oklch(from var(--color--error--original) 0.39 calc(c * 0.85) h);
    --color--success--original: oklch(0.65 0.18 145);
    --color--success--light: oklch(from var(--color--success--original) 0.78 calc(c * 0.65) h);
    --color--success--dark: oklch(from var(--color--success--original) 0.39 calc(c * 0.85) h);
    --font--size--1: clamp(var(--text--size--h1-min), calc(var(--text--size--h1-min) + tan(atan2(var(--text--size--h1-max) - var(--text--size--h1-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--h1-max));
    --font--size--2: clamp(var(--text--size--h2-min), calc(var(--text--size--h2-min) + tan(atan2(var(--text--size--h2-max) - var(--text--size--h2-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--h2-max));
    --font--size--3: clamp(var(--text--size--h3-min), calc(var(--text--size--h3-min) + tan(atan2(var(--text--size--h3-max) - var(--text--size--h3-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--h3-max));
    --font--size--4: clamp(var(--text--size--h4-min), calc(var(--text--size--h4-min) + tan(atan2(var(--text--size--h4-max) - var(--text--size--h4-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--h4-max));
    --font--size--5: clamp(var(--text--size--h5-min), calc(var(--text--size--h5-min) + tan(atan2(var(--text--size--h5-max) - var(--text--size--h5-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--h5-max));
    --font--size--6: clamp(var(--text--size--h6-min), calc(var(--text--size--h6-min) + tan(atan2(var(--text--size--h6-max) - var(--text--size--h6-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--h6-max));
    --font--size--badge: clamp(var(--text--size--badge-min), calc(var(--text--size--badge-min) + tan(atan2(var(--text--size--badge-max) - var(--text--size--badge-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--badge-max));
    --font--size--button: clamp(var(--text--size--button-min), calc(var(--text--size--button-min) + tan(atan2(var(--text--size--button-max) - var(--text--size--button-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--button-max));
    --font--size--content: clamp(var(--text--size--content-min), calc(var(--text--size--content-min) + tan(atan2(var(--text--size--content-max) - var(--text--size--content-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--content-max));
    --radius--none: var(--size--0);
    --radius--xxs: var(--size--1);
    --radius--xs: var(--size--2);
    --radius--sm: var(--size--3);
    --radius--md: var(--size--4);
    --radius--lg: var(--size--5);
    --radius--xl: var(--size--6);
    --radius--2xl: var(--size--8);
    --radius--3xl: var(--size--10);
    --radius--4xl: var(--size--12);
    --radius--5xl: var(--size--16);
    --radius--6xl: var(--size--20);
    --radius--7xl: var(--size--28);
    --radius--8xl: var(--size--32);
    --radius--9xl: var(--size--40);
    --radius--10xl: var(--size--48);
    --size--0: 0px;
    --size--1: 2px;
    --size--2: 4px;
    --size--3: 6px;
    --size--4: 8px;
    --size--5: 10px;
    --size--6: 12px;
    --size--7: 14px;
    --size--8: 16px;
    --size--9: 18px;
    --size--10: 20px;
    --size--12: 24px;
    --size--14: 28px;
    --size--16: 32px;
    --size--18: 36px;
    --size--20: 40px;
    --size--24: 48px;
    --size--28: 56px;
    --size--32: 64px;
    --size--36: 72px;
    --size--40: 80px;
    --size--48: 96px;
    --size--56: 112px;
    --size--64: 128px;
    --size--72: 144px;
    --size--80: 160px;
    --size--96: 192px;
    --size--128: 256px;
    --size--160: 320px;
    --size--192: 384px;
    --spacing--none: var(--size--0);
    --spacing--xxs: var(--size--1);
    --spacing--xs: var(--size--2);
    --spacing--sm: var(--size--4);
    --spacing--md: var(--size--6);
    --spacing--lg: var(--size--8);
    --spacing--xl: var(--size--10);
    --spacing--2xl: var(--size--12);
    --spacing--3xl: var(--size--16);
    --spacing--4xl: var(--size--20);
    --spacing--5xl: var(--size--24);
    --spacing--6xl: var(--size--28);
    --spacing--7xl: var(--size--32);
    --spacing--8xl: var(--size--36);
    --spacing--9xl: var(--size--40);
    --spacing--10xl: var(--size--48);
    --spacing--11xl: var(--size--56);
    --spacing--12xl: var(--size--64);
    --spacing--13xl: var(--size--72);
    --spacing--14xl: var(--size--80);
    --spacing--15xl: var(--size--96);
    --text--color--content: var(--color--base--800);
    --text--color--heading: var(--color--base--950);
    --text--size--badge-max: var(--size--7);
    --text--size--badge-min: var(--size--7);
    --text--size--button-max: var(--size--8);
    --text--size--button-min: var(--size--7);
    --text--size--content-max: var(--size--9);
    --text--size--content-min: var(--size--8);
    --text--size--h1-max: var(--size--28);
    --text--size--h1-min: var(--size--16);
    --text--size--h2-max: var(--size--18);
    --text--size--h2-min: var(--size--12);
    --text--size--h3-max: var(--size--12);
    --text--size--h3-min: var(--size--10);
    --text--size--h4-max: var(--size--10);
    --text--size--h4-min: var(--size--9);
    --text--size--h5-max: var(--size--10);
    --text--size--h5-min: var(--size--8);
    --text--size--h6-max: var(--size--8);
    --text--size--h6-min: var(--size--8);
    --container--full: 100%;
    --container--max: 1120px;
    --container--narrow: 720px;
    --container--min: 350px;
    --container--width: var(--container--max);
    --font--family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font--family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font--family-emoji);
    --font--family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font--family-emoji);
    --font--family: var(--font--family-sans-serif);
    --font--spacing-block: var(--size--8);
    --font--line-height: 1.7;
    --font--weight: 400;
    --border--width: calc(var(--size--1) / 2);
    --border--color: var(--color--primary--600);
    --border--radius: var(--radius--md);
    --outline--width: var(--size--1);
    --outline--border: var(--outline--width) solid var(--color--base--800);
    --box--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --box--shadow-focus-with-button: 0 0 0 var(--outline--width) var(--border--color);
    --spacing--block: var(--spacing--md);
    --spacing--block-start: var(--spacing--block);
    --spacing--block-end: var(--spacing--block);
    --spacing--inline: var(--spacing--2xl);
    --spacing--inline-start: var(--spacing--inline);
    --spacing--inline-end: var(--spacing--inline);
    --grid--item-min-width: 280px;
    --grid--item-max-width: 1fr;
    --grid--row-gap: var(--spacing--5xl);
    --grid--col-gap: var(--spacing--4xl);
    --grid--gap: var(--grid--row-gap) var(--grid--col-gap);
    --section--padding-block: clamp(var(--spacing--4xl), 5vw, var(--spacing--9xl));
    --section--padding-inline: clamp(var(--spacing--lg), 4vw, var(--spacing--5xl));
    --blockquote--border-color: var(--color--primary--500);
    --blockquote--cite-color: var(--color--primary--600);
    --table--border-color: var(--color--base--200);
    --table--row-stripped-background-color: var(--color--base--50);
    --code--background-color: var(--color--base--100);
    --code--color: var(--color--base--800);
    --code--kbd-background-color: var(--color--base--50);
    --code--kbd-color: var(--color--base--800);
    --switch--background-color: var(--color--base--200);
    --switch--checked-background-color: var(--color--primary--500);
    --switch--color: var(--color--base--0);
    --switch--thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --accordion--border-color: var(--color--base--200);
    --accordion--active-summary-color: var(--color--primary--200);
    --accordion--close-summary-color: var(--color--base--600);
    --accordion--open-summary-color: var(--color--base--900);
    --accordion--closed-summary-background: transparent;
    --accordion--open-summary-background: var(--color--base--50);
    --accordion--active-summary-background: var(--color--base--200);
    --accordion--icon-circle: 15px;
    --accordion--icon-circle-color: transparent;
    --accordion--spacing-inline: var(--spacing--inline);
    --accordion--spacing-block: var(--spacing--block);
    --modal--spacing: 0px;
    --modal--spacing-block-start: 0px;
    --modal--overlay-background-color: oklch(0 0 0 / 0.5);
    --card--background-color: var(--color--base--0);
    --card--border-color: var(--color--base--100);
    --card--box-shadow: none;
    --card--border-radius: var(--border--radius);
    --pagination--item-radius: calc(var(--border--radius) / 2);
    --transition: 0.2s ease-in-out;
    --icon--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 11V13H19V11H5Z"></path></svg>');
    --icon--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6Z"/></svg>');
    --icon--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 13.2 5-5 1.4 1.4L12 16 5.6 9.6l1.5-1.4 4.9 5Z"/></svg>');
    --icon--caret: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.2 12-5-5 1.4-1.4L16 12l-6.4 6.4L8.2 17l5-5Z"/></svg>');
    --icon--arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13 16.2 5.4-5.4 1.4 1.4L12 20l-7.8-7.8 1.4-1.4 5.4 5.4V4h2v12.2Z"/></svg>');
    --icon--search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m18 16.6 4.3 4.3-1.4 1.4-4.3-4.3a9 9 0 1 1 1.4-1.4Zm-2-.7A7 7 0 0 0 11 4a7 7 0 1 0 4.9 12l.1-.1Z"/></svg>');
    --icon--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 10.6 5-5 1.4 1.5-5 4.9 5 5-1.5 1.4-4.9-5-5 5L5.6 17l5-5-5-5L7 5.7l5 5Z"/></svg>');
    --icon--base: var(--icon--chevron);
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    accent-color: var(--color--primary--original);
    background-color: var(--color--base--0);
    color: var(--text--color--content);
    font-weight: var(--font--weight);
    font-size: var(--font--size--content);
    line-height: var(--font--line-height);
    font-family: var(--font--family);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

::before,
::after {
    text-decoration: inherit;
    vertical-align: inherit;
}

[hidden] {
    display: none;
}

small,
.small {
    font-size: var(--size--6);
}

h1, h2, h3, h4, h5, h6 {
    --font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--text--color--heading);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--font-line-height);
    font-family: var(--font--family);
}

h1 {
    --font-size: var(--font--size--1);
    --font-line-height: 1.125;
    --spacing-block-start: var(--size--24);
}

h2 {
    --font-size: var(--font--size--2);
    --font-line-height: 1.15;
    --spacing-block-start: var(--size--20);
}

h3 {
    --font-size: var(--font--size--3);
    --font-line-height: 1.15;
    --spacing-block-start: var(--size--16);
}

h4 {
    --font-size: var(--font--size--4);
    --font-line-height: 1.4;
    --spacing-block-start: var(--size--12);
}

h5 {
    --font-size: var(--font--size--5);
    --font-line-height: 1.5;
    --spacing-block-start: var(--size--12);
}

h6 {
    --font-size: var(--font--size--6);
    --font-line-height: 1.25;
    --spacing-block-start: var(--size--10);
}

pre,
code,
kbd,
samp {
    --font-family: var(--font--family-monospace);
    font-size: 0.875em;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    max-width: 100%;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
}

kbd {
    --font-weight: bolder;
    background-color: var(--code--kbd-background-color);
    color: var(--code--kbd-color);
    vertical-align: baseline;
}

ul, ol {
    padding-inline-start: 1em;
}

b,
strong {
    font-weight: bolder;
}

sub,
sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

address,
blockquote,
dl,
ol,
p,
pre {
    color: var(--text--color--content);
    font-style: normal;
    font-weight: var(--font--weight);
}

p, dl, ol, ul, address {
    margin-top: 0;
    margin-bottom: 0;
}

table {
    margin-top: 0;
}

blockquote {
    display: block;
    margin: 0;
    padding: var(--spacing--lg);
    border-right-style: none;
    border-left: 0.25rem solid var(--blockquote--border-color);
    border-inline-start: 0.25rem solid var(--blockquote--border-color);
    border-inline-end: none;
}

blockquote cite {
    color: var(--blockquote--cite-color);
}

mark {
    padding: 0.125rem 0.25rem;
    background-color: var(--color--base--50);
    color: var(--text--color--content);
    vertical-align: baseline;
}

abbr[title] {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    text-decoration: none;
    cursor: help;
}

ins {
    color: var(--color--success--original, var(--color--primary--500));
    text-decoration: none;
}

del {
    color: var(--color--error--original, var(--color--base--400));
}

a {
    --text-decoration: underline;
    --color-text: var(--color--primary--500);
    outline-style: none;
    color: var(--color-text);
    text-decoration: var(--text-decoration);
    transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}

a:where(:hover, :active, :focus) {
    --color-text: var(--color--primary--400);
    --text-decoration: none;
    cursor: pointer;
}

:where(button, [role=button], [type=submit]), .button, .btn-filled {
    --background-color: var(--button--filled-bg-enabled);
    --color-text: var(--button--filled-tx-enabled);
    --spacing-block: var(--spacing--block);
    --spacing-inline: var(--spacing--inline);
    --border-radius: var(--radius--xs);
    --border-color: transparent;
    --border-style: solid;
    --border-width: 1px;
    --text-decoration: none;
    --font-weight: 600;
    --font-size: var(--font--size--button);
    display: flex;
    justify-content: center;
    color: var(--color-text);
    background-color: var(--background-color);
    padding: var(--spacing-block) var(--spacing-inline);
    border-radius: var(--border-radius);
    border: var(--border-width) var(--border-style) var(--border-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--font--line-height);
    text-align: center;
    text-decoration: var(--text-decoration);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

:where(button, .button, [role=button], [type=submit]):is([aria-current]:not([aria-current=false])),
:where(button, .button, [role=button], [type=submit]):is(:hover, :active) {
    --background-color: var(--button--filled-bg-hovered)
}

:where(button:not([role=tab]), .button, [role=button], [type=submit]):is(:hover) {
    --color-text: var(--button--filled-tx-hovered);
}

:where(button, .button, [role=button], [type=submit], a):is([aria-current]:not([aria-current=false])):focus:not(:focus-visible) {
    outline-style: none;
}

:where(button, .button, [role=button], [type=submit], a):active {
    --background-color: var(--button--filled-bg-pressed)
}

:where(button:not([role=tab]), .button, [role=button], [type=submit]):active {
    --color-text: var(--button--filled-tx-pressed);
}

:where(button:not([role=tab]), .button, [role=button], [type=submit]):focus-visible {
    --background-color: var(--button--filled-bg-focused);
    --color-text: var(--button--filled-tx-focused);
}

:where(button, .button, [role=button], [type=submit], a):focus-visible,
:where(button, .button, [role=button], [type=submit], a):is([aria-current]:not([aria-current=false])):focus-visible {
    outline: var(--outline--border);
}

:where(button, .button, [role=button], [type=submit] )[disabled] {
    --background-color: var(--button--filled-bg-disabled);
    --color-text: var(--button--filled-tx-disabled);
    pointer-events: none;
}

:where(button, .button, [role=button], [type=submit])[aria-busy=true]::before {
    filter: brightness(0) invert(1);
}

:where([role=tab]) {
    --background-color: transparent;
    --color-text: var(--button--outlined-tx-enabled);
    --border-color: var(--button--outlined-br-enabled);
    --spacing-block: var(--spacing--block);
    --spacing-inline: var(--spacing--inline);
    --border-radius: var(--radius--xs);
    --border-style: solid;
    --border-width: 1px;
    --text-decoration: none;
    --font-weight: 600;
    --font-size: var(--font--size--button);
    display: flex;
    justify-content: center;
    color: var(--color-text);
    background-color: var(--background-color);
    padding: var(--spacing-block) var(--spacing-inline);
    border-radius: var(--border-radius);
    border: var(--border-width) var(--border-style) var(--border-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--font--line-height);
    text-align: center;
    text-decoration: var(--text-decoration);
    cursor: pointer;
}

:where([role=tab]):is(:hover) {
    --background-color: var(--button--outlined-bg-hovered);
    --border-color: var(--button--outlined-br-hovered)
}

:where([role=tab].active) {
    --border-color: transparent;
    --background-color: var(--button--filled-bg-enabled);
    --color-text: var(--button--filled-tx-enabled);
}

:where([role=tab].active):is(:hover) {
    --background-color: var(--button--filled-bg-hovered);
    --color-text: var(--button--filled-tx-hovered);
}

:where([role=tab])[disabled] {
    --border-color: transparent;
    --background-color: var(--button--filled-bg-disabled);
    --color-text: var(--button--filled-tx-disabled);
    pointer-events: none;
}

.btn-tonal {
    --background-color: var(--button--filled-tonal-bg-enabled);
    --color-text: var(--button--filled-tonal-tx-enabled);
}

.btn-tonal:where(:hover) {
    --background-color: var(--button--filled-tonal-bg-hovered);
    --color-text: var(--button--filled-tonal-tx-hovered);
}

.btn-tonal:where(:active) {
    --background-color: var(--button--filled-tonal-bg-pressed);
    --color-text: var(--button--filled-tonal-tx-pressed);
}

.btn-tonal:where(:focus-visible) {
    --background-color: var(--button--filled-tonal-bg-focused);
    --color-text: var(--button--filled-tonal-tx-focused);
}

.btn-tonal:where([disabled]) {
    --background-color: var(--button--filled-tonal-bg-disabled);
    --color-text: var(--button--filled-tonal-tx-disabled);
}

.btn-outlined {
    --background-color: transparent;
    --color-text: var(--button--outlined-tx-enabled);
    --border-color: var(--button--outlined-br-enabled);
}

.btn-outlined:where(:hover) {
    --background-color: var(--button--outlined-bg-hovered);
    --border-color: var(--button--outlined-br-hovered);
    --color-text: var(--button--outlined-tx-hovered);
}

.btn-outlined:where(:focus-visible) {
    --background-color: var(--button--outlined-bg-focused);
    --border-color: var(--button--outlined-br-focused);
    --color-text: var(--button--outlined-tx-focused);
}

.btn-outlined:where(:active) {
    --background-color: var(--button--outlined-bg-pressed);
    --border-color: var(--button--outlined-br-pressed);
    --color-text: var(--button--outlined-tx-pressed);
}

.btn-outlined:where([disabled]) {
    --background-color: var(--button--outlined-bg-disabled);
    --border-color: var(--button--outlined-br-disabled);
    --color-text: var(--button--outlined-tx-disabled);
}

.btn-ghost {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-enabled);
}

.btn-ghost:where(:hover) {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-hovered);
}

.btn-ghost:where(:active) {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-pressed);
}

.btn-ghost:where(:focus-visible) {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-focused);
}

.btn-ghost:where([disabled]) {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-disabled);
}

/* Button size modifiers */
:where(button, [role=button], [type=submit], .button, .btn-filled, .btn-tonal, .btn-outlined, .btn-ghost):is(.size-sm) {
    --spacing-block: calc(var(--spacing--block) * var(--button--size-sm-scale));
    --spacing-inline: calc(var(--spacing--inline) * var(--button--size-sm-scale));
    --font-size: clamp(
            calc(var(--text--size--button-min) * var(--button--size-sm-scale)),
            calc(calc(var(--text--size--button-min) * var(--button--size-sm-scale)) + tan(atan2(calc(var(--text--size--button-max) * var(--button--size-sm-scale)) - calc(var(--text--size--button-min) * var(--button--size-sm-scale)), 1200px - 375px)) * (100vi - 375px)),
            calc(var(--text--size--button-max) * var(--button--size-sm-scale))
    );
    padding: var(--spacing-block) var(--spacing-inline);
    font-size: var(--font-size);
}

:where(button, [role=button], [type=submit], .button, .btn-filled, .btn-tonal, .btn-outlined, .btn-ghost):is(.size-lg) {
    --spacing-block: calc(var(--spacing--block) * var(--button--size-lg-scale));
    --spacing-inline: calc(var(--spacing--inline) * var(--button--size-lg-scale));
    --font-size: clamp(
            calc(var(--text--size--button-min) * var(--button--size-lg-scale)),
            calc(calc(var(--text--size--button-min) * var(--button--size-lg-scale)) + tan(atan2(calc(var(--text--size--button-max) * var(--button--size-lg-scale)) - calc(var(--text--size--button-min) * var(--button--size-lg-scale)), 1200px - 375px)) * (100vi - 375px)),
            calc(var(--text--size--button-max) * var(--button--size-lg-scale))
    );
    padding: var(--spacing-block) var(--spacing-inline);
    font-size: var(--font-size);
}

:where(.badge, .badge-filled, .badge-tonal, .badge-outlined, .badge-ghost) {
    --background-color: var(--badge--filled-bg);
    --color-text: var(--badge--filled-tx);
    --spacing-block: var(--spacing--sm);
    --spacing-inline: var(--spacing--md);
    --border-radius: var(--radius--2xl);
    --border-color: transparent;
    --border-style: solid;
    --border-width: 1px;
    --text-decoration: none;
    --font-weight: 400;
    --font-size: var(--font--size--badge);
    --font-line-height: 1.1;
    display: inline-block;
    color: var(--color-text);
    background-color: var(--background-color);
    padding: var(--spacing-block) var(--spacing-inline);
    border-radius: var(--border-radius);
    border: var(--border-width) var(--border-style) var(--border-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--font-line-height);
    text-align: center;
    text-decoration: var(--text-decoration);
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.badge-tonal {
    --border-color: transparent;
    --background-color: var(--badge--tonal-bg);
    --color-text: var(--badge--tonal-tx);
}

.badge-outlined {
    --border-color: var(--badge--outlined-br);
    --background-color: var(--badge--outlined-bg);
    --color-text: var(--badge--outlined-tx);
}

.badge-ghost {
    --background-color: transparent;
    --border-color: transparent;
    --color-text: var(--badge--ghost-tx);
    --spacing-inline: var(--spacing--none);
}

[aria-controls] {
    cursor: pointer;
}

[aria-disabled=true],
[disabled] {
    cursor: not-allowed;
}

[aria-hidden=false][hidden] {
    display: initial;
}

[aria-hidden=false][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

:where(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select) {
    font-size: inherit;
    font-family: var(--font--family);
    border-radius: var(--radius--xs);
    background-color: var(--color--base--50);
    border: var(--border--width) solid var(--color--base--200);
    padding: var(--spacing--sm);
    width: 100%;
    color: var(--text--color--content);
}

.invalid {
    border-color: var(--color--error--original);
    color: var(--color--error--original);
}

label {
    font-size: calc(var(--font--size--content) * 0.9);
    margin-top: 0.5rem;
    text-indent: 0.15em;
    line-height: calc(var(--font--line-height) * 1.45);
}

:where(input:not([type="checkbox"], [type="radio"]), textarea, select):focus {
    outline: 2px solid var(--color--base--600);
}

:where(input, textarea)::placeholder {
    color: var(--color--base--600);
    opacity: 0.7;
}

label:has( + [required] )::after {
    content: "(*" attr(data-text-required) ")";
    margin-left: 0.5ch;
    color: var(--color--base--600);
}

fieldset {
    border-radius: var(--radius--xs);
    background-color: var(--color--base--0);
    border: var(--border--width) solid var(--color--base--200);
    padding: var(--spacing--lg);
}

.field-group {
    display: flex;
}

.field-group-prepend {
    border-right: unset;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.field-group-append {
    border-left: unset;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.field-group > :not(.field-group-prepend, .field-group-append) {
    border-right: unset;
    border-radius: 0;
}

[dir=rtl] {
    direction: rtl;
}

::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

:-moz-focusring {
    outline-width: 0;
}

:-moz-ui-invalid {
    box-shadow: none;
}

::-ms-expand {
    display: none;
}

[role=switch] {
    --border-width: 0.1875rem;
    --background-color: var(--switch--background-color);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 2.25em;
    height: 1.25em;
    border: var(--border--width) solid var(--border--color);
    border-radius: 1.25em;
    background-color: var(--background-color);
    line-height: 1.25em;
}

[role=switch]:before {
    display: block;
    aspect-ratio: 1;
    height: 100%;
    border-radius: 50%;
    background-color: var(--switch--color);
    box-shadow: var(--switch--thumb-box-shadow);
    content: "";
    transition: margin .1s ease-in-out;
}

[role=switch]:focus-visible,
[role=switch]:focus {
    --background-color: var(--switch--background-color);
    --border-color: var(--switch--background-color);
}

[role=switch]:checked {
    --background-color: var(--switch--checked-background-color);
    --border-color: var(--switch--checked-background-color);
    background-image: none;
}

[role=switch]:checked:before {
    margin-inline-start: 1em;
}

[role=switch]:not([aria-invalid]) {
    --border-color: var(--switch--background-color);
}

details {
    margin-block-end: 0.25rem;
    border-radius: var(--radius--md);
    border: var(--border--width) solid var(--accordion--border-color);
    color: var(--accordion--close-summary-color);
    background-color: var(--accordion--closed-summary-background);
    padding-inline: var(--accordion--spacing-inline);
}

details:where(:hover, :focus) summary::before,
details:where(:hover, :focus) summary::after {
    box-shadow: 0 0 0 24px var(--accordion--active-summary-color);
}

details :last-child {
    margin-block-end: 0;
}

details:where([open]) {
    background-color: var(--accordion--open-summary-background);
    padding-block-end: var(--accordion--spacing-block);
}

details:where([open]) summary {
    color: var(--accordion--open-summary-color);
}

details:where([open]) summary::before,
details:where([open]) summary::after {
    --icon-rotate: -180deg;
}

summary {
    width: 100%;
    padding-block: var(--accordion--spacing-block);
    user-select: none;
    cursor: pointer;
    list-style-type: none;
    display: flex;
    color: var(--accordion--close-summary-color);
    text-decoration: none;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing--sm);
    overflow-wrap: anywhere;
    background-image: radial-gradient(
        circle calc(var(--accordion--icon-circle) + 0px) at var(--accordion--icon-circle) 50%,
        var(--accordion--icon-circle-color) 100%,
        transparent 100%
    );
}

summary:where(.icon-right) {
    background-image: radial-gradient(
        circle calc(var(--accordion--icon-circle) + 0px) at calc(100% - var(--accordion--icon-circle)) 50%,
        var(--accordion--icon-circle-color) 100%,
        transparent 100%
    );
}

summary::before, summary::after {
    mask-image: var(--icon, var(--icon--base));
    -webkit-mask-image: var(--icon, var(--icon--base));
    mask-size: 1rem;
    mask-position: center center;
    mask-repeat: no-repeat;
    transform: rotate(var(--icon-rotate, 0deg)) scale(var(--icon-scale, 1), 1);
    content: "";
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: var(--transition);
    border-radius: 24px;
    background-color: currentColor;
    box-shadow: 0 0 0 24px var(--accordion--active-summary-background);
}

summary::before {
    margin-inline-start: calc(var(--accordion--icon-circle) - 12px);
}

summary::after {
    margin-left: auto;
    margin-inline-end: calc(var(--accordion--icon-circle) - 12px);
}

summary:where(.icon-style-plus) {
    --icon: var(--icon--plus);
}

summary:where(.icon-style-arrow) {
    --icon: var(--icon--arrow);
}

summary:where(.icon-style-caret) {
    --icon: var(--icon--caret);
}

summary:where(.icon-right)::before {
    content: unset;
}

summary:not(.icon-right)::after {
    content: unset;
}

summary > :where(h1,h2,h3,h4,h5,h6) {
    font-weight: 500;
    font-size: var(--font--size--5);
}

dialog[open] {
    display: block;
}

:is([role=dialog], dialog):where([open], .open) {
    padding: var(--spacing--2xl);
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    background-color: var(--card--background-color);
    border: var(--border--width) solid var(--border--color);
    box-shadow: var(--box--shadow);
    border-radius: var(--radius--md);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.cookie-notice {
    position: fixed;
    z-index: 1000;
    max-width: 330px;
    bottom: 20px;
}

:is([role=dialog], dialog):where([open], .open).cookie-notice {
    transform: unset;
    top: unset;
    left: unset;
    bottom: var(--spacing--lg);
    right: var(--spacing--lg);
    max-width: 60ch;
}

:where([role=dialog],
  dialog):where([open], .open) > div {
    padding: var(--modal--spacing-block-start) var(--modal--spacing) var(--modal--spacing);
}

:is([role=dialog], dialog):where([open], .open) + .backdrop {
    position: fixed;
    inset: 0 0 0 0;
    background-color: var(--modal--overlay-background-color);
    z-index: 9998;
}

:where([role=dialog], dialog) [data-action=close] {
    display: flex;
    align-items: center;
    column-gap: var(--spacing-inline);
    order: -1;
    align-self: flex-end;
    width: 16px;
    height: 16px;
    border-radius: 32px;
    mask-image: var(--icon--close);
    -webkit-mask-image: var(--icon--close);
    mask-size: 1rem;
    mask-position: center center;
    mask-repeat: no-repeat;
    background-color: currentColor;
}

:where([role=dialog], dialog) button span {
    width: 0;
    height: 0;
    overflow: clip;
    position: fixed;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

button, input, textarea, select {
    font: inherit;
}

main {
    flex: 1;
}

section {
    padding: var(--section--padding-block) var(--section--padding-inline);
}

table {
    --table-border-color: var(--table--border-color);
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
}

th,
td {
    padding: var(--spacing--lg);
    border-bottom: var(--border--width) solid var(--table-border-color);
    background-color: var(--color--base--0);
    color: var(--text--color--content);
    font-weight: var(--font-weight, var(--font--weight));
    text-align: left;
}

:where(thead) th,
:where(thead) td,
:where(tfoot) th,
:where(tfoot) td {
    --font-weight: 600;
    --border-width: calc(var(--border--width) * 2)
}

:where(thead) th {
    border-bottom: var(--border-width) solid var(--table-border-color);
}

:where(tfoot) th,
:where(tfoot) td {
    border-top: var(--border-width) solid var(--table-border-color);
    border-bottom-width: 0;
}

.striped-rows :where(tr:nth-child(odd)) > * {
    background-color: var(--table--row-stripped-background-color);
}

audio:not([controls]) {
    display: none;
    height: 0;
}

video,
audio,
object,
iframe {
    border-style: none;
    max-width: 100%;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
    border-style: none;
    object-fit: cover;
    object-position: center;
}

hr {
    border: none;
    border-top: var(--border--width) solid var(--color--base--200);
    margin-block: var(--spacing--block);
}

figure {
    margin: 0 0 var(--spacing--block-end, var(--spacing--lg)) 0;
    padding: 0;
}

figcaption {
    padding: var(--spacing--lg);
    color: var(--color--base--600);
}

svg:not(:root) {
    overflow: hidden;
}

pre code {
    font-size: inherit;
    font-family: inherit;
}

pre {
    -ms-overflow-style: scrollbar;
    display: block;
    margin-bottom: var(--spacing--block-end, var(--spacing--lg));
    overflow-x: auto;
    padding: var(--spacing--lg);
}

:where(pre, code, kbd) {
    border-radius: var(--radius--md);
    color: var(--code--color);
    font-weight: var(--font--weight);
    line-height: initial;
}

code,
kbd {
    display: inline-block;
    padding: 0.375rem;
}

pre,
:not(pre) > code {
    background-color: var(--code--background-color);
}

pre > code {
    display: block;
    padding: unset;
    background-color: transparent;
    background-image: none;
    line-height: var(--font--line-height);
}

.gutter {
    padding: var(--section--padding-block) var(--section--padding-inline);
}

.outer-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: var(--spacing--block) var(--spacing--inline);
}

.container {
    --max-width: var(--container--width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--max-width);
}

.page-content {
    width: 100%;
}

.page-content :where(h1,h2,h3,h4,h5,h6):not(:first-child) {
    margin-top: var(--spacing-block-start);
}

.page-content :where(h1,h2,h3,h4,h5,h6) {
    margin-bottom: var(--spacing--block-end, var(--spacing--block));
}

.page-content :where(p, ul, ol, dl, blockquote):not(:last-child) {
    margin-bottom: var(--spacing--block-end, var(--spacing--block));
}

.page-content :where(blockquote):not(:first-child) {
    margin-top: var(--spacing--block);
}

.flex, .flex-row {
    display: flex;
    gap: var(--spacing--inline);
    justify-content: flex-start;
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--block);
    align-items: flex-start;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.grid, .grid-fit, .grid-fill {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid--item-min-width), var(--grid--item-max-width)));
    grid-template-rows: auto;
    gap: var(--grid--gap);
    width: 100%;
}

.grid-fill {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid--item-min-width), var(--grid--item-max-width)));
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-cols-8 {
    grid-template-columns: repeat(8, 1fr);
}

.grid-cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* Responsive grid: at tablet, 3+ columns collapse to 2; at mobile, all collapse to 1 */
@media (max-width: 1024px) {
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6,
    .grid-cols-7,
    .grid-cols-8,
    .grid-cols-12 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6,
    .grid-cols-7,
    .grid-cols-8,
    .grid-cols-12 {
        grid-template-columns: 1fr;
    }
}

/* Table horizontal scroll utility */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.grid-rows-1 {
    grid-template-rows: repeat(1, 1fr);
}

.grid-rows-2 {
    grid-template-rows: repeat(2, 1fr);
}

.grid-rows-3 {
    grid-template-rows: repeat(3, 1fr);
}

.grid-rows-4 {
    grid-template-rows: repeat(4, 1fr);
}

.grid-rows-5 {
    grid-template-rows: repeat(5, 1fr);
}

.grid-rows-6 {
    grid-template-rows: repeat(6, 1fr);
}

/* Grid column span — for child items */
.grid-col-span-1 {
    grid-column: span 1;
}

.grid-col-span-2 {
    grid-column: span 2;
}

.grid-col-span-3 {
    grid-column: span 3;
}

.grid-col-span-4 {
    grid-column: span 4;
}

.grid-col-span-5 {
    grid-column: span 5;
}

.grid-col-span-6 {
    grid-column: span 6;
}

.grid-col-span-full {
    grid-column: 1 / -1;
}

/* Grid row span — for child items */
.grid-row-span-1 {
    grid-row: span 1;
}

.grid-row-span-2 {
    grid-row: span 2;
}

.grid-row-span-3 {
    grid-row: span 3;
}

.grid-row-span-full {
    grid-row: 1 / -1;
}

.gap-none {
    gap: var(--spacing--none);
}

.gap-xxs {
    gap: var(--spacing--xxs);
}

.gap-xs {
    gap: var(--spacing--xs);
}

.gap-sm {
    gap: var(--spacing--sm);
}

.gap-md {
    gap: var(--spacing--md);
}

.gap-lg {
    gap: var(--spacing--lg);
}

.gap-xl {
    gap: var(--spacing--xl);
}

.gap-2xl {
    gap: var(--spacing--2xl);
}

.gap-3xl {
    gap: var(--spacing--3xl);
}

.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.text-center {
    text-align: center;
}

.text-balance {
    text-wrap: balance;
}

.color-primary {
    color: var(--color--primary--500);
}

.bg-primary {
    background-color: var(--color--primary--100);
}

.border-color-primary {
    border-color: var(--color--primary--500);
}

.font-size-1 {
    font-size: var(--font--size--1);
    --font-line-height: 1.125;
    --spacing-block-start: var(--size--24);
}

.font-size-2 {
    font-size: var(--font--size--2);
    --font-line-height: 1.15;
    --spacing-block-start: var(--size--20);
}

.font-size-3 {
    font-size: var(--font--size--3);
    --font-line-height: 1.15;
    --spacing-block-start: var(--size--16);
}

.font-size-4 {
    font-size: var(--font--size--4);
    --font-line-height: 1.4;
    --spacing-block-start: var(--size--12);
}

.font-size-5 {
    font-size: var(--font--size--5);
    --font-line-height: 1.5;
    --spacing-block-start: var(--size--12);
}

.font-size-6 {
    font-size: var(--font--size--6);
    --font-line-height: 1.25;
    --spacing-block-start: var(--size--10);
}

.builderiusContent {
    display: contents;
}

.skip-navigation {
    position: fixed;
    top: -9999999px;
    z-index: 999999999;
    left: var(--spacing--lg);
    background-color: var(--color--base--200);
}

.skip-navigation:focus {
    top: var(--spacing--lg);
}

*:focus:not(:focus-visible) {
    outline-style: none;
}

[role=tablist] {
    display: flex;
}

*:focus:focus-visible {
    outline: var(--outline--border);
}

.visuallyhidden, .screen-reader-text, .sr-only {
    border-width: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

builderius-smart-form button.processing {
    cursor: progress;
}

.footer-col {
    display: flex;
}

.card {
    padding: var(--spacing--3xl);
    border-radius: var(--card--border-radius);
    background-color: var(--card--background-color);
    border: solid var(--border--width) var(--card--border-color);
    box-shadow: var(--card--box-shadow);
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing--sm);
    align-items: flex-start;
}

.search-form {
    display: flex;
    gap: var(--spacing--sm);
    overflow: hidden;
    font-size: var(--font--size--6);
    align-items: stretch;
    border-radius: var(--radius--xs);
    background-color: var(--color--base--50);
    outline: var(--border--width) solid var(--color--base--200);
    width: 100%;
}

.search-form:focus-within {
    border-color: var(--color--base--300);
    outline-color: var(--color--base--600);
}

.search-form input[type=search]:focus {
    border-style: none;
    outline-style: none;
}

.search-form input[type="search"] {
    background-color: transparent;
    border-style: none;
    outline-style: none;
    font-size: inherit;
    flex-grow: 1;
    text-indent: var(--spacing--inline);
}

.search-button {
    --icon: var(--icon--search);
    display: flex;
    font-size: inherit;
    color: var(--color--base--0);
    padding-top: unset;
    padding-bottom: unset;
    align-items: center;
    min-height: 2em;
    line-height: 2em;
    border-style: none;
    outline-style: none;
}

.icon-btn {
    display: inherit;
    --icon-height: var(--size--8);
    --icon-width: var(--size--8);
    --icon-bg: var(--button--filled-bg-enabled);
    --icon-fill-color: var(--button--filled-tx-enabled);
}

:where(.icon-btn) .icon {
    mask-image: var(--icon--search);
    -webkit-mask-image: var(--icon--search);
    background-color: currentColor;
    mask-size: 1em;
    mask-position: center center;
    mask-repeat: no-repeat;
    height: var(--icon-height);
    width: var(--icon-width);
}

:where(.icon-btn) svg {
    height: var(--icon-height);
    width: var(--icon-width);
}

:where(.icon-btn) svg path {
    fill: var(--icon-fill-color);
}

:where(.icon-btn):is(.btn-tonal) svg path {
    --icon-fill-color: var(--button--filled-tonal-tx-enabled);
}

:where(.icon-btn):is(.btn-outlined) svg path {
    --icon-fill-color: var(--button--outlined-tx-enabled);
}

:where(.icon-btn):is(.btn-ghost) svg path {
    --icon-fill-color: var(--button--ghost-tx-enabled);
}

:where(.icon-btn):is(.badge) svg path {
    --icon-fill-color: var(--button--filled-tx-enabled);
}

:where(.icon-btn):is(.badge-tonal) svg path {
    --icon-fill-color: var(--badge--tonal-tx);
}

:where(.icon-btn):is(.badge-outlined) svg path {
    --icon-fill-color: var(--badge--outlined-tx);
}

:where(.icon-btn):is(.badge-ghost) svg path {
    --icon-fill-color: var(--badge--ghost-tx);
}

.icon-end {
    --icon-size: 1.5em;
    --spacing-inline: 0.5em;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing--inline);
}

.icon-end::after {
    display: inline-flex;
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    mask-image: var(--icon--chevron);
    background-color: currentColor;
}

.icon-start {
    display: inline-flex;
    align-items: center;
    --icon-size: 1.5em;
    --spacing-inline: 0.5em;
    gap: var(--spacing--inline);
}

.icon-start::before {
    display: inline-flex;
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    mask-image: var(--icon--chevron);
    background-color: currentColor;
}

.contact-form > * {
    width: 100%;
}

.contact-form textarea {
    min-height: 7em;
}

.contact-form button {
    margin-top: 0.85rem;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: var(--pagination--item-radius);
}

.page-numbers {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    line-height: var(--font--line-height);
    color: var(--color--primary--500);
    border: var(--border--width) solid var(--color--base--50);
    text-decoration: none;
}

.page-numbers:where(a):hover, .page-numbers:where(.current) {
    color: var(--color--base--0);
    background-color: var(--color--primary--400);
    border-color: var(--color--primary--400);
}

:where(.icon-right) [data-accordion-header] {
    flex-direction: row;
    justify-content: flex-start;
}

:where(.icon-right) [aria-hidden=true] {
    margin-inline-start: auto;
    transform: rotate(90deg);
}

:where(.icon-right) [aria-expanded=true] [aria-hidden=true] {
    transform: rotate(0);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color--primary--50: oklch(from var(--color--primary--original) 0.18 calc(c * 0.40) h);
        --color--primary--100: oklch(from var(--color--primary--original) 0.25 calc(c * 0.50) h);
        --color--primary--200: oklch(from var(--color--primary--original) 0.31 calc(c * 0.70) h);
        --color--primary--300: oklch(from var(--color--primary--original) 0.39 calc(c * 0.85) h);
        --color--primary--400: oklch(from var(--color--primary--original) 0.48 calc(c * 0.95) h);
        --color--primary--500: oklch(from var(--color--primary--original) 0.58 calc(c * 1.00) h);
        --color--primary--600: oklch(from var(--color--primary--original) 0.68 calc(c * 0.85) h);
        --color--primary--700: oklch(from var(--color--primary--original) 0.78 calc(c * 0.65) h);
        --color--primary--800: oklch(from var(--color--primary--original) 0.87 calc(c * 0.45) h);
        --color--primary--900: oklch(from var(--color--primary--original) 0.93 calc(c * 0.25) h);
        --color--primary--950: oklch(from var(--color--primary--original) 0.97 calc(c * 0.15) h);
        --color--base--0: oklch(0 0 none);
        --color--base--50: oklch(from var(--color--primary--original) 0.18 0.006 h);
        --color--base--100: oklch(from var(--color--primary--original) 0.25 0.008 h);
        --color--base--200: oklch(from var(--color--primary--original) 0.31 0.010 h);
        --color--base--300: oklch(from var(--color--primary--original) 0.39 0.012 h);
        --color--base--400: oklch(from var(--color--primary--original) 0.48 0.014 h);
        --color--base--500: oklch(from var(--color--primary--original) 0.58 0.015 h);
        --color--base--600: oklch(from var(--color--primary--original) 0.68 0.015 h);
        --color--base--700: oklch(from var(--color--primary--original) 0.78 0.014 h);
        --color--base--800: oklch(from var(--color--primary--original) 0.87 0.012 h);
        --color--base--900: oklch(from var(--color--primary--original) 0.93 0.010 h);
        --color--base--950: oklch(from var(--color--primary--original) 0.97 0.008 h);
        --color--base--1000: oklch(1.00 0 none);
    }
}


/* ==========================================================================
   INKWELL THEME
   Everything above this line is the untouched Builderius CSS framework.
   Framework :root values (colours, type sizes, spacing, layout) are edited in place above.
   Below: only new variables and selectors.
   ========================================================================== */

/* --- 1. Theme variables -------------------------------------------------- */
:root {
    color-scheme: light dark;
    --theme--font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
    --theme--font-heading: var(--theme--font-serif);
    --theme--muted: var(--color--base--600);
    --theme--line: var(--color--base--100);
    --theme--surface: var(--color--base--50);
    --theme--image-radius: var(--radius--md);
    --theme--image-bg: var(--color--base--100);
    --theme--avatar-size: var(--size--20);
    /* Page background: white in light mode, a warm near-black in dark mode (see the dark block below) */
    --theme--page: var(--color--base--0);
    /* Accent for small text (eyebrows, links, pagination): a step darker than primary-500 so it
       reaches 4.5:1 on white, base-50 and primary-50 tints. Large accents (drop cap, hero em) keep primary-500. */
    --theme--accent-text: oklch(from var(--color--primary--original) 0.52 c h);
    --theme--newsletter-bg: var(--color--primary--50);
    --theme--newsletter-border: var(--color--primary--100);

    /* Extra fluid sizes, same min/max -> clamp() pattern as the framework */
    --text--size--lead-min: var(--size--9);
    --text--size--lead-max: var(--size--12);
    --text--size--display-min: var(--size--20);
    --text--size--display-max: var(--size--36);
    --text--size--jumbo-min: var(--size--48);
    --text--size--jumbo-max: var(--size--96);
    --font--size--lead: clamp(var(--text--size--lead-min), calc(var(--text--size--lead-min) + tan(atan2(var(--text--size--lead-max) - var(--text--size--lead-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--lead-max));
    --font--size--display: clamp(var(--text--size--display-min), calc(var(--text--size--display-min) + tan(atan2(var(--text--size--display-max) - var(--text--size--display-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--display-max));
    --font--size--jumbo: clamp(var(--text--size--jumbo-min), calc(var(--text--size--jumbo-min) + tan(atan2(var(--text--size--jumbo-max) - var(--text--size--jumbo-min), 1200px - 375px)) * (100vi - 375px)), var(--text--size--jumbo-max));
}

@media (prefers-color-scheme: dark) {
    :root {
        --theme--page: oklch(from var(--color--primary--original) 0.14 0.006 h);
        --theme--accent-text: oklch(from var(--color--primary--original) 0.65 calc(c * 0.9) h);
        --theme--newsletter-bg: var(--color--base--50);
        --theme--newsletter-border: var(--color--base--100);
    }
}

/* --- 2. Base refinements -------------------------------------------------- */
body {
    background-color: var(--theme--page);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--theme--font-heading);
    letter-spacing: -0.012em;
    text-wrap: balance;
}

a {
    --color-text: var(--theme--accent-text);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

a:where(:hover, :active, :focus) {
    --color-text: var(--color--primary--500);
}

:where(h1, h2, h3, h4) a {
    --color-text: inherit;
    --text-decoration: none;
}

:where(h1, h2, h3, h4) a:hover {
    --color-text: var(--color--primary--500);
}

code {
    padding: 0.15em 0.4em;
}

img {
    background-color: var(--theme--image-bg);
}

hr {
    border-top-color: var(--theme--line);
}

.container-narrow {
    --max-width: var(--container--narrow);
}

.text-muted {
    color: var(--theme--muted);
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.lead {
    font-size: var(--font--size--lead);
    line-height: 1.6;
    color: var(--color--base--700);
}

.eyebrow {
    font-size: var(--size--7);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme--accent-text);
}

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing--lg);
    padding-bottom: var(--spacing--lg);
    margin-bottom: var(--spacing--4xl);
    border-bottom: var(--border--width) solid var(--theme--line);
}

.section-title h2 {
    font-size: var(--font--size--4);
}

.section-title a {
    --text-decoration: none;
    font-size: var(--size--7);
    font-weight: 600;
    white-space: nowrap;
}

.section-muted {
    background-color: var(--theme--surface);
}

/* --- 3. Header & navigation ---------------------------------------------- */
.site-header {
    padding: var(--spacing--3xl) var(--section--padding-inline);
    border-bottom: var(--border--width) solid var(--theme--line);
}

.site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing--lg) var(--spacing--4xl);
}

.site-logo {
    --color-text: var(--text--color--heading);
    --text-decoration: none;
    font-family: var(--theme--font-heading);
    font-size: var(--font--size--3);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.site-logo:hover {
    --color-text: var(--text--color--heading);
}

.site-logo span {
    color: var(--color--primary--500);
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--xs) var(--spacing--3xl);
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-nav a {
    --color-text: var(--color--base--700);
    --text-decoration: none;
    display: block;
    padding-block: var(--spacing--xs);
    font-size: var(--size--8);
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover {
    --color-text: var(--color--primary--500);
}

.site-nav a[aria-current="page"] {
    --color-text: var(--text--color--heading);
    border-bottom-color: var(--color--primary--500);
}

/* --- 4. Post meta, avatar, tags ------------------------------------------ */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing--xs) var(--spacing--md);
    font-size: var(--size--7);
    color: var(--theme--muted);
}

.post-meta > * + *:not(.badge-tonal)::before {
    content: "·";
    margin-inline-end: var(--spacing--md);
    color: var(--color--base--400);
}

.post-meta a {
    --color-text: var(--color--base--800);
    --text-decoration: none;
    font-weight: 600;
}

.post-meta a:hover {
    --color-text: var(--color--primary--500);
}

.post-meta .badge-tonal {
    --color-text: var(--badge--tonal-tx);
}

.avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--theme--avatar-size);
    height: var(--theme--avatar-size);
    border-radius: 50%;
    background-color: var(--color--primary--100);
    color: var(--color--primary--600);
    font-family: var(--theme--font-heading);
    font-size: calc(var(--theme--avatar-size) * 0.38);
    font-weight: 700;
    line-height: 1;
}

.avatar-lg {
    --theme--avatar-size: var(--size--36);
}

.byline {
    display: flex;
    align-items: center;
    gap: var(--spacing--lg);
}

.intro-strip {
    align-items: flex-start;
    gap: var(--spacing--4xl);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--sm);
    padding: 0;
    margin: 0;
    list-style: none;
}

.tag-list a {
    --text-decoration: none;
}

.tag-list .badge {
    --color-text: var(--badge--filled-tx);
}

.badge-tonal:where(a):hover {
    --background-color: var(--color--primary--200);
}

/* --- 5. Hero (homepage) --------------------------------------------------- */
.hero {
    padding-block: clamp(var(--spacing--10xl), 12vw, var(--spacing--15xl));
}

.hero h1 {
    font-size: var(--font--size--display);
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.hero h1 em {
    font-style: italic;
    color: var(--color--primary--500);
}

.hero .lead {
    max-width: 56ch;
}

/* --- 6. Post cards (grids) ------------------------------------------------ */
.post-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
}

.post-card-media {
    display: block;
    overflow: hidden;
    border-radius: var(--theme--image-radius);
    margin-bottom: var(--spacing--sm);
}

.post-card-media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    transition: transform 0.5s ease;
}

.post-card:hover .post-card-media img {
    transform: scale(1.03);
}

.post-card h3 {
    font-size: var(--font--size--4);
    line-height: 1.3;
}

.post-card p {
    color: var(--color--base--700);
}

/* Featured (wide) card */
.post-featured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    align-items: center;
    gap: var(--spacing--4xl) var(--spacing--7xl);
}

.post-featured .post-card-media {
    margin: 0;
}

.post-featured .post-card-media img {
    aspect-ratio: 4 / 3;
}

.post-featured h2 {
    font-size: var(--font--size--2);
}

/* --- 7. Blog list --------------------------------------------------------- */
.page-header {
    padding-bottom: 0;
}

.page-header h1 {
    margin-bottom: var(--spacing--lg);
}

.post-list {
    display: flex;
    flex-direction: column;
}

.post-entry {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xl);
    padding-block: var(--spacing--9xl);
    border-bottom: var(--border--width) solid var(--theme--line);
}

.post-entry:first-child {
    padding-top: 0;
}

.post-entry h2 {
    font-size: var(--font--size--2);
}

.post-entry-media {
    display: block;
    overflow: hidden;
    border-radius: var(--theme--image-radius);
}

.post-entry-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.read-more {
    --text-decoration: none;
    font-weight: 600;
    font-size: var(--size--8);
}

.read-more::after {
    content: "→";
    display: inline-block;
    margin-inline-start: 0.35em;
    transition: transform var(--transition);
}

.read-more:hover::after {
    transform: translateX(3px);
}

.pagination {
    justify-content: center;
    gap: var(--spacing--sm);
    margin-top: var(--spacing--7xl);
}

.page-numbers {
    border-radius: var(--pagination--item-radius);
    border-color: var(--theme--line);
    min-width: 2.75em;
    text-align: center;
    color: var(--theme--accent-text);
}

.page-numbers:where(a):hover,
.page-numbers.current {
    color: var(--color--base--0);
    background-color: var(--theme--accent-text);
    border-color: var(--theme--accent-text);
}

.page-item.disabled .page-numbers {
    color: var(--color--base--400);
    pointer-events: none;
}

/* Topic index (blog.html#topics): the target of every topic link, no JavaScript needed */
.topic-index {
    display: grid;
    align-self: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--spacing--7xl) var(--spacing--5xl);
}

.topic-index .recent-posts h3 {
    font-size: var(--font--size--5);
    margin-bottom: var(--spacing--md);
}

.topic-index .recent-posts li {
    flex-direction: column;
    gap: var(--spacing--xxs);
}

.topic-index :target h3 {
    color: var(--theme--accent-text);
}

[id^="topic-"],
#posts {
    scroll-margin-top: var(--spacing--5xl);
}

/* The topic group a "Jump to topic" link landed on: a page-coloured card with an accent ring
   (box-shadow, so nothing shifts) */
.topic-index .recent-posts:target {
    border-radius: var(--radius--xs);
    background-color: var(--theme--page);
    box-shadow: 0 0 0 var(--spacing--lg) var(--theme--page), 0 0 0 calc(var(--spacing--lg) + 2px) var(--theme--accent-text);
}

.topic-back {
    display: inline-block;
    margin-top: var(--spacing--md);
    font-size: var(--size--7);
    font-weight: 600;
}

/* "Jump to topic:" row on blog.html: plain in-page links, no selected state (they are not filters) */
.topic-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing--xs) var(--spacing--md);
    font-size: var(--size--8);
}

.topic-jump-label {
    color: var(--theme--muted);
}

.topic-jump .tag-list {
    gap: var(--spacing--xs) var(--spacing--lg);
}

.topic-jump .tag-list a {
    --text-decoration: underline;
    font-weight: 600;
}

/* --- 8. Article ----------------------------------------------------------- */
.article-header {
    padding: var(--section--padding-block) var(--section--padding-inline) var(--spacing--7xl);
}

.article-header h1 {
    line-height: 1.1;
}

.article-hero {
    margin: 0 auto;
    padding-inline: var(--section--padding-inline);
}

.article-hero img {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: var(--theme--image-radius);
}

.article-hero figcaption,
.prose figcaption {
    padding: var(--spacing--md) 0 0;
    font-size: var(--size--7);
    text-align: center;
}

.prose {
    --spacing--block-end: var(--spacing--2xl);
}

.prose > p:first-of-type::first-letter {
    float: left;
    font-family: var(--theme--font-heading);
    font-size: 3.6em;
    line-height: 0.9;
    font-weight: 700;
    padding: 0.08em 0.1em 0 0;
    color: var(--color--primary--500);
}

.prose h2 {
    --spacing-block-start: var(--size--28);
}

.prose h3 {
    --spacing-block-start: var(--size--20);
}

.prose :where(ul, ol) {
    padding-inline-start: 1.4em;
}

.prose li + li {
    margin-top: var(--spacing--sm);
}

.prose li::marker {
    color: var(--color--primary--500);
}

.prose blockquote {
    padding: var(--spacing--xs) 0 var(--spacing--xs) var(--spacing--3xl);
    margin-block: var(--spacing--5xl);
    font-family: var(--theme--font-heading);
    font-size: 1.3em;
    font-style: italic;
    line-height: 1.5;
    color: var(--text--color--heading);
}

.prose blockquote p {
    color: inherit;
}

.prose blockquote cite {
    display: block;
    margin-top: var(--spacing--md);
    font-family: var(--font--family);
    font-size: var(--size--7);
    font-style: normal;
}

.prose figure {
    margin-block: var(--spacing--5xl);
}

.prose figure img {
    width: 100%;
    border-radius: var(--theme--image-radius);
}

.prose pre {
    margin-block: var(--spacing--3xl);
    font-size: 0.85em;
}

.prose table {
    margin-block: var(--spacing--3xl);
    font-size: 0.9em;
}

.prose :where(th, td) {
    padding: var(--spacing--md) var(--spacing--lg);
    background-color: transparent;
}

.prose thead th {
    font-weight: 700;
    color: var(--text--color--heading);
}

.prose hr {
    margin-block: var(--spacing--7xl);
}

.article-footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--7xl);
    padding-top: var(--spacing--9xl);
}

.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing--lg) var(--spacing--2xl);
    padding-block: var(--spacing--2xl);
    border-block: var(--border--width) solid var(--theme--line);
}

.share-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing--sm) var(--spacing--lg);
}

.share-links strong {
    font-size: var(--size--7);
    font-weight: 600;
}

.post-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--spacing--lg);
}

.post-nav a {
    --text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    padding: var(--spacing--xl) var(--spacing--2xl);
    border: var(--border--width) solid var(--theme--line);
    border-radius: var(--border--radius);
}

.post-nav a:hover {
    border-color: var(--color--primary--300);
    background-color: var(--color--primary--50);
}

.post-nav small {
    color: var(--theme--muted);
}

.post-nav strong {
    font-family: var(--theme--font-heading);
    color: var(--text--color--heading);
    line-height: 1.35;
}

.post-nav .post-nav-next {
    text-align: end;
    grid-column: -2;
}

/* --- 9. Simple page ------------------------------------------------------ */
.about-portrait {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--theme--image-radius);
}

.faq {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
}

.faq details {
    margin: 0;
}

.faq summary {
    font-weight: 600;
    color: var(--text--color--heading);
}

.faq details p {
    padding-bottom: var(--spacing--sm);
}

.contact-section {
    align-items: stretch;
    margin-top: var(--spacing--10xl);
}

.contact-form {
    align-items: stretch;
}

.contact-form button {
    align-self: flex-start;
}

/* --- 10. Newsletter ------------------------------------------------------- */
.newsletter {
    align-items: center;
    gap: var(--spacing--xl);
    padding: clamp(var(--spacing--4xl), 6vw, var(--spacing--10xl));
    text-align: center;
    background-color: var(--theme--newsletter-bg);
    border-color: var(--theme--newsletter-border);
}

.newsletter h2 {
    font-size: var(--font--size--3);
}

.newsletter .field-group {
    width: 100%;
    max-width: 440px;
}

.newsletter input {
    background-color: var(--color--base--0);
}

.form-note {
    font-size: var(--size--7);
    color: var(--theme--muted);
}

/* Author box + subscribe card after an article */
.post-end {
    padding-top: 0;
}

.post-end > .container {
    align-items: stretch;
    gap: var(--spacing--6xl);
}

/* --- 11. Error page ------------------------------------------------------- */
.error-page {
    display: flex;
    align-items: center;
    min-height: 70vh;
}

.error-code {
    font-family: var(--theme--font-heading);
    font-size: var(--font--size--jumbo);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color--primary--500);
}

.recent-posts {
    align-self: stretch;
}

.recent-posts h2 {
    font-size: var(--font--size--5);
    margin-bottom: var(--spacing--md);
}

.recent-posts ul {
    display: grid;
    gap: var(--spacing--md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.recent-posts li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing--xs) var(--spacing--lg);
    padding-bottom: var(--spacing--md);
    border-bottom: var(--border--width) solid var(--theme--line);
}

.recent-posts time {
    font-size: var(--size--7);
    color: var(--theme--muted);
}

/* --- 12. Footer ----------------------------------------------------------- */
.site-footer {
    padding: var(--spacing--9xl) var(--section--padding-inline) var(--spacing--4xl);
    border-top: var(--border--width) solid var(--theme--line);
    font-size: var(--size--7);
    color: var(--theme--muted);
}

.site-footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing--4xl);
    padding-bottom: var(--spacing--7xl);
}

.site-footer-inner > :first-child {
    grid-column: span 2;
}

.site-footer h2 {
    font-family: var(--font--family);
    font-size: var(--size--7);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text--color--heading);
    margin-bottom: var(--spacing--lg);
}

.site-footer ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    padding: 0;
    list-style: none;
}

.site-footer a {
    --color-text: var(--color--base--700);
    --text-decoration: none;
}

.site-footer a:hover {
    --color-text: var(--color--primary--500);
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing--md);
    padding-top: var(--spacing--3xl);
    border-top: var(--border--width) solid var(--theme--line);
}

@media (max-width: 560px) {
    .site-footer-inner > :first-child {
        grid-column: auto;
    }
}

/* --- 13. Accessibility fixes ---------------------------------------------- */
/* Skip link: the framework's .skip-navigation sets a base-200 background under the button's
   white text (1.5:1). Ink background + page-coloured text; both flip together in dark mode. */
.skip-navigation.button {
    --background-color: var(--color--base--900);
    --color-text: var(--color--base--0);
    background-color: var(--color--base--900);
    color: var(--color--base--0);
}

/* --- Table of contents (article.html) ------------------------------------ */
.toc {
    margin-bottom: var(--spacing--5xl);
    padding: var(--spacing--2xl) var(--spacing--3xl);
    border: var(--border--width) solid var(--theme--line);
    border-radius: var(--border--radius);
    background-color: var(--theme--surface);
}

.toc h2 {
    margin-bottom: var(--spacing--md);
    font-family: var(--font--family);
    font-size: var(--size--7);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme--muted);
}

.toc ol {
    display: grid;
    gap: var(--spacing--sm);
    margin: 0;
    padding-inline-start: var(--spacing--2xl);
}

.toc a {
    --color-text: var(--theme--accent-text);
}

.prose h2[id] {
    scroll-margin-top: var(--spacing--5xl);
}


/* === vitaliykiyko.com ===================================================== */
.site-header-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing--md) var(--spacing--3xl);
}

.search-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    color: var(--color--base--700);
    background: transparent;
    border: var(--border--width) solid var(--theme--line);
    border-radius: 999px;
    cursor: pointer;
}

.search-toggle:hover {
    color: var(--color--primary--500);
    border-color: currentColor;
}

/* Old posts: small inline images, centred blocks and embedded players */
.prose img {
    height: auto;
}

.prose .aligncenter,
.prose .has-text-align-center {
    margin-inline: auto;
    text-align: center;
}

.prose .alignleft {
    float: left;
    margin: 0 var(--spacing--xl) var(--spacing--md) 0;
}

.prose .alignright {
    float: right;
    margin: 0 0 var(--spacing--md) var(--spacing--xl);
}

.prose::after {
    content: "";
    display: block;
    clear: both;
}

.legacy-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-block: var(--spacing--2xl);
}

.legacy-video iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

/* Comments from the WordPress years, kept as text */
.legacy-comments {
    margin-block-start: var(--spacing--5xl);
    padding-block-start: var(--spacing--3xl);
    border-block-start: var(--border--width) solid var(--theme--line);
}

.legacy-comments ol {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xl);
    padding: 0;
    list-style: none;
}

.legacy-comments ol ol {
    margin-block-start: var(--spacing--2xl);
    padding-inline-start: var(--spacing--2xl);
    border-inline-start: 2px solid var(--theme--line);
}

.legacy-comments li {
    margin: 0;
}

.legacy-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--xs) var(--spacing--md);
    margin-block-end: var(--spacing--xs);
    font-size: var(--size--7);
    color: var(--color--base--600);
}

.legacy-comment-meta strong {
    color: var(--text--color--heading);
}

.legacy-comment-body > :first-child {
    margin-block-start: 0;
}

.legacy-comment-body > :last-child {
    margin-block-end: 0;
}