fix hint stacking/margin with container

src/styles/hints.scss

@@ -1,4 +1,6 @@
 :root {
+	--hint-margin: var(--spc-4x);
+
 	// Padding and gap must be consistent to maintain visual balance
 	--hint-container_padding: var(--spc-1x);
 	--hint-container_gap: var(--hint-container-padding);
@@ -37,13 +39,14 @@
 }
 
 .hint {
+	margin: var(--hint-margin) 0;
+
+	&> .hint__container {
 		display: inline-block;
 		overflow: hidden;
-	margin: var(--hint-container_padding) 0;
 
 		border-radius: var(--hint-container_corner-radius_collapsed);
 		&[open] {
-		display: block;
 			border-radius: var(--hint-container_corner-radius_expanded);
 		}
 
@@ -114,3 +117,4 @@
 			}
 		}
 	}
+}

src/utils/markdown/hints/hints.tsx

@@ -13,7 +13,8 @@ interface HintProps {
 /** @jsxImportSource hastscript */
 export function Hint({ title, children }: HintProps): Element {
 	return (
-		<details class="hint">
+		<div class="hint">
+			<details class="hint__container">
 				<summary class="hint__title text-style-body-medium-bold">
 					{fromHtml(chevron_down)}
 					{title}
@@ -23,5 +24,6 @@ export function Hint({ title, children }: HintProps): Element {
 					{children}
 				</div>
 			</details>
+		</div>
 	) as never;
 }