@font-face {
	font-display: swap;
	font-family: "Segoe UI", segoe;
	font-style: normal;
	font-weight: 400;
	
}


body {
  background-color: var(--white);
  font-family: "Segoe UI", segoe;
}

main {
	display: block;
}

h1 {
    display: block;
    font-size: 28px;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

h2 {
    display: block;
    font-size: 24px;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

hr {
	box-sizing: content-box;
	block-size: 0;
	overflow: visible;
}

a {
	background-color: rgba(0,0,0,0);
}

img {
	border-style: none;
}

button {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button {
	overflow: visible;
}

button {
	text-transform: none;
}

button {
	-webkit-appearance: button;
}

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

button:-moz-focusring {
	outline: 1px dotted ButtonText;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

:root {
	--spruce-alert-color-danger: hsl(0, 71%, 51%);
	--spruce-alert-color-info: hsl(195, 100%, 42%);
	--spruce-alert-color-success: hsl(150, 100%, 33%);
	--spruce-alert-color-warning: hsl(48, 89%, 55%);
}

:root {
	--spruce-base-color-background: hsl(0, 0%, 100%);
	--spruce-base-color-blockquote-border: hsl(262, 71%, 49%);
	--spruce-base-color-border: hsl(215, 63%, 93%);
	--spruce-base-color-code-background: hsl(262, 71%, 97%);
	--spruce-base-color-code-foreground: hsl(260, 70%, 6%);
	--spruce-base-color-heading: hsl(260, 70%, 6%);
	--spruce-base-color-link: hsl(262, 71%, 49%);
	--spruce-base-color-link-hover: hsl(262, 71%, 39.2%);
	--spruce-base-color-mark-background: hsl(50, 100%, 80%);
	--spruce-base-color-mark-foreground: hsl(260, 70%, 6%);
	--spruce-base-color-marker: hsl(262, 71%, 49%);
	--spruce-base-color-primary: hsl(262, 71%, 49%);
	--spruce-base-color-secondary: hsl(227, 92%, 55%);
	--spruce-base-color-strong: hsl(260, 70%, 6%);
	--spruce-base-color-text: hsl(208, 9%, 42%);
	--spruce-base-color-code-tab-background: hsl(222, 100%, 98%);
	--spruce-base-color-primary-dark: hsl(261, 52%, 35%);
	--spruce-base-color-primary-darkest: hsl(272, 100%, 9%);
	--spruce-base-color-primary-50: hsl(259, 53%, 98%);
	--spruce-base-color-primary-100: hsl(259, 53%, 93%);
}

:root {
	--spruce-btn-color-primary-background: hsl(262, 71%, 49%);
	--spruce-btn-color-primary-background-hover: hsl(262, 71%, 39%);
	--spruce-btn-color-primary-foreground: hsl(0, 0%, 100%);
	--spruce-btn-color-primary-shadow: hsl(262, 71%, 84%);
	--spruce-btn-color-secondary-background: hsl(227, 92%, 55%);
	--spruce-btn-color-secondary-background-hover: hsl(227, 92%, 45%);
	--spruce-btn-color-secondary-foreground: hsl(0, 0%, 100%);
	--spruce-btn-color-secondary-shadow: hsl(227, 92%, 90%);
	--spruce-btn-color-dark-background: hsl(205, 100%, 2%);
	--spruce-btn-color-dark-background-hover: hsl(205, 100%, 5%);
	--spruce-btn-color-dark-foreground: hsl(0, 0%, 100%);
	--spruce-btn-color-dark-outline-border: hsl(260, 4%, 70%);
	--spruce-btn-color-dark-outline-foreground: hsl(205, 100%, 2%);
	--spruce-btn-color-dark-outline-foreground-hover: hsl(0, 0%, 100%);
	--spruce-btn-color-dark-outline-background-hover: hsl(205, 100%, 2%);
	--spruce-btn-color-dark-outline-focus-ring: hsl(205, 100%, 2%);
	--spruce-btn-color-decline-background: hsl(207, 39%, 17%);
	--spruce-btn-color-decline-foreground: hsl(0, 0%, 100%);
	--spruce-btn-color-delete-background: hsl(0, 71%, 94%);
	--spruce-btn-color-delete-background-hover: hsl(0, 71%, 51%);
	--spruce-btn-color-delete-focus-ring: hsl(0, 71%, 51%);
	--spruce-btn-color-delete-foreground: hsl(0, 71%, 51%);
	--spruce-btn-color-delete-foreground-hover: hsl(0, 0%, 100%);
	--spruce-btn-color-discrete-background: hsla(206, 40%, 17%, 0.1);
	--spruce-btn-color-discrete-background-hover: hsl(262, 71%, 49%);
	--spruce-btn-color-discrete-foreground: hsl(0, 0%, 10%);
	--spruce-btn-color-discrete-foreground-hover: hsl(0, 0%, 100%);
	--spruce-btn-color-install-background: hsl(0, 0%, 95%);
	--spruce-btn-color-install-background-hover: hsl(0, 0%, 90%);
	--spruce-btn-color-install-foreground: hsl(0, 0%, 10%);
	--spruce-btn-color-light-background: hsl(259, 53%, 94%);
	--spruce-btn-color-light-background-hover: hsl(262, 71%, 49%);
	--spruce-btn-color-light-focus-ring: hsl(262, 71%, 49%);
	--spruce-btn-color-light-foreground: hsl(262, 71%, 49%);
	--spruce-btn-color-light-foreground-hover: hsl(0, 0%, 100%);
	--spruce-btn-color-pagination-background: hsl(263, 40%, 96%);
	--spruce-btn-color-pagination-background-hover: hsl(262, 71%, 49%);
	--spruce-btn-color-pagination-focus-ring: hsl(262, 71%, 49%);
	--spruce-btn-color-pagination-foreground: hsl(262, 71%, 49%);
	--spruce-btn-color-pagination-foreground-hover: hsl(0, 0%, 100%);
}

:root {
	--spruce-form-color-background: hsl(0, 0%, 100%);
	--spruce-form-color-background-disabled: hsl(0, 0%, 95%);
	--spruce-form-color-border: hsl(260, 4%, 70%);
	--spruce-form-color-border-disabled: hsl(215, 63%, 93%);
	--spruce-form-color-border-focus: hsl(262, 71%, 49%);
	--spruce-form-color-check-background: hsl(262, 71%, 49%);
	--spruce-form-color-check-focus-ring: hsl(262, 71%, 49%);
	--spruce-form-color-check-foreground: hsl(0, 0%, 100%);
	--spruce-form-color-group-label-background: hsl(210, 60%, 98%);
	--spruce-form-color-group-label-foreground: hsl(208, 9%, 42%);
	--spruce-form-color-invalid: hsl(0, 71%, 51%);
	--spruce-form-color-invalid-focus-ring: hsla(0, 71%, 51%, 0.25);
	--spruce-form-color-label: hsl(260, 70%, 6%);
	--spruce-form-color-legend: hsl(260, 70%, 6%);
	--spruce-form-color-placeholder: hsl(208, 7%, 40%);
	--spruce-form-color-range-thumb-background: hsl(262, 71%, 49%);
	--spruce-form-color-range-thumb-focus-ring: hsl(262, 71%, 49%);
	--spruce-form-color-range-track-background: hsl(215, 63%, 93%);
	--spruce-form-color-ring-focus: hsla(262, 71%, 49%, 0.25);
	--spruce-form-color-select-foreground: hsl(260, 70%, 6%);
	--spruce-form-color-switch-background: hsl(262, 71%, 49%);
	--spruce-form-color-switch-focus-ring: hsl(262, 71%, 49%);
	--spruce-form-color-switch-foreground: hsl(0, 0%, 100%);
	--spruce-form-color-text: hsl(208, 9%, 42%);
	--spruce-form-color-valid: hsl(150, 100%, 33%);
	--spruce-form-color-valid-focus-ring: hsla(150, 100%, 33%, 0.25);
}

:root {
	--spruce-selection-color-foreground: hsl(0, 0%, 100%);
	--spruce-selection-color-background: hsl(262, 71%, 49%);
}

:root {
	--spruce-scrollbar-color-thumb-background: hsla(0, 0%, 0%, 0.15);
	--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25);
	--spruce-scrollbar-color-track-background: hsla(0, 0%, 0%, 0.05);
}

:root {
	--spruce-table-color-border: hsl(215, 63%, 93%);
	--spruce-table-color-caption: hsl(208, 9%, 42%);
	--spruce-table-color-heading: hsl(260, 70%, 6%);
	--spruce-table-color-hover: hsla(0, 0%, 0%, 0.05);
	--spruce-table-color-stripe: hsla(0, 0%, 0%, 0.025);
	--spruce-table-color-text: hsl(208, 9%, 42%);
}

:root {
	--spruce-breadcrumb-color-separator: hsla(0, 0%, 0%, 0.1);
}

:root {
	--spruce-combobox-color-item-background: hsl(259, 53%, 98%);
	--spruce-combobox-color-item-foreground: hsl(262, 71%, 49%);
}

:root {
	--spruce-container-color-background: hsl(0, 0%, 95%);
}

:root {
	--spruce-context-color-background-hover: hsl(259, 53%, 98%);
}

:root {
	--spruce-cookie-color-background: hsl(207, 95%, 8%);
	--spruce-cookie-color-foreground: hsl(0, 0%, 100%);
}

:root {
	--spruce-feature-color-subtitle-background: hsl(259, 53%, 98%);
	--spruce-feature-color-subtitle-border: hsl(259, 53%, 93%);
}

:root {
	--spruce-footer-color-background: hsl(260, 70%, 6%);
}

:root {
	--spruce-ide-color-header-background: hsl(0, 0%, 100%);
}

:root {
	--spruce-invoice-color-background: hsl(234, 100%, 98%);
}

:root {
	--spruce-hero-color-gradient-end: hsl(0, 0%, 100%);
	--spruce-hero-color-gradient-start: hsl(210, 100%, 98%);
	--spruce-hero-color-note-background: hsl(210, 100%, 97%);
	--spruce-hero-color-note-color: hsl(216, 50%, 44%);
}

:root {
	--spruce-navigation-color-icon-background: hsl(259, 53%, 94%);
	--spruce-navigation-color-icon-background-hover: hsl(262, 71%, 49%);
	--spruce-navigation-color-icon-foreground: hsl(262, 71%, 49%);
	--spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%);
}

:root {
	--spruce-media-color-background: hsl(259, 53%, 98%);
	--spruce-media-color-icon: hsl(262, 71%, 49%);
}

:root {
	--spruce-modal-color-background: hsla(210, 60%, 98%, 0.7);
}

:root {
	--spruce-prism-color-background: hsl(0, 0%, 98%);
	--spruce-prism-color-boolean: hsl(0, 44%, 53%);
	--spruce-prism-color-class-name: hsl(0, 0%, 7%);
	--spruce-prism-color-color: hsl(243, 14%, 29%);
	--spruce-prism-color-comment: hsl(225, 14%, 46%);
	--spruce-prism-color-constant: hsl(221, 57%, 52%);
	--spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56);
	--spruce-prism-color-namespace: hsl(173, 100%, 24%);
	--spruce-prism-color-number: hsl(315, 90%, 35%);
	--spruce-prism-color-punctuation: hsl(279, 50%, 53%);
	--spruce-prism-color-regex: hsl(1, 66%, 47%);
}

:root {
	--spruce-search-color-icon: hsl(259, 53%, 94%);
}

:root {
	--spruce-border-radius: 0.425rem;
	--spruce-font-family-base: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
	--spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
	--spruce-font-family-heading: Avenir, Avenir Next LT Pro, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
	--spruce-font-size-base: 1rem;
	--spruce-font-size-lead: clamp(1.15rem, 2vw, 1.35rem);
	--spruce-font-size-lg: 1.125rem;
	--spruce-font-size-ratio: 1.25;
	--spruce-font-size-sm: 0.875rem;
	--spruce-font-weight-heading: 700;
	--spruce-inline-padding: 0.1em 0.3em;
	--spruce-line-height-base: 1.3;
	--spruce-line-height-heading: calc(2px + 2ex + 2px);
	--spruce-line-height-lg: 1.8;
	--spruce-line-height-md: 1.5;
	--spruce-line-height-sm: 1.2;
	--spruce-border-radius-lg: 0.925rem;
	--spruce-border-radius-sm: 0.425rem;
	--spruce-container-inline-size: 60rem;
	--spruce-page-margin: 2cm;
	--spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"];
}

@media(prefers-reduced-motion: reduce) {
	:root {
		--spruce-duration: 0;
	}
}

@media(prefers-reduced-motion: no-preference) {
	:root {
		--spruce-duration: 0.15s;
		--spruce-timing-function: ease-in-out;
	}
}

::selection {
	background-color: var(--spruce-selection-color-background);
	color: var(--spruce-selection-color-foreground);
	text-shadow: none;
}

html {
	box-sizing: border-box;
}

@media(prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

body {
	background: var(--spruce-base-color-background);

}

a {
	color: var(--spruce-base-color-link);
	text-decoration: underline;
	transition-duration: var(--spruce-duration);
	transition-property: color;
	transition-timing-function: var(--spruce-timing-function);
}

a:hover {
	color: var(--spruce-base-color-link-hover);
}

button {
	color: inherit;
}

a,button {
	touch-action: manipulation;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--spruce-base-color-border);
}

img {
	block-size: auto;
	display: block;
	max-inline-size: 100%;
	user-select: none;
}

html {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {

	font-size: 20px;
	line-height: var(--spruce-line-height-base);
}

p,li,h1,h2 {
	
	overflow-wrap: break-word;
}

h1,h2 {
	color: var(--spruce-base-color-heading);
	
	font-weight: var(--spruce-font-weight-heading);
	line-height: var(--spruce-line-height-heading);
}

ul {
	list-style-position: inside;
}

ul>* {
	margin-block-end: 0;
	margin-block-start: 0;
}

ul>*+* {
	margin-block-start: .25rem;
}

ul li {
	list-style-position: outside;
}

ul li::marker,ol li::marker {
	color: var(--spruce-base-color-marker);
}

.btn {
	--spruce-border-radius: 0.425rem;
	--spruce-border-width: 1px;
	--spruce-font-size: 1rem;
	--spruce-font-weight: 500;
	--spruce-gap: 0.5rem;
	--spruce-icon-padding: 0.75em;
	--spruce-icon-size: 1em;
	--spruce-padding: 0.75em 1em;
	--spruce-shadow-size: 0.25rem;
	align-items: center;
	border-radius: var(--spruce-border-radius);
	border-style: solid;
	border-width: var(--spruce-border-width);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--spruce-font-size);
	font-weight: var(--spruce-font-weight);
	gap: var(--spruce-gap);
	justify-content: center;
	line-height: 1;
	padding: var(--spruce-padding);
	text-align: start;
	text-decoration: none;
	transition-duration: var(--spruce-duration);
	transition-property: background-color,border-color,box-shadow,color;
	transition-timing-function: var(--spruce-timing-function);
}

.btn:focus {
	outline-color: rgba(0,0,0,0);
	outline-style: solid;
}

.btn:disabled {
	opacity: .5;
	pointer-events: none;
}

.btn--icon {
	padding: var(--spruce-icon-padding);
}

.btn__icon {
	block-size: var(--spruce-icon-size);
	flex-shrink: 0;
	inline-size: var(--spruce-icon-size);
	pointer-events: none;
}

.btn--primary {
	background-color: var(--spruce-btn-color-primary-background);
	border-color: var(--spruce-btn-color-primary-background);
	color: var(--spruce-btn-color-primary-foreground);
}

.btn--primary:focus-visible {
	outline: 2px solid var(--spruce-btn-color-primary-background);
	outline-offset: 2px;
}

.btn--primary:hover {
	background-color: var(--spruce-btn-color-primary-background-hover);
	border-color: var(--spruce-btn-color-primary-background-hover);
	color: var(--spruce-btn-color-primary-foreground);
}

.btn--primary-shadow {
	box-shadow: 0 .55em 1em -0.2em var(--spruce-btn-color-primary-shadow),0 .15em .35em -0.185em var(--spruce-btn-color-primary-shadow);
}

.btn--secondary:focus-visible {
	outline: 2px solid var(--spruce-btn-color-secondary-background);
	outline-offset: 2px;
}

.btn--outline-primary:focus-visible {
	outline: 2px solid var(--spruce-btn-color-primary-background);
	outline-offset: 2px;
}

.btn--outline-secondary:focus-visible {
	outline: 2px solid var(--spruce-btn-color-secondary-background);
	outline-offset: 2px;
}

.form-file::file-selector-button {
	--spruce-border-radius: 0.425rem;
	--spruce-border-width: 1px;
	--spruce-font-size: 1rem;
	--spruce-font-weight: 500;
	--spruce-gap: 0.5rem;
	--spruce-icon-padding: 0.75em;
	--spruce-icon-size: 1em;
	--spruce-padding: 0.75em 1em;
	--spruce-shadow-size: 0.25rem;
	align-items: center;
	border-radius: var(--spruce-border-radius);
	border-style: solid;
	border-width: var(--spruce-border-width);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--spruce-font-size);
	font-weight: var(--spruce-font-weight);
	gap: var(--spruce-gap);
	justify-content: center;
	line-height: 1;
	padding: var(--spruce-padding);
	text-align: start;
	text-decoration: none;
	transition-duration: var(--spruce-duration);
	transition-property: background-color,border-color,box-shadow,color;
	transition-timing-function: var(--spruce-timing-function);
}

