From a12ad500ce2fb3a61621591a9b4ad2d480aa84bc Mon Sep 17 00:00:00 2001
From: Alexander Wang <alex@terrastruct.com>
Date: Tue, 4 Feb 2025 06:25:28 -0700
Subject: [PATCH] consider stroke width

---
 d2renderers/d2svg/d2svg.go                    | 19 +++++++++++--------
 .../stable/box_arrowhead/dagre/sketch.exp.svg |  2 +-
 .../stable/box_arrowhead/elk/sketch.exp.svg   |  2 +-
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 8eec51fad..e625da360 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -310,6 +310,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection, i
 				width, 0.,
 			)
 		}
+
 		path = polygonEl.Render()
 	case d2target.BoxArrowhead:
 		polygonEl := d2themes.NewThemableElement("polygon", inlineTheme)
@@ -317,20 +318,22 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection, i
 		polygonEl.Fill = d2target.BG_COLOR
 		polygonEl.Stroke = connection.Stroke
 		polygonEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
+		polygonEl.Style = fmt.Sprintf("%sstroke-linejoin:miter;", polygonEl.Style)
 
+		inset := strokeWidth / 2
 		if isTarget {
 			polygonEl.Points = fmt.Sprintf("%f,%f %f,%f %f,%f %f,%f",
-				0., 0.,
-				0., height,
-				width, height,
-				width, 0.,
+				inset, inset,
+				inset, height-inset,
+				width-inset, height-inset,
+				width-inset, inset,
 			)
 		} else {
 			polygonEl.Points = fmt.Sprintf("%f,%f %f,%f %f,%f %f,%f",
-				0., 0.,
-				0., height,
-				width, height,
-				width, 0.,
+				inset, inset,
+				inset, height-inset,
+				width-inset, height-inset,
+				width-inset, inset,
 			)
 		}
 		path = polygonEl.Render()
diff --git a/e2etests/testdata/stable/box_arrowhead/dagre/sketch.exp.svg b/e2etests/testdata/stable/box_arrowhead/dagre/sketch.exp.svg
index c4f6c682b..d782b540e 100644
--- a/e2etests/testdata/stable/box_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/box_arrowhead/dagre/sketch.exp.svg
@@ -96,7 +96,7 @@
 		.d2-348696370 .color-AA4{color:#EDF0FD;}
 		.d2-348696370 .color-AA5{color:#F7F8FE;}
 		.d2-348696370 .color-AB4{color:#EDF0FD;}
-		.d2-348696370 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-348696370);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-348696370);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-348696370);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-348696370);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="Yw=="><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="ZA=="><g class="shape" ><rect x="113.000000" y="187.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.000000" y="225.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g class="KGEgJmx0Oy0mZ3Q7IGIpWzBd"><marker id="mk-d2-348696370-2266258204" markerWidth="16.000000" markerHeight="16.000000" refX="3.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" stroke="#0D32B2" fill="#FFFFFF" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-d2-348696370-1579403887" markerWidth="16.000000" markerHeight="16.000000" refX="13.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" stroke="#0D32B2" fill="#FFFFFF" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 26.500000 69.500000 C 26.500000 114.300003 26.500000 138.699997 26.500000 183.500000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-d2-348696370-2266258204)" marker-end="url(#mk-d2-348696370-1579403887)" mask="url(#d2-348696370)" /><text x="26.500000" y="132.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">box</text></g><g class="KGMgJmx0Oy0mZ3Q7IGQpWzBd"><marker id="mk-d2-348696370-3481749659" markerWidth="16.000000" markerHeight="16.000000" refX="3.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-d2-348696370-1513971350" markerWidth="16.000000" markerHeight="16.000000" refX="13.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.000000 69.500000 C 140.000000 114.300003 140.000000 138.699997 140.000000 183.500000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-d2-348696370-3481749659)" marker-end="url(#mk-d2-348696370-1513971350)" mask="url(#d2-348696370)" /><text x="140.500000" y="132.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-box</text></g><mask id="d2-348696370" maskUnits="userSpaceOnUse" x="-1" y="-1" width="173" height="255">
+		.d2-348696370 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-348696370);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-348696370);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-348696370);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-348696370);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="Yw=="><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="ZA=="><g class="shape" ><rect x="113.000000" y="187.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.000000" y="225.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g class="KGEgJmx0Oy0mZ3Q7IGIpWzBd"><marker id="mk-d2-348696370-2266258204" markerWidth="16.000000" markerHeight="16.000000" refX="3.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="1.000000,1.000000 1.000000,15.000000 15.000000,15.000000 15.000000,1.000000" stroke="#0D32B2" fill="#FFFFFF" class="connection stroke-B1 fill-N7" style="stroke-linejoin:miter;" stroke-width="2" /> </marker><marker id="mk-d2-348696370-1579403887" markerWidth="16.000000" markerHeight="16.000000" refX="13.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="1.000000,1.000000 1.000000,15.000000 15.000000,15.000000 15.000000,1.000000" stroke="#0D32B2" fill="#FFFFFF" class="connection stroke-B1 fill-N7" style="stroke-linejoin:miter;" stroke-width="2" /> </marker><path d="M 26.500000 69.500000 C 26.500000 114.300003 26.500000 138.699997 26.500000 183.500000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-d2-348696370-2266258204)" marker-end="url(#mk-d2-348696370-1579403887)" mask="url(#d2-348696370)" /><text x="26.500000" y="132.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">box</text></g><g class="KGMgJmx0Oy0mZ3Q7IGQpWzBd"><marker id="mk-d2-348696370-3481749659" markerWidth="16.000000" markerHeight="16.000000" refX="3.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-d2-348696370-1513971350" markerWidth="16.000000" markerHeight="16.000000" refX="13.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.000000 69.500000 C 140.000000 114.300003 140.000000 138.699997 140.000000 183.500000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-d2-348696370-3481749659)" marker-end="url(#mk-d2-348696370-1513971350)" mask="url(#d2-348696370)" /><text x="140.500000" y="132.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-box</text></g><mask id="d2-348696370" maskUnits="userSpaceOnUse" x="-1" y="-1" width="173" height="255">
 <rect x="-1" y="-1" width="173" height="255" fill="white"></rect>
 <rect x="22.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="22.500000" y="209.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
