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 }
what does this do? idk, take it for a spin and find out 
@Lady aside but kitty
@Lady remind me to take that for a spin btw
@Lady did you adapt this from that one 7c creation myth thing? reminisciet of that to me
@aescling uh, i didn’t look at that when i was writing this, and i’m pretty sure that that didn’t use Grid for sizing the areas (could be wrong), but the technique of using a float with margins that make it effectively 0 width is something i developed for that, yeah
@Lady what does making it “effectively 0 width” do exactly and why do you want that?
@aescling so the problem being solved here is when you have two annotations, they shouldn’t overlap
using Float: Left plus Clear: Left prevents the overlap by making each annotation come after the end of the previous one
however floats normally do this:
text text blah blah blah, blah
┌───┐blah blah blah
│float │blah bleh bloop
└───┘blorg blah.
relative positioning shifts the float until it is in the margin, but it doesn’t affect the space reserved for it in document flow. to take care of that, we add a negative right margin equal to the width of the float, which effectively pulls the surrounding content in from the right, as if the float had no width.
to see, try disabling the Margin-Right in the web inspector. you’ll see the reserved space. disable Position: Relative, and you’ll see where the float would normally be placed.
@aescling (note that the size of annotations isn’t zero, it’s Calc(40% / .6). but the size that annotations take up *in their containing element* is zero, because that width is followed by a negative margin which offsets it.)
@aescling the explicit width of the element (in this example, i wrote this `Inline-Size: Calc(40% / .6)`). this trick only works for annotations of a width predictable from the surrounding context; you can’t use it with annotations whose widths depend on their own contents.