.form-file--sm::file-selector-button {
	--spruce-font-size: 0.8rem;
	--spruce-gap: 0.25rem;
	--spruce-icon-padding: 0.5em;
	--spruce-icon-size: 0.8rem;
	--spruce-padding: 0.5em 0.75em;
	font-size: var(--spruce-font-size);
	gap: var(--spruce-gap);
	padding: var(--spruce-padding);
}

.form-file--lg::file-selector-button {
	--spruce-font-size: 1.15rem;
	--spruce-gap: 0.5rem;
	--spruce-icon-padding: 0.9em;
	--spruce-padding: 0.9em 1.15em;
}

.form-file--block::file-selector-button {
	inline-size: 100%;
}

.form-file:focus-within::file-selector-button {
	background-color: var(--spruce-btn-color-primary-background-hover);
}

.form-file::file-selector-button {
	margin-inline-end: 1rem;
	background-color: var(--spruce-btn-color-primary-background);
	border-color: var(--spruce-btn-color-primary-background);
	color: var(--spruce-btn-color-primary-foreground);
}

.form-file::file-selector-button:hover {
	background-color: var(--spruce-btn-color-primary-background-hover);
	border-color: var(--spruce-btn-color-primary-background-hover);
	color: var(--spruce-btn-color-primary-foreground);
}

