@janga/norna 0.7.18 → 0.7.22

package/src/styles/global.css

@@ -5,15 +5,47 @@
 }
 
 :root {
-	--color-page: #000;
-	--color-surface: #101010;
-	--color-text: #f7f4ee;
-	--color-muted: #aaa49a;
-	--color-soft: #302f2c;
-	--color-accent: #d8d2c8;
-	--color-border: rgb(255 255 255 / 14%);
-	--color-nav-background: rgb(0 0 0 / 90%);
-	--color-nav-separator: rgb(255 255 255 / 28%);
+	--color-page: var(--palette-light-page-background, #fff);
+	--color-primary-text: var(--palette-light-primary-text, var(--palette-light-page-text, #17201d));
+	--color-secondary-text: var(--palette-light-secondary-text, #5e655f);
+	--color-link-text: var(--palette-light-link-text, #38645a);
+	--color-focus-ring: var(--palette-light-focus-ring, #17201d);
+	--color-focus-ring-contrast: var(--palette-light-focus-ring-contrast, #fff);
+	--color-selection-background: var(--palette-light-selection-background, #17201d);
+	--color-selection-text: var(--palette-light-selection-text, #fff);
+	--color-control-background: var(--palette-light-control-background, rgb(0 0 0 / 70%));
+	--color-control-background-active: var(--palette-light-control-background-active, rgb(0 0 0 / 86%));
+	--color-control-text: var(--palette-light-control-text, #fff);
+	--color-code-background: var(--palette-light-code-background, #0d1117);
+	--color-code-text: var(--palette-light-code-text, #f0f6fc);
+	--color-warning-accent: var(--palette-light-warning-accent, #7a5600);
+	--color-warning-surface: var(--palette-light-warning-surface, #fff4c2);
+	--color-warning-text: var(--palette-light-warning-text, #3b2b00);
+	--color-error-accent: var(--palette-light-error-accent, #a12d2d);
+	--color-error-surface: var(--palette-light-error-surface, #fce8e8);
+	--color-error-text: var(--palette-light-error-text, #5f1616);
+	--color-success-accent: var(--palette-light-success-accent, #17643c);
+	--color-success-surface: var(--palette-light-success-surface, #e4f4e9);
+	--color-success-text: var(--palette-light-success-text, #12472e);
+	--color-text: var(--color-primary-text);
+	--color-surface: var(--palette-light-surface, #f7f8f7);
+	--color-muted: var(--color-secondary-text);
+	--color-soft: var(--palette-light-soft, #d9dfda);
+	--color-accent: var(--color-link-text);
+	--color-border: var(--palette-light-border, rgb(0 0 0 / 14%));
+	--color-nav-background: var(--palette-light-nav-background, rgb(255 255 255 / 92%));
+	--color-nav-separator: var(--palette-light-nav-separator, rgb(0 0 0 / 20%));
+	--color-frame-background: var(--palette-light-frame-background, #fff);
+	--color-frame-text: var(--palette-light-frame-text, #17201d);
+	--color-surface-base-background: var(--palette-light-surface-base-background, #fff);
+	--color-surface-base-text: var(--palette-light-surface-base-text, #17201d);
+	--color-surface-base-secondary-text: var(--palette-light-surface-base-secondary-text, #555b57);
+	--color-surface-soft-background: var(--palette-light-surface-soft-background, #f1f4f2);
+	--color-surface-soft-text: var(--palette-light-surface-soft-text, #17201d);
+	--color-surface-soft-secondary-text: var(--palette-light-surface-soft-secondary-text, #555b57);
+	--color-surface-emphasis-background: var(--palette-light-surface-emphasis-background, #dde7e1);
+	--color-surface-emphasis-text: var(--palette-light-surface-emphasis-text, #17201d);
+	--color-surface-emphasis-secondary-text: var(--palette-light-surface-emphasis-secondary-text, #555b57);
 	--font-sans: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 	--font-serif: Georgia, 'Times New Roman', serif;
 	--page-width: 1180px;
@@ -55,11 +87,118 @@
 	--content-gutter-mobile: 1rem;
 	--content-gutter: var(--content-gutter-desktop);
 	--site-top-anchor-offset: 4.5rem;
-	color-scheme: var(--color-scheme, dark);
+	--focus-indicator-width: 2px;
+	--target-size-minimum: 1.5rem;
+	--target-size-comfortable: 2.75rem;
+	color-scheme: light;
 	scroll-behavior: smooth;
 	scroll-padding-top: var(--site-top-anchor-offset);
 }
 
+:root[data-color-mode='dark'] {
+	--color-page: var(--palette-dark-page-background);
+	--color-primary-text: var(--palette-dark-primary-text);
+	--color-secondary-text: var(--palette-dark-secondary-text);
+	--color-link-text: var(--palette-dark-link-text);
+	--color-focus-ring: var(--palette-dark-focus-ring);
+	--color-focus-ring-contrast: var(--palette-dark-focus-ring-contrast);
+	--color-selection-background: var(--palette-dark-selection-background);
+	--color-selection-text: var(--palette-dark-selection-text);
+	--color-control-background: var(--palette-dark-control-background);
+	--color-control-background-active: var(--palette-dark-control-background-active);
+	--color-control-text: var(--palette-dark-control-text);
+	--color-code-background: var(--palette-dark-code-background);
+	--color-code-text: var(--palette-dark-code-text);
+	--color-warning-accent: var(--palette-dark-warning-accent);
+	--color-warning-surface: var(--palette-dark-warning-surface);
+	--color-warning-text: var(--palette-dark-warning-text);
+	--color-error-accent: var(--palette-dark-error-accent);
+	--color-error-surface: var(--palette-dark-error-surface);
+	--color-error-text: var(--palette-dark-error-text);
+	--color-success-accent: var(--palette-dark-success-accent);
+	--color-success-surface: var(--palette-dark-success-surface);
+	--color-success-text: var(--palette-dark-success-text);
+	--color-text: var(--color-primary-text);
+	--color-surface: var(--palette-dark-surface);
+	--color-muted: var(--color-secondary-text);
+	--color-soft: var(--palette-dark-soft);
+	--color-accent: var(--color-link-text);
+	--color-border: var(--palette-dark-border);
+	--color-nav-background: var(--palette-dark-nav-background);
+	--color-nav-separator: var(--palette-dark-nav-separator);
+	--color-frame-background: var(--palette-dark-frame-background);
+	--color-frame-text: var(--palette-dark-frame-text);
+	--color-surface-base-background: var(--palette-dark-surface-base-background);
+	--color-surface-base-text: var(--palette-dark-surface-base-text);
+	--color-surface-base-secondary-text: var(--palette-dark-surface-base-secondary-text);
+	--color-surface-soft-background: var(--palette-dark-surface-soft-background);
+	--color-surface-soft-text: var(--palette-dark-surface-soft-text);
+	--color-surface-soft-secondary-text: var(--palette-dark-surface-soft-secondary-text);
+	--color-surface-emphasis-background: var(--palette-dark-surface-emphasis-background);
+	--color-surface-emphasis-text: var(--palette-dark-surface-emphasis-text);
+	--color-surface-emphasis-secondary-text: var(--palette-dark-surface-emphasis-secondary-text);
+	color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root[data-color-mode='system'] {
+		--color-page: var(--palette-dark-page-background);
+		--color-primary-text: var(--palette-dark-primary-text);
+		--color-secondary-text: var(--palette-dark-secondary-text);
+		--color-link-text: var(--palette-dark-link-text);
+		--color-focus-ring: var(--palette-dark-focus-ring);
+		--color-focus-ring-contrast: var(--palette-dark-focus-ring-contrast);
+		--color-selection-background: var(--palette-dark-selection-background);
+		--color-selection-text: var(--palette-dark-selection-text);
+		--color-control-background: var(--palette-dark-control-background);
+		--color-control-background-active: var(--palette-dark-control-background-active);
+		--color-control-text: var(--palette-dark-control-text);
+		--color-code-background: var(--palette-dark-code-background);
+		--color-code-text: var(--palette-dark-code-text);
+		--color-warning-accent: var(--palette-dark-warning-accent);
+		--color-warning-surface: var(--palette-dark-warning-surface);
+		--color-warning-text: var(--palette-dark-warning-text);
+		--color-error-accent: var(--palette-dark-error-accent);
+		--color-error-surface: var(--palette-dark-error-surface);
+		--color-error-text: var(--palette-dark-error-text);
+		--color-success-accent: var(--palette-dark-success-accent);
+		--color-success-surface: var(--palette-dark-success-surface);
+		--color-success-text: var(--palette-dark-success-text);
+		--color-text: var(--color-primary-text);
+		--color-surface: var(--palette-dark-surface);
+		--color-muted: var(--color-secondary-text);
+		--color-soft: var(--palette-dark-soft);
+		--color-accent: var(--color-link-text);
+		--color-border: var(--palette-dark-border);
+		--color-nav-background: var(--palette-dark-nav-background);
+		--color-nav-separator: var(--palette-dark-nav-separator);
+		--color-frame-background: var(--palette-dark-frame-background);
+		--color-frame-text: var(--palette-dark-frame-text);
+		--color-surface-base-background: var(--palette-dark-surface-base-background);
+		--color-surface-base-text: var(--palette-dark-surface-base-text);
+		--color-surface-base-secondary-text: var(--palette-dark-surface-base-secondary-text);
+		--color-surface-soft-background: var(--palette-dark-surface-soft-background);
+		--color-surface-soft-text: var(--palette-dark-surface-soft-text);
+		--color-surface-soft-secondary-text: var(--palette-dark-surface-soft-secondary-text);
+		--color-surface-emphasis-background: var(--palette-dark-surface-emphasis-background);
+		--color-surface-emphasis-text: var(--palette-dark-surface-emphasis-text);
+		--color-surface-emphasis-secondary-text: var(--palette-dark-surface-emphasis-secondary-text);
+		color-scheme: dark;
+	}
+}
+
+:root[data-reading-width='narrow'] {
+	--reader-text-width: min(60ch, var(--text-width));
+}
+
+:root[data-reading-width='standard'] {
+	--reader-text-width: min(72ch, var(--text-width));
+}
+
+:root[data-reading-width='wide'] {
+	--reader-text-width: min(80ch, var(--image-layout-width));
+}
+
 html {
 	min-height: 100%;
 	background: var(--color-page);
@@ -69,6 +208,15 @@ html {
 	html {
 		scroll-behavior: auto !important;
 	}
+
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		scroll-behavior: auto !important;
+		transition-duration: 0.01ms !important;
+	}
 }
 
 body {
@@ -91,12 +239,19 @@ img {
 
 a {
 	color: var(--color-accent);
+	overflow-wrap: anywhere;
 	transition: color 0.18s ease, opacity 0.18s ease;
 }
 
 ::selection {
-	background: var(--color-text);
-	color: var(--color-page);
+	background: var(--color-selection-background);
+	color: var(--color-selection-text);
+}
+
+:where(a, button, summary, [tabindex]:not([tabindex='-1'])):focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: var(--focus-indicator-width);
+	box-shadow: 0 0 0 calc(var(--focus-indicator-width) + var(--focus-indicator-width)) var(--color-focus-ring-contrast);
 }
 
 .visually-hidden {
@@ -152,6 +307,230 @@ a {
 	padding: 0.8rem 0 0.7rem;
 }
 
+.site-top[data-navigation-mode='tree'] .site-nav-row {
+	width: min(calc(100% - (var(--content-gutter) * 2)), max(var(--page-width), 76rem));
+}
+
+.site-nav-row-mobile-only {
+	display: none;
+}
+
+.site-nav-actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: clamp(0.65rem, 1.5vw, 1rem);
+	min-width: 0;
+	margin-left: auto;
+}
+
+.site-nav-leading {
+	display: flex;
+	align-items: center;
+	gap: 0.35rem;
+	min-width: 0;
+	flex: 0 0 auto;
+}
+
+:root:not([data-reader-preferences-ready='true']) .display-settings {
+	display: none;
+}
+
+.display-settings {
+	position: relative;
+	display: block;
+	flex: 0 0 auto;
+	font-family: var(--font-sans);
+}
+
+.display-settings summary {
+	display: grid;
+	place-items: center;
+	width: 2.25rem;
+	height: 2.25rem;
+	border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
+	border-radius: 50%;
+	background-color: transparent;
+	color: currentColor;
+	cursor: pointer;
+	list-style: none;
+	transition: border-color 0.18s ease, background-color 0.18s ease;
+}
+
+:root[data-focus-reading='on'] .display-settings summary {
+	grid-template-columns: auto auto;
+	gap: 0.4rem;
+	width: auto;
+	padding: 0 0.65rem;
+	border-color: currentColor;
+	background: color-mix(in srgb, currentColor 9%, transparent);
+}
+
+.display-settings summary::-webkit-details-marker {
+	display: none;
+}
+
+.display-settings summary:hover,
+.display-settings[open] summary {
+	border-color: currentColor;
+	background: color-mix(in srgb, currentColor 9%, transparent);
+}
+
+.display-settings summary:focus-visible,
+.display-settings button:focus-visible,
+.display-settings input:focus-visible + span {
+	outline-color: var(--color-focus-ring);
+}
+
+.display-settings-trigger-icon {
+	display: block;
+	width: 1.05rem;
+	height: 1.05rem;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+.display-settings-focus-status {
+	display: none;
+	font-size: 0.72rem;
+	font-weight: 650;
+	white-space: nowrap;
+}
+
+:root[data-focus-reading='on'] .display-settings-focus-status {
+	display: block;
+}
+
+.display-settings-panel {
+	position: absolute;
+	top: calc(100% + 0.45rem);
+	right: 0;
+	z-index: 30;
+	display: grid;
+	gap: 0.9rem;
+	width: min(20rem, calc(100vw - (var(--content-gutter) * 2)));
+	max-height: calc(100svh - var(--site-top-anchor-offset) - 1rem);
+	margin: 0;
+	padding: 0.85rem;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-medium, 4px);
+	background: var(--color-surface-base-background);
+	color: var(--color-surface-base-text);
+	font-size: 0.82rem;
+	box-shadow: 0 0.6rem 1.6rem rgb(0 0 0 / 16%);
+	overflow-y: auto;
+}
+
+.display-settings-title {
+	margin: 0;
+	font-size: 0.78rem;
+	font-weight: 700;
+	text-transform: uppercase;
+}
+
+.display-settings fieldset {
+	display: grid;
+	gap: 0.4rem;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.display-settings legend {
+	margin: 0 0 0.4rem;
+	padding: 0;
+	color: var(--color-surface-base-secondary-text);
+	font-size: 0.72rem;
+	font-weight: 650;
+}
+
+.display-settings-segmented {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 1px;
+	width: 100%;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-small, 2px);
+	background: var(--color-border);
+	overflow: hidden;
+}
+
+.display-settings-segmented label {
+	position: relative;
+	min-width: 0;
+	cursor: pointer;
+}
+
+.display-settings-segmented input {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	opacity: 0;
+}
+
+.display-settings-segmented span {
+	display: grid;
+	place-items: center;
+	min-height: var(--target-size-comfortable);
+	padding: 0.35rem 0.45rem;
+	background: var(--color-surface-base-background);
+	color: inherit;
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-align: center;
+	transition: background-color 0.18s ease, color 0.18s ease;
+}
+
+.display-settings-segmented label:hover span {
+	background: color-mix(in srgb, currentColor 8%, var(--color-surface-base-background));
+}
+
+.display-settings-segmented input:checked + span {
+	background: color-mix(in srgb, var(--color-accent) 14%, transparent);
+	color: var(--color-surface-base-text);
+}
+
+.display-settings-segmented input:focus-visible + span {
+	position: relative;
+	z-index: 1;
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: calc(0px - var(--focus-indicator-width));
+	box-shadow: inset 0 0 0 var(--focus-indicator-width) var(--color-focus-ring-contrast);
+}
+
+.display-settings-toggle {
+	display: flex;
+	align-items: center;
+	gap: 0.55rem;
+	min-height: var(--target-size-minimum);
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.display-settings-toggle input {
+	width: 1rem;
+	height: 1rem;
+	margin: 0;
+	accent-color: var(--color-accent);
+}
+
+.display-settings-reset {
+	justify-self: start;
+	min-height: var(--target-size-minimum);
+	border: 0;
+	padding: 0;
+	background: transparent;
+	color: var(--color-accent);
+	font: inherit;
+	font-weight: 650;
+	text-decoration: underline;
+	text-underline-offset: 0.2em;
+	cursor: pointer;
+}
+
 .site-brand,
 .site-nav a,
 .mobile-nav-menu summary,
@@ -200,11 +579,12 @@ a {
 .site-nav a,
 .mobile-nav-panel a {
 	display: block;
+	min-height: var(--target-size-minimum);
+	color: var(--color-secondary-text);
 	font-size: 0.78rem;
 	font-weight: 500;
 	letter-spacing: 0.08em;
 	line-height: 1.2;
-	opacity: 0.72;
 	text-transform: uppercase;
 }
 
@@ -214,7 +594,7 @@ a {
 .mobile-nav-panel a:hover,
 .mobile-nav-panel a:focus-visible,
 .mobile-nav-panel a[aria-current='page'] {
-	opacity: 1;
+	color: var(--site-top-text-color, var(--color-primary-text));
 }
 
 .site-nav > ul > .site-nav-item > a:hover,
@@ -232,6 +612,7 @@ a {
 	left: 50%;
 	z-index: 10;
 	width: max-content;
+	max-width: min(24rem, calc(100vw - (var(--content-gutter) * 2)));
 	min-width: 12rem;
 	padding-top: 0.7rem;
 	opacity: 0;
@@ -271,15 +652,14 @@ a {
 	font-size: 0.76rem;
 	letter-spacing: 0.03em;
 	line-height: 1.3;
-	opacity: 0.78;
 	text-transform: none;
-	white-space: nowrap;
+	white-space: normal;
 }
 
 .site-nav-submenu a:hover,
 .site-nav-submenu a:focus-visible,
 .site-nav-submenu a[aria-current='location'] {
-	opacity: 1;
+	color: var(--site-top-text-color, var(--color-primary-text));
 	text-decoration: underline;
 	text-underline-offset: 0.25em;
 }
@@ -307,6 +687,10 @@ a {
 	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
 }
 
+.site-top:not(.site-top-has-navigation-row) .page-nav {
+	border-top: 0;
+}
+
 .page-nav-inner {
 	display: flex;
 	align-items: center;
@@ -321,7 +705,7 @@ a {
 	font-size: 0.7rem;
 	font-weight: 650;
 	letter-spacing: 0.08em;
-	opacity: 0.55;
+	color: var(--color-secondary-text);
 	text-transform: uppercase;
 	white-space: nowrap;
 }
@@ -352,13 +736,13 @@ a {
 
 .page-nav a {
 	display: block;
+	min-height: var(--target-size-minimum);
 	padding: 1.05rem 0 0.95rem;
-	color: currentColor;
+	color: var(--color-secondary-text);
 	font-size: 0.76rem;
 	font-weight: 500;
 	letter-spacing: 0.08em;
 	line-height: 1.2;
-	opacity: 0.72;
 	text-decoration: none;
 	text-transform: uppercase;
 }
@@ -366,16 +750,21 @@ a {
 .page-nav a:hover,
 .page-nav a:focus-visible,
 .page-nav a[aria-current='location'] {
-	opacity: 1;
+	color: var(--site-top-text-color, var(--color-primary-text));
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.35em;
 }
 
 .page-nav .page-nav-page-top {
+	font-size: 0.82rem;
 	font-weight: 700;
 }
 
+.page-nav-page-top-item:not(:last-child) {
+	margin-right: clamp(0.3rem, 1vw, 0.7rem);
+}
+
 .mobile-nav-sections a[aria-current='location'] {
 	opacity: 1;
 	text-decoration: underline;
@@ -402,12 +791,16 @@ a {
 }
 
 .site-page-layout-tree {
+	--tree-layout-width: max(var(--page-width), 76rem);
+	--tree-layout-outer-margin: max(var(--content-gutter), calc((100vw - var(--tree-layout-width)) / 2));
+	--tree-navigation-width: 14rem;
+	--tree-layout-gap: var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem));
 	display: grid;
-	grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
+	grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
 	align-items: start;
-	gap: var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem));
+	gap: var(--tree-layout-gap);
 	min-height: calc(100svh - var(--site-top-anchor-offset));
-	width: min(calc(100% - (var(--content-gutter) * 2)), max(var(--page-width), 76rem));
+	width: min(calc(100% - (var(--content-gutter) * 2)), var(--tree-layout-width));
 	margin: 0 auto;
 }
 
@@ -416,10 +809,40 @@ a {
 	min-width: 0;
 }
 
+.site-page-layout-tree .site-section {
+	background-color: transparent;
+}
+
+@media (min-width: 701px) {
+	.site-page-layout-tree :is(.site-breadcrumbs, .section-header, .section-markdown) {
+		margin-right: auto;
+		margin-left: 0;
+	}
+
+	.site-page-layout-tree .card-list {
+		margin-right: auto;
+		margin-left: 0;
+	}
+
+	.site-page-layout-tree .image-stack .managed-image-item {
+		width: min(100%, var(--image-layout-width));
+		margin-right: auto;
+		margin-left: 0;
+	}
+
+	.site-page-layout-tree .image-carousel-stage,
+	.site-page-layout-tree .image-carousel-captions {
+		margin-right: auto;
+		margin-left: 0;
+	}
+
+}
+
 .tree-local-navigation {
 	position: sticky;
 	top: calc(var(--site-top-anchor-offset) + 1.25rem);
 	z-index: 3;
+	min-height: 0;
 	max-height: calc(100svh - var(--site-top-anchor-offset) - 2.5rem);
 	padding: 1.5rem 0;
 	background: var(--color-page);
@@ -447,23 +870,22 @@ a {
 .navigation-page-tree-sidebar .navigation-page-link {
 	display: block;
 	padding: 0.45rem 2rem 0.45rem 0;
-	color: inherit;
+	color: var(--color-secondary-text);
 	font-size: 0.86rem;
 	line-height: 1.35;
-	opacity: 0.72;
 	text-decoration: none;
 }
 
 .navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-link {
+	color: var(--color-primary-text);
 	font-size: 0.94rem;
 	font-weight: 700;
-	opacity: 1;
 }
 
 .navigation-page-tree-sidebar .navigation-page-link:hover,
 .navigation-page-tree-sidebar .navigation-page-link:focus-visible,
 .navigation-page-tree-sidebar .navigation-page-link[aria-current='page'] {
-	opacity: 1;
+	color: var(--color-primary-text);
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.28em;
@@ -484,10 +906,10 @@ a {
 	width: 1.8rem;
 	height: 1.8rem;
 	border: 0;
-	border-radius: var(--shape-radius-small, 2px);
+	border-radius: var(--corner-radius-small, 2px);
 	list-style: none;
 	cursor: pointer;
-	opacity: 0.66;
+	color: var(--color-secondary-text);
 }
 
 .navigation-page-branch:not(.navigation-page-disclosure) > summary::-webkit-details-marker {
@@ -497,7 +919,7 @@ a {
 .navigation-page-branch:not(.navigation-page-disclosure) > summary:hover,
 .navigation-page-branch:not(.navigation-page-disclosure) > summary:focus-visible {
 	background: color-mix(in srgb, currentColor 8%, transparent);
-	opacity: 1;
+	color: var(--color-primary-text);
 }
 
 .navigation-page-branch:not(.navigation-page-disclosure) > summary > [aria-hidden='true']::before {
@@ -514,13 +936,13 @@ a {
 	justify-content: space-between;
 	width: 100%;
 	border: 0;
-	border-radius: var(--shape-radius-small, 2px);
+	border-radius: var(--corner-radius-small, 2px);
 	padding: 0.45rem 0;
 	font-size: 0.86rem;
 	line-height: 1.35;
 	list-style: none;
 	cursor: pointer;
-	opacity: 0.72;
+	color: var(--color-secondary-text);
 }
 
 .navigation-page-disclosure {
@@ -534,7 +956,7 @@ a {
 .navigation-page-disclosure > .navigation-page-summary:hover,
 .navigation-page-disclosure > .navigation-page-summary:focus-visible,
 .navigation-page-disclosure[data-current-page='true'] > .navigation-page-summary {
-	opacity: 1;
+	color: var(--color-primary-text);
 }
 
 .navigation-page-disclosure > .navigation-page-summary:hover > :first-child,
@@ -545,25 +967,29 @@ a {
 	text-underline-offset: 0.28em;
 }
 
-.navigation-page-disclosure[open] > .navigation-page-summary > .navigation-page-summary-title {
+.navigation-page-disclosure:not(.navigation-category-disclosure)[open]
+	> .navigation-page-summary > .navigation-page-summary-title {
 	opacity: 0;
 }
 
+.navigation-category-disclosure[data-current-branch='true'] > .navigation-page-summary {
+	color: var(--color-primary-text);
+}
+
 .navigation-page-open-link {
 	position: absolute;
 	top: 0;
 	left: 0;
 	display: none;
-	max-width: calc(100% - 2rem);
+	width: calc(100% - 2rem);
 	padding: 0.45rem 0;
-	color: inherit;
+	color: var(--color-secondary-text);
 	font-size: 0.86rem;
 	line-height: 1.35;
-	opacity: 0.72;
-	overflow: hidden;
+	overflow: visible;
+	overflow-wrap: anywhere;
 	text-decoration: none;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	white-space: normal;
 }
 
 .navigation-page-disclosure[open] > .navigation-page-open-link {
@@ -573,7 +999,7 @@ a {
 .navigation-page-open-link:hover,
 .navigation-page-open-link:focus-visible,
 .navigation-page-open-link[aria-current='page'] {
-	opacity: 1;
+	color: var(--color-primary-text);
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.28em;
@@ -592,15 +1018,15 @@ a {
 }
 
 .navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-disclosure > .navigation-page-summary {
+	color: var(--color-primary-text);
 	font-size: 0.94rem;
 	font-weight: 700;
-	opacity: 1;
 }
 
 .navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-disclosure > .navigation-page-open-link {
+	color: var(--color-primary-text);
 	font-size: 0.94rem;
 	font-weight: 700;
-	opacity: 1;
 }
 
 .navigation-page-tree-sidebar .navigation-page-disclosure > .navigation-page-branch-content {
@@ -632,41 +1058,51 @@ a {
 }
 
 .page-contents-links a {
+	position: relative;
 	display: block;
-	color: inherit;
+	color: var(--color-secondary-text);
 	font-size: 0.8rem;
 	line-height: 1.4;
-	opacity: 0.64;
 	text-decoration: none;
 }
 
 .page-contents-links a:hover,
 .page-contents-links a:focus-visible,
 .page-contents-links a[aria-current='location'] {
-	opacity: 1;
+	color: var(--color-primary-text);
 	text-decoration: underline;
 	text-underline-offset: 0.25em;
 }
 
+.page-contents-links a[aria-current='location']::before {
+	position: absolute;
+	top: 0.15em;
+	bottom: 0.15em;
+	left: -0.85rem;
+	width: 2px;
+	border-radius: 1px;
+	background: currentColor;
+	content: '';
+}
+
 .site-breadcrumbs {
-	height: calc(clamp(1rem, 2.5vw, 1.5rem) + 1.35rem);
-	width: min(100%, var(--page-text-width, var(--text-width)));
+	min-height: calc(clamp(1rem, 2.5vw, 1.5rem) + 1.35rem);
+	width: min(100%, var(--reader-text-width, var(--page-text-width, var(--text-width))));
 	margin: 0 auto;
 	padding-top: clamp(1rem, 2.5vw, 1.5rem);
 	font-size: 1rem;
 	line-height: 1.4;
-	overflow: hidden;
+	overflow: visible;
 }
 
 .site-breadcrumbs ol {
 	display: flex;
-	flex-wrap: nowrap;
+	flex-wrap: wrap;
 	gap: 0;
 	margin: 0;
 	padding: 0;
 	font-size: 0.78rem;
 	list-style: none;
-	white-space: nowrap;
 }
 
 .site-breadcrumbs li {
@@ -688,16 +1124,15 @@ a {
 .site-breadcrumbs a {
 	display: block;
 	min-width: 0;
-	color: inherit;
-	opacity: 0.72;
-	overflow: hidden;
+	color: var(--color-secondary-text);
+	overflow: visible;
+	overflow-wrap: anywhere;
 	text-decoration: none;
-	text-overflow: ellipsis;
 }
 
 .site-breadcrumbs a:hover,
 .site-breadcrumbs a:focus-visible {
-	opacity: 1;
+	color: var(--color-primary-text);
 	text-decoration: underline;
 	text-underline-offset: 0.25em;
 }
@@ -705,9 +1140,9 @@ a {
 .site-breadcrumbs [aria-current='page'] {
 	display: block;
 	min-width: 0;
-	overflow: hidden;
+	overflow: visible;
+	overflow-wrap: anywhere;
 	font-weight: 650;
-	text-overflow: ellipsis;
 }
 
 .site-content-has-breadcrumbs > .site-section:first-of-type {
@@ -726,15 +1161,15 @@ a {
 
 .site-banner {
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	width: 100%;
 	min-width: 0;
 	gap: 1rem;
-	border: 1px solid color-mix(in srgb, #ffd84d 42%, var(--color-border));
-	border-inline-start: 0.35rem solid #ffd84d;
+	border: 1px solid var(--color-warning-accent);
+	border-inline-start: 0.35rem solid var(--color-warning-accent);
 	padding: 0.8rem 0.9rem;
-	background: color-mix(in srgb, #ffd84d 12%, var(--color-surface));
-	color: var(--color-text);
+	background: var(--color-warning-surface);
+	color: var(--color-warning-text);
 }
 
 .site-banner[hidden] {
@@ -744,6 +1179,7 @@ a {
 .site-banner-copy {
 	display: flex;
 	align-items: baseline;
+	flex-wrap: wrap;
 	gap: 0.65rem;
 	min-width: 0;
 	flex: 1 1 auto;
@@ -762,11 +1198,8 @@ a {
 
 .site-banner-text {
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 	margin-top: 0.2rem;
-	color: color-mix(in srgb, currentColor 86%, transparent);
+	overflow-wrap: anywhere;
 }
 
 .site-banner-dismiss {
@@ -836,6 +1269,7 @@ a {
 
 .site-page-layout-tree .site-section::before {
 	left: 0;
+	right: calc(0px - var(--tree-layout-outer-margin));
 }
 
 .site-section + .site-section {
@@ -865,7 +1299,7 @@ a {
 }
 
 .section-header {
-	width: min(100%, var(--section-heading-width-desktop, 760px));
+	width: min(100%, var(--reader-text-width, var(--section-heading-width-desktop, 760px)));
 	margin: 0 auto;
 	padding: 0;
 	text-align: var(--section-heading-align-desktop, center);
@@ -898,6 +1332,7 @@ ul {
 
 .section-body {
 	display: flow-root;
+	container-type: inline-size;
 	width: 100%;
 	margin: 0 auto;
 	color: inherit;
@@ -905,38 +1340,15 @@ ul {
 	font-size: clamp(0.96rem, 0.94rem + 0.08vw, 1rem);
 }
 
-.section-reading-layout {
-	display: grid;
-	--section-reading-body-width: var(--section-body-width-desktop, var(--text-width));
-	--section-reading-inline-start: max(0px, calc((100% - var(--section-reading-body-width)) / 2));
-	grid-template-columns: minmax(0, var(--section-reading-body-width)) minmax(0, 13rem);
-	column-gap: 1.5rem;
-	row-gap: var(--section-body-paragraph-spacing, 1em);
-	width: min(
-		calc(100% - var(--section-reading-inline-start)),
-		calc(var(--section-reading-body-width) + 13rem + 1.5rem)
-	);
-	margin: 0 0 0 var(--section-reading-inline-start);
-	align-items: start;
-}
-
-.section-reading-layout .section-markdown {
-	grid-column: 1;
-	width: 100%;
-	margin: 0;
-}
-
 .section-note {
-	grid-column: 2;
 	display: grid;
 	grid-template-columns: auto minmax(0, 1fr);
 	column-gap: 0.25rem;
-	align-self: start;
-	margin: 0;
-	margin-top: var(--section-note-offset, 0px);
+	width: 100%;
+	margin: var(--section-body-paragraph-spacing, 0.85em) 0 0;
 	border-inline-start: 2px solid color-mix(in srgb, currentColor 35%, transparent);
 	padding: 0 0 0 0.35rem;
-	color: color-mix(in srgb, currentColor 76%, transparent);
+	color: var(--section-secondary-text-color, var(--color-secondary-text));
 	font-size: 0.88em;
 	line-height: 1.45;
 	scroll-margin-top: calc(var(--site-top-anchor-offset) + 1rem);
@@ -968,35 +1380,93 @@ ul {
 	text-underline-offset: 0.15em;
 }
 
-.section-note.is-referenced,
 .section-note:target {
 	border-inline-start-color: currentColor;
 	background: color-mix(in srgb, currentColor 6%, transparent);
 }
 
-.section-note-ref a.is-referenced,
+.section-note-ref:has(+ .section-note:hover) a,
 .section-note-ref a:hover,
 .section-note-ref a:focus-visible {
 	text-decoration-thickness: 0.16em;
 }
 
-.section-note-content > :first-child {
-	margin-top: 0;
+.section-note-content {
+	min-width: 0;
 }
 
-.section-note-content > :last-child {
-	margin-bottom: 0;
+@media (min-width: 1101px) {
+	@container (min-width: 55rem) {
+		.section-note {
+			float: right;
+			clear: right;
+			width: var(--section-note-width, 12rem);
+			margin: 0 calc(0px - var(--section-note-width, 12rem) - var(--section-note-gap, 1.25rem)) 0.75rem var(--section-note-gap, 1.25rem);
+		}
+	}
 }
 
 .section-markdown {
-	width: min(100%, var(--section-body-width-desktop, var(--text-width)));
-	max-width: 72ch;
+	width: min(100%, var(--reader-text-width, var(--section-body-width-desktop, var(--text-width))));
+	max-width: none;
 	margin: 0 auto;
 	font-size: var(--section-body-font-size-desktop, clamp(0.96rem, 0.94rem + 0.08vw, 1rem));
 	line-height: var(--section-body-line-height, 1.6);
 	text-align: var(--section-body-align-desktop, left);
 }
 
+:root[data-focus-reading='on'] :is(
+	.site-nav-leading,
+	.site-nav,
+	.mobile-nav-menu,
+	.page-nav,
+	.tree-local-navigation,
+	.site-breadcrumbs,
+	.site-footer
+) {
+	display: none !important;
+}
+
+:root[data-focus-reading='on'] .site-nav-row {
+	justify-content: flex-end;
+}
+
+@media (min-width: 701px) {
+	:root[data-focus-reading='on'] .site-page-layout-tree {
+		display: grid;
+		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
+		gap: var(--tree-layout-gap);
+		width: min(calc(100% - (var(--content-gutter) * 2)), var(--tree-layout-width));
+	}
+
+	:root[data-focus-reading='on'] .site-page-layout-tree > .site-content {
+		grid-column: 2;
+		width: 100%;
+	}
+
+	:root[data-focus-reading='on'] .site-page-layout-tree
+		:is(.site-breadcrumbs, .section-header) {
+		margin-right: auto;
+		margin-left: 0;
+		max-width: none;
+	}
+
+	:root[data-focus-reading='on'] .site-page-layout-tree .section-body {
+		width: 100%;
+		margin-right: auto;
+		margin-left: auto;
+	}
+
+	:root[data-focus-reading='on'] .site-page-layout-tree .site-section::before {
+		left: 0;
+		right: calc(0px - var(--tree-layout-outer-margin));
+	}
+}
+
+:root[data-focus-reading='on'] .site-content-has-breadcrumbs > .site-section:first-of-type {
+	padding-top: var(--space-nav-to-first-section);
+}
+
 .section-markdown p {
 	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
 }
@@ -1014,9 +1484,10 @@ ul {
 .section-markdown pre.astro-code {
 	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
 	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-	border-radius: var(--shape-radius-medium, 6px);
+	border-radius: var(--corner-radius-medium, 6px);
 	padding: 0.78rem 0.9rem;
-	background: #0d1117 !important;
+	background: var(--color-code-background) !important;
+	color: var(--color-code-text);
 	font-size: 0.92em;
 	line-height: 1.45;
 	text-align: left;
@@ -1026,6 +1497,11 @@ ul {
 	font: inherit;
 }
 
+.section-markdown :not(pre) > code {
+	overflow-wrap: anywhere;
+	word-break: break-word;
+}
+
 .section-markdown > :last-child,
 .image-meta :last-child {
 	margin-bottom: 0;
@@ -1099,12 +1575,15 @@ ul {
 	--card-list-text-scale: 1;
 }
 
-.section-body > .section-reading-layout:not(:last-child),
 .section-body > .section-markdown:not(:last-child),
 .section-body > :is(.image-stack, .managed-images):not(:last-child) {
 	margin-bottom: var(--space-content-block-gap);
 }
 
+.section-body > :is(.image-stack, .managed-images, .card-list) {
+	clear: both;
+}
+
 .section-body > .card-list:not(:last-child) {
 	margin-bottom: calc(var(--space-content-block-gap) + var(--space-card-list-after));
 }
@@ -1113,31 +1592,8 @@ ul {
 	margin-bottom: var(--space-card-list-after);
 }
 
-@media (max-width: 1100px) {
-	.section-reading-layout {
-		display: block;
-		width: 100%;
-		margin: 0;
-	}
-
-	.section-reading-layout .section-markdown,
-	.section-reading-layout .section-note {
-		width: min(100%, var(--section-reading-body-width, var(--section-body-width-desktop, var(--text-width))));
-		margin-right: auto;
-		margin-left: auto;
-	}
-
-	.section-reading-layout .section-note {
-		margin-top: var(--section-body-paragraph-spacing, 0.85em);
-	}
-
-	.section-reading-layout .section-markdown + .section-markdown {
-		margin-top: var(--section-body-paragraph-spacing, 1em);
-	}
-}
-
 .card-list-width-text {
-	--card-list-width: var(--text-width);
+	--card-list-width: var(--reader-text-width, var(--text-width));
 }
 
 .card-list-width-narrow {
@@ -1191,9 +1647,9 @@ ul {
 	align-content: start;
 	margin: 0;
 	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-	border-radius: var(--shape-radius-large, 8px);
+	border-radius: var(--corner-radius-large, 8px);
 	padding: var(--card-list-padding);
-	background: color-mix(in srgb, var(--section-background-color, var(--color-page)) 92%, currentColor 8%);
+	background: var(--color-surface);
 	color: inherit;
 }
 
@@ -1333,11 +1789,15 @@ ul {
 
 .image-carousel {
 	position: relative;
+	--image-carousel-width-from-height: var(--image-carousel-width-from-height-desktop, var(--image-layout-width));
+	--image-carousel-control-background: var(--color-control-background);
+	--image-carousel-control-background-active: var(--color-control-background-active);
+	--image-carousel-control-color: var(--color-control-text);
 	outline: none;
 }
 
 .image-carousel:focus-visible {
-	outline: 2px solid currentColor;
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
 	outline-offset: 0.5rem;
 }
 
@@ -1350,7 +1810,11 @@ ul {
 .image-carousel-stage {
 	position: relative;
 	display: grid;
-	width: min(100%, var(--image-layout-width));
+	width: min(
+		100%,
+		var(--image-layout-width),
+		var(--image-carousel-width-from-height, var(--image-layout-width))
+	);
 	max-height: var(--image-max-height);
 	margin: 0 auto;
 	aspect-ratio: var(--image-carousel-aspect-ratio, auto);
@@ -1364,6 +1828,7 @@ ul {
 	display: grid;
 	width: 100%;
 	height: 100%;
+	min-height: 0;
 	place-items: center;
 }
 
@@ -1380,21 +1845,18 @@ ul {
 .image-carousel[data-carousel-ready='true'] .image-carousel-slide {
 	display: grid;
 	height: 100%;
+	min-height: 0;
 	align-content: start;
 }
 
-.image-carousel-frame .managed-image.managed-image-landscape {
+.image-carousel-frame .managed-image {
 	width: 100%;
-	height: auto;
-	max-width: 100%;
-	max-height: 100%;
-}
-
-.image-carousel-frame .managed-image:not(.managed-image-landscape) {
-	width: auto;
 	height: 100%;
+	min-width: 0;
+	min-height: 0;
 	max-width: 100%;
 	max-height: 100%;
+	object-fit: contain;
 }
 
 .image-carousel-button,
@@ -1411,28 +1873,40 @@ ul {
 	position: absolute;
 	top: 50%;
 	z-index: 2;
-	width: 2.625rem;
-	height: 2.625rem;
+	width: 2.75rem;
+	height: 2.75rem;
 	padding: 0;
 	place-items: center;
-	border: 1px solid currentColor;
+	border: 0;
 	border-radius: 999px;
-	background: var(--section-background-color, var(--color-page));
-	box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12);
-	color: inherit;
+	background: var(--image-carousel-control-background);
+	box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 18%);
+	color: var(--image-carousel-control-color);
 	cursor: pointer;
-	font: inherit;
-	font-size: 2rem;
-	line-height: 1;
-	opacity: 0.88;
 	transform: translateY(-50%);
 }
 
+.image-carousel-button svg {
+	width: 1.5rem;
+	height: 1.5rem;
+	fill: none;
+	stroke: currentColor;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-width: 2;
+}
+
 .image-carousel-button:hover:not(:disabled),
 .image-carousel-button:focus-visible:not(:disabled) {
-	background: currentColor;
-	color: var(--section-background-color, var(--color-page));
-	opacity: 1;
+	background: var(--image-carousel-control-background-active);
+}
+
+.image-carousel-button:focus-visible:not(:disabled) {
+	outline: var(--focus-indicator-width) solid var(--image-carousel-control-color);
+	outline-offset: 2px;
+	box-shadow:
+		0 0 0 4px var(--image-carousel-control-background-active),
+		0 0 0 6px var(--color-focus-ring);
 }
 
 .image-carousel-button:disabled {
@@ -1454,19 +1928,29 @@ ul {
 	right: 0.75rem;
 	bottom: 0.75rem;
 	z-index: 2;
-	min-width: 3.25rem;
-	min-height: 1.75rem;
+	min-width: 3rem;
+	min-height: 1.875rem;
+	padding: 0.35rem 0.65rem;
 	place-items: center;
-	border: 1px solid currentColor;
-	background: var(--section-background-color, var(--color-page));
-	box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12);
-	font-size: 0.85rem;
+	border: 0;
+	border-radius: 999px;
+	background: var(--image-carousel-control-background);
+	box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 18%);
+	color: var(--image-carousel-control-color);
+	font-size: 0.8125rem;
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
 	line-height: 1;
 	text-align: center;
 }
 
 .image-carousel-captions {
-	width: min(100%, var(--image-layout-width), 72ch);
+	width: min(
+		100%,
+		var(--image-layout-width),
+		var(--image-carousel-width-from-height, var(--image-layout-width)),
+		72ch
+	);
 	margin: 0 auto;
 }
 
@@ -1503,7 +1987,7 @@ ul {
 	justify-content: var(--section-caption-justify-desktop, center);
 	gap: 0.5rem;
 	margin-bottom: 0;
-	color: inherit;
+	color: var(--section-secondary-text-color, var(--color-secondary-text));
 	font-size: inherit;
 	font-family: var(--font-sans);
 	letter-spacing: 0;
@@ -1529,11 +2013,19 @@ ul {
 		backdrop-filter: none;
 	}
 
+	.image-carousel {
+		--image-carousel-width-from-height: var(--image-carousel-width-from-height-mobile, var(--image-layout-width));
+	}
+
 	.site-nav-row {
 		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
 		padding: 0.75rem 0;
 	}
 
+	.site-nav-row-mobile-only {
+		display: flex;
+	}
+
 	.site-brand {
 		max-width: min(70vw, 26rem);
 		font-size: 0.76rem;
@@ -1560,6 +2052,10 @@ ul {
 		display: none;
 	}
 
+	.page-nav.page-nav-title-only {
+		display: block;
+	}
+
 	.mobile-nav-menu > summary {
 		display: flex;
 		align-items: center;
@@ -1572,7 +2068,7 @@ ul {
 		letter-spacing: 0.1em;
 		line-height: 1;
 		list-style: none;
-		opacity: 0.9;
+		color: var(--site-top-text-color, var(--color-primary-text));
 		text-transform: uppercase;
 	}
 
@@ -1645,11 +2141,10 @@ ul {
 		width: 100%;
 		min-height: 3.25rem;
 		padding: 0.75rem 2.5rem 0.75rem 0;
-		color: inherit;
+		color: var(--color-secondary-text);
 		font-size: 0.94rem;
 		letter-spacing: 0;
 		line-height: 1.35;
-		opacity: 0.78;
 		text-decoration: none;
 		text-transform: none;
 	}
@@ -1665,18 +2160,19 @@ ul {
 		padding: 0.75rem 0;
 		font-size: 0.94rem;
 		line-height: 1.35;
-		opacity: 0.78;
+		color: var(--color-secondary-text);
 	}
 
 	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-open-link {
 		display: none;
 		align-items: center;
 		min-height: 3.25rem;
-		max-width: calc(100% - 2.5rem);
+		width: calc(100% - 2.5rem);
 		padding: 0.75rem 0;
 		font-size: 0.94rem;
 		line-height: 1.35;
-		opacity: 0.78;
+		color: var(--color-secondary-text);
+		overflow-wrap: anywhere;
 	}
 
 	.navigation-page-tree-mobile .navigation-page-disclosure[open] > .navigation-page-open-link {
@@ -1687,7 +2183,7 @@ ul {
 	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:focus-visible,
 	.navigation-page-node-current > .navigation-page-disclosure > .navigation-page-summary {
 		background: transparent;
-		opacity: 1;
+		color: var(--color-primary-text);
 	}
 
 	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:hover > :first-child,
@@ -1732,7 +2228,7 @@ ul {
 	.navigation-page-tree-mobile .navigation-page-link:hover,
 	.navigation-page-tree-mobile .navigation-page-link:focus-visible,
 	.navigation-page-tree-mobile .navigation-page-link[aria-current='page'] {
-		opacity: 1;
+		color: var(--color-primary-text);
 		text-decoration: underline;
 		text-decoration-thickness: 1px;
 		text-underline-offset: 0.3em;
@@ -1759,12 +2255,10 @@ ul {
 		min-height: 3.2rem;
 		padding: 0.85rem 0;
 		font-size: 0.92rem;
-		opacity: 0.78;
+		color: var(--color-secondary-text);
 	}
 
-	.mobile-nav-panel a,
-	.mobile-nav-page-open,
-	.mobile-nav-back {
+	.mobile-nav-panel a {
 		font-family: inherit;
 		font-size: 0.94rem;
 		letter-spacing: 0;
@@ -1772,104 +2266,10 @@ ul {
 		text-transform: none;
 	}
 
-	.mobile-nav-page {
-		border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
-		padding: 0;
-	}
-
-	.mobile-nav-page:first-child {
-		border-top: 0;
-	}
-
-	.mobile-nav-page > a,
-	.mobile-nav-page-open {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		min-height: 3.4rem;
-		padding: 0.8rem 0;
-		font-weight: 600;
-	}
-
-	.mobile-nav-page-open {
-		display: none;
-		border: 0;
-		background: transparent;
-		color: currentColor;
-		cursor: pointer;
-		font-weight: 600;
-		text-align: left;
-	}
-
-	.mobile-nav-page-open::after {
-		content: "›";
-		font-size: 1.35rem;
-		line-height: 1;
-		opacity: 0.68;
-	}
-
-	.mobile-nav-page-open:hover > span,
-	.mobile-nav-page-open:focus-visible > span,
-	.mobile-nav-page-open[aria-current='page'] > span {
-		text-decoration: underline;
-		text-decoration-thickness: 1px;
-		text-underline-offset: 0.3em;
-	}
-
-	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-page-open,
-	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-back {
-		display: flex;
-	}
-
-	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-page-fallback {
-		display: none;
-	}
-
-	.mobile-nav-view[hidden] {
-		display: none;
-	}
-
-	.mobile-nav-menu:not([data-mobile-navigation-ready='true']) .mobile-nav-page-view:not([data-current-page='true']) {
-		display: none;
-	}
-
-	.mobile-nav-page-view + .mobile-nav-page-view,
 	.mobile-nav-view + .mobile-nav-view {
 		margin-top: 2rem;
 	}
 
-	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-view {
-		margin-top: 0;
-	}
-
-	.mobile-nav-back {
-		display: none;
-		align-items: center;
-		gap: 0.55rem;
-		min-height: 2.75rem;
-		margin: -0.4rem 0 0.65rem;
-		border: 0;
-		padding: 0;
-		background: transparent;
-		color: currentColor;
-		cursor: pointer;
-		opacity: 0.78;
-	}
-
-	.mobile-nav-back::before {
-		content: "‹";
-		font-size: 1.35rem;
-		line-height: 1;
-	}
-
-	.mobile-nav-back:hover,
-	.mobile-nav-back:focus-visible {
-		opacity: 1;
-		text-decoration: underline;
-		text-underline-offset: 0.25em;
-	}
-
 	.mobile-nav-sections {
 		border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
 	}
@@ -1882,10 +2282,9 @@ ul {
 		min-height: 3.2rem;
 		padding: 0.85rem 0;
 		font-size: 0.92rem;
-		opacity: 0.78;
+		color: var(--color-secondary-text);
 	}
 
-	.mobile-nav-sections .mobile-nav-overview,
 	.mobile-nav-sections .mobile-nav-page-top {
 		font-weight: 650;
 	}
@@ -1897,7 +2296,7 @@ ul {
 	.mobile-nav-sections a:hover,
 	.mobile-nav-sections a:focus-visible,
 	.mobile-nav-sections a[aria-current='location'] {
-		opacity: 1;
+		color: var(--color-primary-text);
 		text-decoration: underline;
 		text-decoration-thickness: 1px;
 		text-underline-offset: 0.25em;
@@ -1922,6 +2321,7 @@ ul {
 
 	.site-page-layout-tree .site-section::before {
 		left: calc(50% - 50vw);
+		right: calc(50% - 50vw);
 	}
 
 	.tree-local-navigation {
@@ -1955,16 +2355,21 @@ ul {
 	}
 
 	.section-header {
-		width: min(100%, var(--section-heading-width-mobile, var(--section-heading-width-desktop, 760px)));
+		width: min(
+			100%,
+			var(
+				--reader-text-width,
+				var(--section-heading-width-mobile, var(--section-heading-width-desktop, 760px))
+			)
+		);
 		text-align: var(--section-heading-align-mobile, var(--section-heading-align-desktop, center));
 	}
 
-	.section-reading-layout {
-		--section-reading-body-width: var(--section-body-width-mobile, var(--section-body-width-desktop, var(--text-width)));
-	}
-
 	.section-markdown {
-		width: min(100%, var(--section-body-width-mobile, var(--section-body-width-desktop, var(--text-width))));
+		width: min(
+			100%,
+			var(--reader-text-width, var(--section-body-width-mobile, var(--section-body-width-desktop, var(--text-width))))
+		);
 		font-size: var(
 			--section-body-font-size-mobile,
 			var(--section-body-font-size-desktop, clamp(0.96rem, 0.94rem + 0.08vw, 1rem))
@@ -2011,29 +2416,14 @@ ul {
 		max-height: var(--image-max-height);
 	}
 
-	.image-carousel-stage {
-		aspect-ratio: auto;
-	}
-
-	.image-carousel-viewport {
-		width: 100%;
-		height: auto;
-		aspect-ratio: var(--image-carousel-aspect-ratio, auto);
-	}
-
-	.image-carousel[data-carousel-ready='true'] .image-carousel-button {
-		display: none;
-	}
-
 	.image-carousel-position {
 		position: absolute;
 		right: 0.5rem;
 		bottom: 0.5rem;
 		min-width: 3rem;
-		min-height: 1.5rem;
-		box-shadow: 0 0.2rem 0.75rem rgb(0 0 0 / 0.1);
-		font-size: 0.78rem;
-		opacity: 0.88;
+		min-height: 1.75rem;
+		padding: 0.3rem 0.55rem;
+		font-size: 0.75rem;
 	}
 
 	:is(.image-stack, .managed-images) {
@@ -2045,3 +2435,76 @@ ul {
 		font-size: 1rem;
 	}
 }
+
+@media (forced-colors: active) {
+	:root,
+	:root[data-color-mode='dark'],
+	:root[data-color-mode='system'] {
+		--color-page: Canvas;
+		--color-primary-text: CanvasText;
+		--color-secondary-text: CanvasText;
+		--color-link-text: LinkText;
+		--color-text: CanvasText;
+		--color-muted: CanvasText;
+		--color-accent: LinkText;
+		--color-surface: Canvas;
+		--color-soft: CanvasText;
+		--color-border: CanvasText;
+		--color-nav-background: Canvas;
+		--color-nav-separator: CanvasText;
+		--color-frame-background: Canvas;
+		--color-frame-text: CanvasText;
+		--color-surface-base-background: Canvas;
+		--color-surface-base-text: CanvasText;
+		--color-surface-base-secondary-text: CanvasText;
+		--color-surface-soft-background: Canvas;
+		--color-surface-soft-text: CanvasText;
+		--color-surface-soft-secondary-text: CanvasText;
+		--color-surface-emphasis-background: Canvas;
+		--color-surface-emphasis-text: CanvasText;
+		--color-surface-emphasis-secondary-text: CanvasText;
+		--color-focus-ring: Highlight;
+		--color-focus-ring-contrast: Canvas;
+		--color-selection-background: Highlight;
+		--color-selection-text: HighlightText;
+		--color-control-background: ButtonFace;
+		--color-control-background-active: Highlight;
+		--color-control-text: ButtonText;
+		--color-code-background: Canvas;
+		--color-code-text: CanvasText;
+		--color-warning-accent: Highlight;
+		--color-warning-surface: Canvas;
+		--color-warning-text: CanvasText;
+		--color-error-accent: Highlight;
+		--color-error-surface: Canvas;
+		--color-error-text: CanvasText;
+		--color-success-accent: Highlight;
+		--color-success-surface: Canvas;
+		--color-success-text: CanvasText;
+	}
+
+	.site-top {
+		backdrop-filter: none;
+	}
+
+	.display-settings-panel,
+	.mobile-nav-panel,
+	.site-nav-submenu > nav,
+	.card-list-item,
+	.image-carousel-button,
+	.image-carousel-position {
+		border: 1px solid CanvasText;
+		box-shadow: none;
+	}
+
+	:is(.display-settings button, .display-settings-segmented span, .mobile-nav-menu > summary, .site-banner-dismiss) {
+		border-color: ButtonText;
+		background: ButtonFace;
+		color: ButtonText;
+	}
+
+	:is(.display-settings-segmented input:checked + span, .image-carousel-button:hover:not(:disabled)) {
+		background: Highlight;
+		color: HighlightText;
+	}
+}