.hgi-guide {
	--hgi-accent: #3b2638;
	--hgi-bg: #ffffff;
	--hgi-surface: #fafaf9;
	--hgi-ink: #1c1917;
	--hgi-muted: #57534e;
	--hgi-line: #e7e5e4;
	--hgi-radius: 0.5rem;
	--hgi-heading: Georgia, "Times New Roman", serif;
	--hgi-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--hgi-weight-label: 600;
	--hgi-weight-heading: 700;
	box-sizing: border-box;
	width: min(100%, 72rem);
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 3rem);
	color: var(--hgi-ink);
	background: var(--hgi-bg);
	border: 1px solid var(--hgi-line);
	border-radius: var(--hgi-radius);
	font-family: var(--hgi-body);
	font-size: 1rem;
	line-height: 1.6;
	text-align: start;
	container-type: inline-size;
}

.hgi-guide *,
.hgi-guide *::before,
.hgi-guide *::after { box-sizing: inherit; }
.hgi-guide a { color: var(--hgi-accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.hgi-guide a:hover { text-decoration-thickness: 0.14em; }
.hgi-guide a:focus-visible,
.hgi-guide summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--hgi-accent) 45%, transparent); outline-offset: 3px; }
.hgi-guide p, .hgi-guide h2, .hgi-guide h3, .hgi-guide dl, .hgi-guide dd { margin: 0; }

