some quick CSS
html{ Display: Grid; Padding: 0 1REM; Grid: Auto-Flow / 6FR 4FR; Gap: 1REM; Color: #000000; Background: #F0F0F0 }
body{ Display: Block; Position: Relative; Margin-Inline-Start: Auto; Margin-Inline-End: 0; Max-Inline-Size: 38EM; Font: Medium / 1.25 Serif }
ins[role=note]{ Display: Block; Box-Sizing: Border-Box; Float: Left; Clear: Left; Position: Relative; Right: Calc(-100% - 1REM); Margin-Right: Calc(-40% / .6); Border-Block-Start: Thin Solid; Border-Block-End: Thin Solid; Inline-Size: Calc(40% / .6); Padding: 1EM; Color: #8A1C00; Background: #FFFFFF; Text-Decoration: None }
ins[role=note]::before{ Font-Weight: Bold; Content: "※ " }
mark{ Box-Decoration-Break: Clone; Margin: -3PX; Border: 2PX Groove #D58072; Padding: 1PX; Background: #F1CCC0 }
some further fleshed‐out CSS
html{ Display: Grid; Padding-Block-Start: 2REM; Padding-Block-End: 4REM; Padding-Inline-Start: 1REM; Padding-Inline-End: 1REM; Grid: Auto-Flow / 6FR 4FR; Gap: 1REM; Color: #000000; Background: #F0F0F0 }
body{ Display: Block; Padding-Block-Start: 6REM; Position: Relative; Margin-Inline-Start: Auto; Margin-Inline-End: 0; Max-Inline-Size: 38EM; Font: Medium / 1.25 Serif; Counter-Reset: SECTION }
body::after{ Display: Block; Clear: Both; Content: "" }
h1,
body>p:First-Child::before{ Display: Block; Margin-Block-Start: 2REM; Margin-Block-End: 2REM; Block-Size: 4REM; Opacity: .75; Font-Size: 3.2REM; Line-Height: 1.25; White-Space: Pre; Text-Align: Center }
body>h1:First-Child,
body>p:First-Child::before{ Position: Absolute; Inset-Block-Start: 0; Inset-Inline-Start: 0; Inset-Inline-End: 0; Margin-Block-Start: 0 }
body>p:First-Child::before{ Content: "…" }
p{ Margin: 0; Text-Align: Justify }
p+p{ Margin-Block-Start: 1EM }
ins[role=note]{ Display: Block; Box-Sizing: Border-Box; Margin-Block-Start: 1REM; Margin-Block-End: 1REM; Border-Block-Start: Thin Solid; Border-Block-End: Thin Solid; Padding: 1EM; Color: #8A1C00; Background: #FFFFFF; Text-Align: Justify; Text-Decoration: None; Counter-Increment: UNNOTE }
p>ins[role=note]{ Float: Left /* compatibility */; Float: Inline-Start; Clear: Left /* compatibility */; Clear: Inline-Start; Position: Relative; Inset-Inline-End: Calc(-100% - 1REM); Margin-Block-Start: 0; Margin-Block-End: 0; Margin-Inline-End: Calc(-40% / .6); Inline-Size: Calc(40% / .6); Counter-Increment: None }
ins[role=note]::before{ Display: Inline-Block; Margin-Inline-End: .5EM; Min-Inline-Size: 3EM; Background: #F1CCC0; Font-Weight: Bold; Text-Align: Center; Content: "§" Counter(SECTION) ":" Counter(UNNOTE, Upper-Alpha) }
mark+ins[role=note]::before{ Content: "§" Counter(SECTION) ":" Counter(NOTE) }
mark{ Box-Decoration-Break: Clone; Margin: -3PX; Border: 2PX Groove #D58072; Padding: 1PX; Background: #F1CCC0; Counter-Increment: NOTE }
mark::after{ Font-Size: .6EM; Font-Weight: Bold; Line-Height: 1; Vertical-Align: Super; Content: " " Counter(NOTE) }
body>*:First-Child,
hr{ Counter-Increment: SECTION; Counter-Reset: NOTE UNNOTE }