.form-file::file-selector-button-shadow {
	box-shadow: 0 .55em 1em -0.2em var(--spruce-btn-color-primary-shadow),0 .15em .35em -0.185em var(--spruce-btn-color-primary-shadow);
}

.form-check__control:focus-visible {
	outline: 2px solid var(--spruce-form-color-check-focus-ring);
	outline-offset: 2px;
}

.form-switch__control:focus-visible {
	outline: 2px solid var(--spruce-form-color-switch-focus-ring);
	outline-offset: 2px;
}

@container form-group-container (inline-size > 38rem) {
}

@container form-group-container (inline-size > 38rem) {
}

.form-range:focus-visible {
	outline: none;
}

.form-range:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--spruce-form-color-range-thumb-focus-ring);
	outline-offset: 2px;
}

.form-range:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--spruce-form-color-range-thumb-focus-ring);
	outline-offset: 2px;
}

.skip-link {
	inset: -50vh auto auto 1.5rem;
	position: fixed;
}

.skip-link:focus {
	inset-block-start: 1.5rem;
}

.sprucecss-site-navigation {
	font-family: var(--doc-body-font-family);
}

@media(min-width: 80em) {
	.sprucecss-site-navigation__btn {
		display: none;
	}
}

.sprucecss-site-navigation__btn[aria-expanded=true]+ul {
	display: flex;
}

