: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(238, 100%, 50%);
	--spruce-base-color-border: hsla(0, 0%, 0%, 0.05);
	--spruce-base-color-code-background: hsl(224, 94%, 97%);
	--spruce-base-color-code-foreground: hsl(245, 31%, 21%);
	--spruce-base-color-heading: hsl(232, 68%, 11%);
	--spruce-base-color-link: hsl(238, 100%, 50%);
	--spruce-base-color-link-hover: #0007cc;
	--spruce-base-color-mark-background: hsl(50, 100%, 80%);
	--spruce-base-color-mark-foreground: hsl(245, 31%, 21%);
	--spruce-base-color-marker: hsl(238, 100%, 50%);
	--spruce-base-color-primary: hsl(238, 100%, 50%);
	--spruce-base-color-secondary: hsl(186, 100%, 60%);
	--spruce-base-color-strong: hsl(245, 31%, 21%);
	--spruce-base-color-text: hsl(208, 21%, 39%);
  }
  
  :root {
	--spruce-btn-color-primary-background: hsl(238, 100%, 50%);
	--spruce-btn-color-primary-background-hover: #0007cc;
	--spruce-btn-color-primary-foreground: hsl(0, 0%, 100%);
	--spruce-btn-color-primary-shadow: #b3b5ff;
	--spruce-btn-color-secondary-background: hsl(186, 100%, 60%);
	--spruce-btn-color-secondary-background-hover: #00e6ff;
	--spruce-btn-color-secondary-foreground: #002e33;
	--spruce-btn-color-secondary-shadow: #99f5ff;
  }
  
  :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(238, 100%, 50%);
	--spruce-form-color-check-background: hsl(238, 100%, 50%);
	--spruce-form-color-check-focus-ring: hsl(238, 100%, 50%);
	--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: rgba(219, 41, 41, 0.25);
	--spruce-form-color-label: hsl(245, 31%, 21%);
	--spruce-form-color-legend: hsl(245, 31%, 21%);
	--spruce-form-color-placeholder: hsl(208, 7%, 40%);
	--spruce-form-color-range-thumb-background: hsl(238, 100%, 50%);
	--spruce-form-color-range-thumb-focus-ring: hsl(238, 100%, 50%);
	--spruce-form-color-range-track-background: hsl(215, 63%, 93%);
	--spruce-form-color-ring-focus: rgba(0, 9, 255, 0.25);
	--spruce-form-color-select-foreground: hsl(245, 31%, 21%);
	--spruce-form-color-text: hsl(208, 9%, 42%);
	--spruce-form-color-valid: hsl(150, 100%, 33%);
	--spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25);
  }
  
  :root {
	--spruce-selection-color-foreground: hsl(0, 0%, 100%);
	--spruce-selection-color-background: hsl(238, 100%, 50%);
  }
  
  :root {
	--spruce-scrollbar-color-thumb-background: hsla(229, 26%, 48%, 0.15);
	--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25);
	--spruce-scrollbar-color-track-background: hsla(226, 100%, 87%, 0.15);
  }
  
  :root {
	--spruce-table-color-border: hsl(215, 63%, 93%);
	--spruce-table-color-caption: hsl(208, 9%, 42%);
	--spruce-table-color-heading: hsl(245, 31%, 21%);
	--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: hsl(0, 0%, 80%);
  }
  
  :root {
	--spruce-card-color-background: hsl(0, 0%, 100%);
  }
  
  :root {
	--spruce-footer-color-background: hsl(224, 94%, 98%);
  }
  
  :root {
	--spruce-navigation-color-arrow: hsla(0, 0%, 0%, 0.15);
	--spruce-navigation-color-icon-background: hsl(224, 94%, 98%);
	--spruce-navigation-color-icon-background-hover: hsl(238, 100%, 50%);
	--spruce-navigation-color-icon-foreground: hsl(238, 100%, 50%);
	--spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%);
  }
  
  :root {
	--spruce-search-color-icon: hsla(229, 26%, 48%, 0.25);
  }
  
  :root {
	--spruce-prism-color-color: hsl(243, 14%, 29%);
	--spruce-prism-color-background: hsl(224, 94%, 99%);
	--spruce-prism-color-comment: hsl(225, 14%, 46%);
	--spruce-prism-color-punctuation: hsl(279, 50%, 53%);
	--spruce-prism-color-namespace: hsl(173, 100%, 24%);
	--spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56);
	--spruce-prism-color-boolean: hsl(0, 44%, 53%);
	--spruce-prism-color-number: hsl(315, 90%, 35%);
	--spruce-prism-color-constant: hsl(221, 57%, 52%);
	--spruce-prism-color-class-name: hsl(0, 0%, 7%);
	--spruce-prism-color-regex: hsl(1, 48%, 59%);
  }
  
  :root {
	--spruce-border-radius: 0.425rem;
	--spruce-font-family-base: Open Sans, sans-serif;
	--spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
	--spruce-font-family-heading: Manrope, sans-serif;
	--spruce-font-size-base: 1rem;
	--spruce-font-size-lead: clamp(1.1rem, 2vw, 1.25rem);
	--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.8;
	--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: 84rem;
	--spruce-page-margin: 2cm;
	--spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"];
  }
  @media (prefers-reduced-motion: no-preference) {
	:root {
	  --spruce-duration: 0.15s;
	  --spruce-timing-function: ease-in-out;
	}
  }
  
  .sr-only {
	block-size: 1px !important;
	border: 0 !important;
	clip: rect(0, 0, 0, 0) !important;
	inline-size: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap !important;
  }
  
  [tabindex="-1"]:focus {
	outline: none !important;
  }
  
  ::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);
	color: var(--spruce-base-color-text);
  }
  
  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;
  }
  
  iframe {
	block-size: 100%;
	display: block;
	inline-size: 100%;
  }
  
  figure {
	margin-inline: 0;
  }
  figure figcaption {
	margin-block-start: 0.5rem;
	text-align: center;
  }
  
  .table-responsive {
	--inline-size: 40rem;
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
  }
  .table-responsive table {
	min-inline-size: var(--inline-size);
  }
  
  .table {
	--spruce-line-height: 1.5;
	--spruce-padding: 1rem;
	--spruce-responsive-inline-size: 40rem;
	border-collapse: collapse;
	color: var(--spruce-table-color-text);
	inline-size: 100%;
  }
  .table caption {
	color: var(--spruce-table-color-caption);
	margin-block-end: 1rem;
  }
  .table th,
  .table td {
	border-block-end: 1px solid var(--spruce-table-color-border);
	line-height: var(--spruce-line-height);
	padding: var(--spruce-padding);
  }
  .table th {
	color: var(--spruce-table-color-heading);
	text-align: inherit;
	text-align: -webkit-match-parent;
  }
  .table--striped > tbody > tr:nth-child(odd) {
	background-color: var(--spruce-table-color-stripe);
  }
  .table--hover > tbody > tr:hover {
	background: var(--spruce-table-color-hover);
  }
  .table--clear-border th,
  .table--clear-border td {
	border: 0;
  }
  .table--in-line th:first-child,
  .table--in-line td:first-child {
	padding-inline-start: 0;
  }
  .table--in-line th:last-child,
  .table--in-line td:last-child {
	padding-inline-end: 0;
  }
  .table--sm {
	--spruce-padding: 0.5rem;
  }
  .table--sm th,
  .table--sm td {
	padding: var(--spruce-padding);
  }
  .table--rounded th:first-child,
  .table--rounded td:first-child {
	border-end-start-radius: var(--spruce-border-radius-sm);
	border-start-start-radius: var(--spruce-border-radius-sm);
  }
  .table--rounded th:last-child,
  .table--rounded td:last-child {
	border-end-end-radius: var(--spruce-border-radius-sm);
	border-start-end-radius: var(--spruce-border-radius-sm);
  }

  
  .btn {
	--spruce-border-radius: 0.425rem;
	--spruce-border-width: 1px;
	--spruce-font-family: Manrope, sans-serif;
	--spruce-font-size: 1rem;
	--spruce-font-weight: 700;
	--spruce-gap: 0.5rem;
	--spruce-icon-padding: 0.75em;
	--spruce-icon-size: 1em;
	--spruce-padding: 0.75em 1.5em;
	--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-family: var(--spruce-font-family);
	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: transparent;
	outline-style: solid;
  }
  
  .btn:disabled {
	opacity: 0.5;
	pointer-events: none;
  }
  
  .btn--icon {
	padding: var(--spruce-icon-padding);
  }
  .btn--icon.btn--sm {
	padding: var(--spruce-icon-padding);
  }
  .btn--icon.btn--lg {
	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__icon--sm {
	block-size: var(--spruce-icon-size);
	inline-size: var(--spruce-icon-size);
  }
  
  .btn--sm {
	--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);
  }
  
  .btn--lg {
	--spruce-font-size: 1rem;
	--spruce-gap: 0.5rem;
	--spruce-icon-padding: 0.9em;
	--spruce-padding: 1em 1.75em;
  }
  
  .btn--block {
	inline-size: 100%;
  }
  
  .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 0.55em 1em -0.2em var(--spruce-btn-color-primary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-primary-shadow);
  }
  
  .btn--secondary {
	background-color: var(--spruce-btn-color-secondary-background);
	border-color: var(--spruce-btn-color-secondary-background);
	color: var(--spruce-btn-color-secondary-foreground);
  }
  .btn--secondary:focus-visible {
	outline: 2px solid var(--spruce-btn-color-secondary-background);
	outline-offset: 2px;
  }
  .btn--secondary:hover {
	background-color: var(--spruce-btn-color-secondary-background-hover);
	border-color: var(--spruce-btn-color-secondary-background-hover);
	color: var(--spruce-btn-color-secondary-foreground);
  }
  .btn--secondary-shadow {
	box-shadow: 0 0.55em 1em -0.2em var(--spruce-btn-color-secondary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-secondary-shadow);
  }
  
  .btn--outline-primary {
	background-color: transparent;
	border-color: var(--spruce-btn-color-primary-background);
	color: var(--spruce-btn-color-primary-background);
  }
  .btn--outline-primary:focus-visible {
	outline: 2px solid var(--spruce-btn-color-primary-background);
	outline-offset: 2px;
  }
  .btn--outline-primary:hover {
	background-color: var(--spruce-btn-color-primary-background);
	border-color: var(--spruce-btn-color-primary-background);
	color: var(--spruce-btn-color-primary-foreground);
  }
  
  .btn--outline-secondary {
	background-color: transparent;
	border-color: var(--spruce-btn-color-secondary-background);
	color: var(--spruce-btn-color-secondary-background);
  }
  .btn--outline-secondary:focus-visible {
	outline: 2px solid var(--spruce-btn-color-secondary-background);
	outline-offset: 2px;
  }
  .btn--outline-secondary:hover {
	background-color: var(--spruce-btn-color-secondary-background);
	border-color: var(--spruce-btn-color-secondary-background);
	color: var(--spruce-btn-color-secondary-foreground);
  }
  
  .form-group-label {
	--spruce-border-radius: 0.425rem;
	--spruce-border-width: 1px;
	align-items: center;
	background-color: var(--spruce-form-color-group-label-background);
	border: var(--spruce-border-width) solid var(--spruce-form-color-border);
	border-radius: var(--spruce-border-radius);
	color: var(--spruce-form-color-group-label-foreground);
	display: flex;
	padding-inline: 1rem;
  }

  
  .l-card {
	--columns: 1;
	counter-reset: card;
	display: grid;
	gap: 3rem;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  }
  
  @media (min-width: 80em) {
	.l-card {
	  --columns: 2;
	}
  }
  
  .l-post {
	--gtc: minmax(0, 1fr);
	display: grid;
	gap: var(--spruce-container-gap);
	grid-template-columns: var(--gtc);
  }
  @media (min-width: 80em) {
	.l-post {
	  --gtc: minmax(0, 1fr) minmax(0, 15rem);
	}
  }
  @media (min-width: 80em) {
	.l-post__toc {
	  order: 2;
	}
  }
  .l-post__toc .toc {
	inset-block-start: 3rem;
	position: sticky;
  }
  @media (min-width: 80em) {
	.l-post .post-heading {
	  grid-column: 1/3;
	}
  }
  
  .skip-link {
	inset: -50vh auto auto 1.5rem;
	position: fixed;
	z-index: 100;
  }
  .skip-link:focus {
	inset-block-start: 1.5rem;
  }
  
  .breadcrumb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	display: flex;
	max-inline-size: 100%;
	overflow-x: auto;
	white-space: nowrap;
  }
  .breadcrumb-list > li {
	align-items: center;
	display: inline-flex;
	margin-block: 0;
  }
  .breadcrumb-list > li + li::before {
	block-size: 0.4em;
	border-block-end: 2px solid var(--spruce-breadcrumb-color-separator);
	border-inline-end: 2px solid var(--spruce-breadcrumb-color-separator);
	content: "";
	display: inline-flex;
	inline-size: 0.4em;
	margin-inline: 0.75em;
	transform: rotate(-45deg);
  }
  [dir=rtl] .breadcrumb-list > li + li::before {
	transform: rotate(45deg);
  }
  
  .breadcrumb-list a {
	text-decoration: none;
  }
  .breadcrumb-list [aria-current=page] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	max-inline-size: 20ch;
	text-align: start;
  }
  
  .open-search {
	position: relative;
	align-items: center;
	display: flex;
	gap: 0.5rem;
  }
  .open-search__btn::before {
	content: "";
	inset: 0;
	position: absolute;
  }
  
  .open-search__icon {
	--dimension: 1rem;
	block-size: var(--dimension);
	color: var(--spruce-search-color-icon);
	inline-size: var(--dimension);
  }
  
  .no-transition * {
	transition: none !important;
  }
  
  .theme-switcher {
	color: var(--spruce-base-color-text);
	display: inline-flex;
	position: relative;
  }
  .theme-switcher[data-theme-mode=system] .theme-switcher__system-mode {
	display: flex;
  }
  .theme-switcher[data-theme-mode=light] .theme-switcher__light-mode {
	display: flex;
  }
  .theme-switcher[data-theme-mode=dark] .theme-switcher__dark-mode {
	display: flex;
  }
  .theme-switcher button {
	display: none;
  }
  .theme-switcher button > * {
	pointer-events: none;
  }
  
  .post-heading > * {
	margin-block-end: 0;
	margin-block-start: 0;
  }
  .post-heading > * + * {
	margin-block-start: 1rem;
  }
  .post-heading__headline {
	color: var(--spruce-base-color-primary);
	font-family: var(--spruce-font-family-heading);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
  }
  .post-heading__title {
	font-size: clamp(2.45rem, 4.5vw, 3.5rem);
	line-height: var(--spruce-line-height-sm);
	margin-block-start: 0.5rem;
	max-inline-size: 20ch;
  }
  .post-heading__description {
	font-size: var(--spruce-font-size-lead);
	max-inline-size: 60ch;
  }
  .post-heading__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block-start: 1.5rem;
  }
  
  .post-content > * {
	margin-block-end: 0;
	margin-block-start: 0;
  }
  .post-content > * + * {
	margin-block-start: 1.5rem;
  }
  @media (min-width: 64em) {
	.post-content {
	  font-size: 1.0375rem;
	}
  }
  .post-content :is(dd, dl, dl, h1, h2, h3:not(.accordion-card__title), h4, h5, h6, hr, ul, ol, p, blockquote) {
	max-inline-size: 40rem;
  }
  .post-content * + h2,
  .post-content * + h3 {
	margin-top: 3rem;
  }
  .post-content h2 + *,
  .post-content h3 + *,
  .post-content h4 + *,
  .post-content h5 + *,
  .post-content h6 + * {
	margin-top: 1rem;
  }
  .post-content h2[id] {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
  }
  .post-content h2[id]:hover .anchor, .post-content h2[id]:focus-within .anchor {
	opacity: 1;
  }
  .post-content h2[id] .anchor {
	font-weight: 600;
	opacity: 0;
	text-decoration: none;
  }
  .post-content img,
  .post-content iframe {
	border-radius: var(--spruce-border-radius-sm);
  }
  .post-content iframe {
	aspect-ratio: 16/9;
  }
  .post-content a > code {
	color: var(--spruce-base-color-link);
  }
  .post-content strong {
	color: var(--spruce-base-color-heading);
  }
  .post-content picture {
	display: flex;
  }
  
  .toc > * {
	margin-block-end: 0;
	margin-block-start: 0;
  }
  .toc > * + * {
	margin-block-start: 1rem;
  }
  .toc__title {
	font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem);
  }
  .toc__navigation ol {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  .toc__navigation ol > * {
	margin-block-end: 0;
	margin-block-start: 0;
  }
  .toc__navigation ol > * + * {
	margin-block-start: 0.5rem;
  }
  .toc__navigation a {
	color: var(--spruce-base-color-text);
	text-decoration: none;
  }
  .toc__navigation a:hover, .toc__navigation a:focus {
	color: var(--spruce-base-color-primary);
  }
  
  .sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
  }
  @media (min-width: 48em) {
	.sidebar {
	  padding-inline-end: var(--spruce-container-gap);
	}
  }
  .sidebar__footer {
	align-items: center;
	display: flex;
	justify-content: space-between;
  }
  .sidebar__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 1.5rem;
	max-block-size: calc(100vh - var(--dimension) - 1.5rem * 3);
	overflow-y: auto;
  }
  .sidebar__body::-webkit-scrollbar {
	block-size: 0.5rem;
	inline-size: 0.5rem;
  }
  .sidebar__body::-webkit-scrollbar-thumb {
	background: var(--spruce-scrollbar-color-thumb-background);
	border-radius: 0.05rem;
  }
  .sidebar__body::-webkit-scrollbar-thumb:hover {
	background: var(--spruce-scrollbar-color-thumb-background-hover);
  }
  .sidebar__body::-webkit-scrollbar-track {
	background: var(--spruce-scrollbar-color-track-background);
	border-radius: 0.05rem;
  }
  @media (min-width: 48em) {
	.sidebar__body {
	  max-block-size: initial;
	}
  }
  
  @media (min-width: 48em) {
	.sidebar-section--navigation {
	  display: none;
	}
  }
  .sidebar-section__title {
	color: var(--spruce-base-color-heading);
	font-size: var(--spruce-font-size-base);
	margin-block: 0;
  }
  .sidebar-section__navigation {
	border-inline-start: 1px solid var(--spruce-base-color-border);
	font-size: 1rem;
	margin-block-start: 1rem;
	padding-inline-start: 1rem;
  }
  .sidebar-section__navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  .sidebar-section__navigation a {
	align-items: center;
	color: var(--spruce-base-color-text);
	display: inline-flex;
	gap: 0.5rem;
	text-decoration: none;
  }
  .sidebar-section__navigation a[aria-current=page] {
	color: var(--spruce-base-color-heading);
	font-weight: 700;
	position: relative;
  }
  .sidebar-section__navigation a[aria-current=page]::before {
	background-color: var(--spruce-base-color-primary);
	border-end-end-radius: var(--spruce-border-radius-sm);
	border-start-end-radius: var(--spruce-border-radius-sm);
	content: "";
	inline-size: 0.3rem;
	inset-block: 0;
	inset-inline-start: -1rem;
	position: absolute;
  }
  .sidebar-section__navigation a svg {
	--dimension: 0.65em;
	block-size: var(--dimension);
	color: var(--spruce-navigation-color-arrow);
	inline-size: var(--dimension);
  }
  

  
  .accordion-list > * {
	margin-block-end: 0;
	margin-block-start: 0;
  }
  .accordion-list > * + * {
	margin-block-start: 1rem;
  }
  
  .accordion-card {
	/* background-color: var(--spruce-base-color-background); */
	border: 1px solid var(--spruce-base-color-border);
	border-radius: var(--spruce-border-radius-sm);
	max-inline-size: 75ch;
  }
  .accordion-card--js .accordion-card__title {
	padding: 0;
  }
  .accordion-card__title {
	font-family: var(--spruce-font-family-base);
	font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem);
	margin-block: 0;
	padding: 1.5rem;
  }
  .accordion-card__toggle {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	outline: inherit;
	padding: 0;
	align-items: center;
	display: flex;
	gap: 1.5rem;
	inline-size: 100%;
	justify-content: space-between;
	padding: 1.5rem;
	text-align: start;
  }
  .accordion-card__toggle:focus-visible svg {
	outline: 2px solid var(--spruce-base-color-primary);
	outline-offset: 2px;
  }
  .accordion-card__toggle svg {
	--dimension: 1.75rem;
	background-color: var(--spruce-btn-color-primary-background);
	block-size: var(--dimension);
	border-radius: var(--spruce-border-radius-sm);
	color: var(--spruce-btn-color-primary-foreground);
	flex-shrink: 0;
	inline-size: var(--dimension);
  }
  .accordion-card__toggle[aria-expanded=true] .vertical-line {
	display: none;
  }
  .accordion-card__content {
	padding-block-end: 1.5rem;
	padding-inline: 1.5rem;
  }
  .accordion-card__content > * {
	margin-block-end: 0;
	margin-block-start: 0;
  }
  .accordion-card__content > * + * {
	margin-block-start: 0.5rem;
  }
  
  .changelog-item {
	--gtc: minmax(0, 1fr);
	align-items: flex-start;
	display: grid;
	gap: 1.5rem 3rem;
	grid-template-columns: var(--gtc);
  }
  @media (min-width: 64em) {
	.changelog-item {
	  --gtc: minmax(0, 9rem) minmax(0, 1fr);
	}
  }
  .changelog-item__date {
	background-color: var(--spruce-btn-color-primary-background);
	border-radius: var(--spruce-border-radius-sm);
	color: var(--spruce-btn-color-primary-foreground);
	display: inline-flex;
	flex-shrink: 0;
	font-weight: 700;
	justify-self: start;
	padding: 0.25rem 1rem;
  }
  .changelog-item ul p {
	margin-block: 0;
  }
  
  .group > * {
	margin-block-end: 0;
	margin-block-start: 0;
  }
  .group > * + * {
	margin-block-start: 1.5rem;
  }
  
  .post-navigation {
	align-items: center;
	border-block-start: 1px solid var(--spruce-base-color-border);
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
	margin-block-start: 4.5rem;
	padding-block: 1.5rem;
  }
  
  .post-navigation-item {
	align-items: center;
	display: flex;
	gap: 1rem;
	text-decoration: none;
  }
  .post-navigation-item:hover .post-navigation-item__icon {
	background-color: var(--spruce-navigation-color-icon-background-hover);
	color: var(--spruce-navigation-color-icon-foreground-hover);
  }
  .post-navigation-item--next {
	margin-inline-start: auto;
	text-align: end;
  }
  .post-navigation-item__icon {
	transition-duration: var(--spruce-duration);
	transition-property: all;
	transition-timing-function: var(--spruce-timing-function);
	align-items: center;
	background-color: var(--spruce-navigation-color-icon-background);
	block-size: 3rem;
	border-radius: 0.425rem;
	color: var(--spruce-navigation-color-icon-foreground);
	display: flex;
	flex-shrink: 0;
	inline-size: 3rem;
	justify-content: center;
  }
  .post-navigation-item__icon svg {
	--dimension: 1rem;
	block-size: var(--dimension);
	inline-size: var(--dimension);
  }
  [dir=rtl] .post-navigation-item__icon svg {
	transform: rotate(180deg);
  }
  
  .post-navigation-item__caption {
	color: var(--spruce-base-color-text);
	line-height: var(--spruce-line-height-md);
  }
  .post-navigation-item__title {
	color: var(--spruce-base-color-primary);
	display: flex;
	font-weight: 700;
  }
  
  :root {
	--spruce-section-gap: clamp(5rem, 7vw, 7rem);
	--spruce-container-gap: clamp(1.5rem, 5vw, 3rem);
	--spruce-max-content-inline-size: 70rem;
	--spruce-box-shadow: 0 0.75rem 1.25rem hsla(0, 0%, 0%, 0.05);
  }