diff --git a/e2etests/testdata/stable/box_arrowhead/elk/sketch.exp.svg b/e2etests/testdata/stable/box_arrowhead/elk/sketch.exp.svg
index 13ae05f5f..cce76cce0 100644
--- a/e2etests/testdata/stable/box_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/box_arrowhead/elk/sketch.exp.svg
@@ -96,7 +96,7 @@
 		.d2-1066721491 .color-AA4{color:#EDF0FD;}
 		.d2-1066721491 .color-AA5{color:#F7F8FE;}
 		.d2-1066721491 .color-AB4{color:#EDF0FD;}
-		.d2-1066721491 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1066721491);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1066721491);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1066721491);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1066721491);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="Yw=="><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="ZA=="><g class="shape" ><rect x="85.000000" y="239.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.000000" y="277.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g class="KGEgJmx0Oy0mZ3Q7IGIpWzBd"><marker id="mk-d2-1066721491-2266258204" markerWidth="16.000000" markerHeight="16.000000" refX="3.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" stroke="#0D32B2" fill="#FFFFFF" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-d2-1066721491-1579403887" markerWidth="16.000000" markerHeight="16.000000" refX="13.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" stroke="#0D32B2" fill="#FFFFFF" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 38.500000 82.000000 L 38.500000 235.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-d2-1066721491-2266258204)" marker-end="url(#mk-d2-1066721491-1579403887)" mask="url(#d2-1066721491)" /><text x="38.500000" y="164.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">box</text></g><g class="KGMgJmx0Oy0mZ3Q7IGQpWzBd"><marker id="mk-d2-1066721491-3481749659" markerWidth="16.000000" markerHeight="16.000000" refX="3.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-d2-1066721491-1513971350" markerWidth="16.000000" markerHeight="16.000000" refX="13.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 112.000000 82.000000 L 112.000000 235.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-d2-1066721491-3481749659)" marker-end="url(#mk-d2-1066721491-1513971350)" mask="url(#d2-1066721491)" /><text x="112.500000" y="164.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-box</text></g><mask id="d2-1066721491" maskUnits="userSpaceOnUse" x="11" y="11" width="133" height="295">
+		.d2-1066721491 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1066721491);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1066721491);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1066721491);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1066721491);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="Yw=="><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="ZA=="><g class="shape" ><rect x="85.000000" y="239.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.000000" y="277.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g class="KGEgJmx0Oy0mZ3Q7IGIpWzBd"><marker id="mk-d2-1066721491-2266258204" markerWidth="16.000000" markerHeight="16.000000" refX="3.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="1.000000,1.000000 1.000000,15.000000 15.000000,15.000000 15.000000,1.000000" stroke="#0D32B2" fill="#FFFFFF" class="connection stroke-B1 fill-N7" style="stroke-linejoin:miter;" stroke-width="2" /> </marker><marker id="mk-d2-1066721491-1579403887" markerWidth="16.000000" markerHeight="16.000000" refX="13.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="1.000000,1.000000 1.000000,15.000000 15.000000,15.000000 15.000000,1.000000" stroke="#0D32B2" fill="#FFFFFF" class="connection stroke-B1 fill-N7" style="stroke-linejoin:miter;" stroke-width="2" /> </marker><path d="M 38.500000 82.000000 L 38.500000 235.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-d2-1066721491-2266258204)" marker-end="url(#mk-d2-1066721491-1579403887)" mask="url(#d2-1066721491)" /><text x="38.500000" y="164.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">box</text></g><g class="KGMgJmx0Oy0mZ3Q7IGQpWzBd"><marker id="mk-d2-1066721491-3481749659" markerWidth="16.000000" markerHeight="16.000000" refX="3.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-d2-1066721491-1513971350" markerWidth="16.000000" markerHeight="16.000000" refX="13.000000" refY="8.000000" viewBox="0.000000 0.000000 16.000000 16.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 0.000000,16.000000 16.000000,16.000000 16.000000,0.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 112.000000 82.000000 L 112.000000 235.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-d2-1066721491-3481749659)" marker-end="url(#mk-d2-1066721491-1513971350)" mask="url(#d2-1066721491)" /><text x="112.500000" y="164.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-box</text></g><mask id="d2-1066721491" maskUnits="userSpaceOnUse" x="11" y="11" width="133" height="295">
 <rect x="11" y="11" width="133" height="295" fill="white"></rect>
 <rect x="34.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="34.500000" y="261.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>