.sprucecss-site-navigation ul {
	background-color: var(--spruce-base-color-background);
	display: none;
	flex-direction: column;
	gap: 0.5rem;
	inset: 100% 0 auto;
	list-style: none;
	margin: 0;
	padding-block: 1.5rem;
	padding-inline: clamp(1.5rem,5vw,3rem);
	position: absolute;
}

@media(min-width: 80em) {
	.sprucecss-site-navigation ul {
		align-items: center;
		background-color: rgba(0,0,0,0);
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		gap: clamp(0.5rem, 1vw, 1rem);
		inset: auto;
		padding: 0;
		position: relative;
	}
}

.sprucecss-site-navigation li {
	margin-block: 0;
}

.sprucecss-site-navigation a {
	align-items: center;
	color: var(--spruce-base-color-heading);
	display: flex;
	gap: .5rem;
	text-decoration: none;
}

.sprucecss-site-navigation a:hover {
	color: var(--spruce-base-color-primary);
}

.sprucecss-accordion-card__title:has(.sprucecss-accordion-card__toggle) {
	padding: 0;
}

.sprucecss-accordion-card__toggle:focus-visible .sprucecss-accordion-card__icon {
	outline: 2px solid var(--spruce-btn-color-primary-background);
	outline-offset: 2px;
}