.hgi-theme-essential { --hgi-accent: #2457c5; --hgi-heading: var(--hgi-body); --hgi-radius: 0.75rem; }
.hgi-theme-natural { --hgi-accent: #276749; --hgi-heading: ui-serif, Charter, "Bitstream Charter", Georgia, serif; --hgi-surface: #f7f8f7; --hgi-radius: 1rem; }
.hgi-theme-inherit { --hgi-accent: currentColor; --hgi-heading: inherit; --hgi-body: inherit; --hgi-radius: 0; }

.hgi-header { display: flex; align-items: flex-start; gap: 1.25rem; padding-block-end: 2rem; border-block-end: 1px solid var(--hgi-line); }
.hgi-logo { width: 4rem; height: 4rem; object-fit: contain; }
.hgi-keyhole { flex: 0 0 2.25rem; width: 2.25rem; height: 2.75rem; border: 1.5px solid var(--hgi-accent); border-radius: 50% 50% 42% 42%; position: relative; margin-block-start: 0.25rem; }
.hgi-keyhole::after { content: ""; position: absolute; inset: 45% 38% -0.35rem; background: var(--hgi-bg); border-inline: 1.5px solid var(--hgi-accent); }
.hgi-heading-group { min-width: 0; }
.hgi-property-name { overflow-wrap: anywhere; color: var(--hgi-accent); font-size: 0.875rem; font-weight: var(--hgi-weight-label); letter-spacing: 0.02em; }
.hgi-header h2 { max-width: 20ch; margin-block-start: 0.25rem; font-family: var(--hgi-heading); font-size: 1.75rem; font-size: clamp(1.75rem, 5cqi, 2.75rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.hgi-intro { max-width: 65ch; margin-block-start: 0.75rem !important; color: var(--hgi-muted); }

.hgi-nav { margin-block: 1.5rem 2.25rem; }
.hgi-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.hgi-guide .hgi-nav a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 2.75rem; padding: 0.6rem 0.9rem !important; color: var(--hgi-ink); background: var(--hgi-surface); background-image: none !important; border: 1px solid var(--hgi-line); border-radius: 999px; box-shadow: none !important; font-size: 0.875rem; font-weight: var(--hgi-weight-label); line-height: 1.25 !important; text-decoration: none !important; text-decoration-line: none !important; }
.hgi-guide .hgi-nav a:hover,
.hgi-guide .hgi-nav a:focus,
.hgi-guide .hgi-nav a:active { color: var(--hgi-accent); border-color: var(--hgi-accent); box-shadow: none !important; text-decoration: none !important; text-decoration-line: none !important; }
.hgi-guide .hgi-nav a::before,
.hgi-guide .hgi-nav a::after { content: none !important; display: none !important; }
.hgi-nav a > span:last-child { display: block; line-height: 1.25 !important; }
.hgi-icon-wrap { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; position: relative; display: block; align-self: center; line-height: 0; }
.hgi-icon-wrap .hgi-icon { display: block; width: 1.25rem; height: 1.25rem; margin: 0; overflow: visible; position: absolute !important; inset: 50% auto auto 50% !important; fill: none; stroke: currentColor; transform: translate(-50%, -50%) !important; vertical-align: middle; }
.hgi-section-list-icon .hgi-icon { display: block; flex: none; width: 1.25rem; height: 1.25rem; margin: 0; overflow: visible; position: static; inset: auto; fill: none; stroke: currentColor; transform: none; vertical-align: middle; }

.hgi-sections { display: grid; gap: 0; }
.hgi-section { scroll-margin-top: 2rem; border-block-end: 1px solid var(--hgi-line); }
.hgi-section:first-child { border-block-start: 1px solid var(--hgi-line); }
.hgi-section-heading { display: flex; align-items: center; gap: 0.85rem; min-height: 4.25rem; padding-block: 1rem; color: var(--hgi-ink); }
.hgi-section-heading h3,
summary.hgi-section-heading { font-family: var(--hgi-heading); font-size: 1.375rem; font-weight: var(--hgi-weight-heading); line-height: 1.25; }
summary.hgi-section-heading { cursor: pointer; list-style: none; }
summary.hgi-section-heading::-webkit-details-marker { display: none; }
.hgi-chevron { width: 0.6rem; height: 0.6rem; margin-inline-start: auto; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 180ms ease; }
.hgi-section[open] .hgi-chevron { transform: rotate(225deg); }
.hgi-section-body { padding-block: 0 1.75rem; padding-inline-start: 2.1rem; }
.hgi-data-list { display: grid; gap: 0; }
.hgi-data-row { display: grid; grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.7fr); gap: 1.5rem; padding-block: 0.85rem; border-block-start: 1px solid color-mix(in srgb, var(--hgi-line) 65%, transparent); }
.hgi-data-row:first-child { border-block-start: 0; }
.hgi-data-row dt { color: var(--hgi-muted); font-size: 0.875rem; font-weight: var(--hgi-weight-label); }
.hgi-data-row dd { min-width: 0; max-width: 65ch; overflow-wrap: anywhere; color: var(--hgi-ink); }

.hgi-faq { border-block-start: 1px solid var(--hgi-line); }
.hgi-faq:first-child { border-block-start: 0; }
.hgi-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding-block: 0.75rem; overflow-wrap: anywhere; cursor: pointer; list-style: none; font-weight: var(--hgi-weight-label); }
.hgi-faq summary::-webkit-details-marker { display: none; }
.hgi-faq > div { max-width: 65ch; padding-block: 0 1rem; color: var(--hgi-muted); }
.hgi-plus { position: relative; flex: 0 0 1rem; width: 1rem; height: 1rem; }
.hgi-plus::before, .hgi-plus::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline: 0; height: 1px; background: currentColor; }
.hgi-plus::after { transform: rotate(90deg); transition: transform 180ms ease; }
.hgi-faq[open] .hgi-plus::after { transform: rotate(0); }

.hgi-credit { margin-block-start: 1.5rem; color: var(--hgi-muted); font-size: 0.75rem; text-align: end; }
.hgi-credit a { color: inherit; }
.hgi-empty { padding: 1rem; border: 1px dashed #a8a29e; color: #57534e; }

@container (max-width: 38rem) {
	.hgi-guide { padding: 1rem; }
	.hgi-header { gap: 0.85rem; padding-block-end: 1.25rem; }
	.hgi-keyhole { flex-basis: 1.75rem; width: 1.75rem; height: 2.15rem; }
	.hgi-nav { margin-block: 1rem 1.5rem; }
	.hgi-nav ul { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 0.25rem; scrollbar-width: thin; }
	.hgi-nav li { flex: 0 0 auto; }
	.hgi-section-body { padding-inline-start: 0; }
	.hgi-data-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.hgi-guide *, .hgi-guide *::before, .hgi-guide *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
	.hgi-nav a, .hgi-guide { border-color: CanvasText; }
}