.sprucecss-accordion-card__toggle[aria-expanded=true] svg {
	rotate: 90deg;
}

.sprucecss-accordion-card__toggle[aria-expanded=true] .horizontal-line {
	opacity: 0;
}

.sprucecss-accordion-card__icon {
	--size: 1.75rem;
	align-items: center;
	background-color: var(--spruce-btn-color-primary-background);
	block-size: var(--size);
	border-radius: var(--spruce-border-radius-sm);
	color: var(--spruce-btn-color-primary-foreground);
	display: flex;
	flex-shrink: 0;
	inline-size: var(--size);
	justify-content: center;
}

.sprucecss-accordion-card__icon svg {
	--size: 1.25rem;
	transition-duration: var(--spruce-duration);
	transition-property: all;
	transition-timing-function: var(--spruce-timing-function);
	block-size: var(--size);
	inline-size: var(--size);
}

.sprucecss-accordion-card__icon .horizontal-line {
	transition-duration: var(--spruce-duration);
	transition-property: all;
	transition-timing-function: var(--spruce-timing-function);
}

.sprucecss-accordion-card__content {
	transition-duration: var(--spruce-duration);
	transition-property: grid-template-rows;
	transition-timing-function: var(--spruce-timing-function);
	display: grid;
	padding-inline: 1.5rem;
}

.sprucecss-accordion-card__content[aria-hidden=true] {
	grid-template-rows: 0fr;
}

.sprucecss-accordion-card__content[aria-hidden=false] {
	grid-template-rows: 1fr;
	padding-block-end: 1.5rem;
}

.sprucecss-accordion-card__content>div {
	overflow: hidden;
}

.sprucecss-accordion-card__content>div>* {
	margin-block-end: 0;
	margin-block-start: 0;
}

.sprucecss-accordion-card__content>div>*+* {
	margin-block-start: .5rem;
}

.sprucecss-accordion-card__content>div *+h2,.sprucecss-accordion-card__content>div *+h3,.sprucecss-accordion-card__content>div *+h4,.sprucecss-accordion-card__content>div *+h5 {
	margin-block-start: 1rem;
}

.blog-card {
	position: relative;
}

.blog-card__link::before {
	content: "";
	inset: 0;
	position: absolute;
}

.blog-card>* {
	margin-block-end: 0;
	margin-block-start: 0;
}

.blog-card>*+* {
	margin-block-start: 1rem;
}

.blog-card__title {
	font-size: clamp(1.328125rem,2vw + 1rem,1.5625rem);
	margin-block-start: .5rem;
}

.blog-card__link {
	color: var(--spruce-base-color-heading);
	text-decoration: none;
}

.blog-card__link:hover,.blog-card__link:focus {
	color: var(--spruce-base-color-heading);
}

.sprucecss-pagination a:focus-visible {
	outline: 2px solid var(--spruce-btn-color-pagination-focus-ring);
	outline-offset: 2px;
}

.spruce-modal-backdrop {
	align-items: start;
	backdrop-filter: blur(0.15rem);
	background-color: var(--spruce-modal-color-background);
	display: none;
	inset: 0;
	justify-content: center;
	overflow-y: auto;
	padding: 1rem;
	position: fixed;
	z-index: 25;
}

.spruce-modal {
	background-color: var(--spruce-base-color-background);
	border: 1px solid var(--spruce-base-color-border);
	border-radius: var(--spruce-border-radius-sm);
	box-shadow: 0 0 .25rem hsla(201.15,72.03%,32.71%,.05);
	inline-size: 40rem;
	margin-block: 7rem;
	margin-inline: auto;
	max-inline-size: 100%;
	outline: 0;
	position: relative;
}{margin-block:0;
}

.sprucecss-site-header {
	position: relative;
	z-index: 10;
}

.sprucecss-site-header__inner {
	--block-size: 5rem;
	align-items: center;
	block-size: var(--block-size);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem,3vw,3rem);
	justify-content: space-between;
}

@media(min-width: 64em) {
	.sprucecss-site-header__inner {
		--block-size: 6rem;
	}
}

.sprucecss-site-header__logo {
	align-items: center;
	display: flex;
}

.sprucecss-site-header__column {
	align-items: center;
	display: flex;
	flex-grow: 1;
	gap: clamp(1rem,5vw,3rem);
}

.sprucecss-site-header__navigation {
	margin-inline-start: auto;
}

@media(min-width: 80em) {
	.sprucecss-site-header__navigation {
		margin-inline-start: 0;
	}
}

.sprucecss-site-header__navigation ul {
	border-block-start: 1px solid var(--spruce-base-color-border);
}

@media(min-width: 80em) {
	.sprucecss-site-header__navigation ul {
		border-block-start: none;
	}
}

.sprucecss-post-content--blog :is(dd,dl,dl,h1,h2,h3,h4,h5,h6,hr,ul,ol,p:not(p:has(img)),blockquote,form,pre,[class*=language-],.notification,.anchor-heading) {
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: 45rem;
}

.container {
	--inline-size: var(--spruce-container-inline-size);
	--gap: clamp(0.5rem, 2vw, 1rem);
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--inline-size);
	padding-inline: var(--gap);
 
}

@supports(inline-size: min(20rem, 100%)) {
}

.l-blog {
	padding-block: 0 clamp(4.5rem,8vw,7rem);
}

.l-blog__inner {
	--column: 1;
	display: grid;
	gap: 3rem;
	grid-template-columns: repeat(var(--column), minmax(0, 2fr));
}

@media(min-width: 48em) {
	.l-blog__inner {
		--column: 2;
	}
}

@media(min-width: 80em) {
	.l-blog__inner {
		--column: 2;
	}
}

@supports(inline-size: min(15rem, 100%)) {
}

.btn--rounded {
	border-radius: var(--doc-border-radius-md);
}

.btn--install:focus-visible {
	outline: 2px solid var(--spruce-btn-color-install-background);
	outline-offset: 2px;
}

.btn--decline:focus-visible {
	outline: 2px solid var(--spruce-btn-color-decline-background);
	outline-offset: 2px;
}

.btn--discrete:focus-visible {
	outline: 2px solid var(--spruce-btn-color-discrete-background);
	outline-offset: 2px;
}

.btn--dark:focus-visible {
	outline: 2px solid var(--spruce-btn-color-dark-background);
	outline-offset: 2px;
}

.btn--outline-dark:focus-visible {
	outline: 2px solid var(--spruce-btn-color-dark-outline-focus-ring);
	outline-offset: 2px;
}

.btn--delete:focus-visible {
	outline: 2px solid var(--spruce-btn-color-delete-focus-ring);
	outline-offset: 2px;
}

.btn--light:focus-visible {
	outline: 2px solid var(--spruce-btn-color-light-focus-ring);
	outline-offset: 2px;
}

:root {
	--spruce-section-gap: clamp(5rem, 8vw, 9rem);
	--spruce-section-gap-half: clamp(3.5rem, 8vw, 6rem);
	--spruce-duration: 0.15s;
}

body {

	--doc-border-radius-sm: 0.5rem;
	--doc-border-radius-md: 0.925rem;
	--doc-border-radius-lg: 2rem;

	overflow-x: hidden;
}


.post-header {
    margin-bottom: 20px;
}

.btn__icon {
    fill-rule: evenodd;
    clip-rule: evenodd;
    stroke-linejoin: round;
    stroke-miterlimit: 2;
}
.site-footer {
    text-align: center;
}

.ym-hidden {
    position: absolute;
    left: -9999px;
}