/* Page-scoped support for the imported PlanetScale assembly visualizations. */
.article .original-post-notice {
  background: var(--color-background);
  border: 1px solid var(--color-text);
  border-radius: 0;
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  margin: 0 0 1rem;
  padding: 0.55rem 0.75rem;
  text-align: left;
}

.article table {
  border-collapse: collapse;
  font-family: "Courier New", Courier, monospace;
  margin: 0.75rem auto 1.25rem;
  table-layout: fixed;
  text-align: left;
  width: min(100%, 34rem);
}

.article thead th {
  border-bottom: 0.12rem solid var(--color-text);
  color: var(--color-heading);
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
}

.article th,
.article td {
  padding: 0.35rem 1rem;
  text-align: left;
  vertical-align: top;
  width: 50%;
}

.article th + th,
.article td + td {
  border-left: 1px solid var(--color-surface);
}

.article tbody tr + tr td {
  border-top: 1px solid var(--color-surface);
}

.article .assembly-comparison {
  margin: 1.5rem 0 2rem;
  max-width: none;
  min-width: 100%;
  overflow: visible;
  width: max-content;
}

.article .assembly-views {
  background: #f5f5f5;
  border: 1px solid var(--color-surface);
  border-radius: 0;
  overflow: visible;
  margin-top: 0.75rem;
  padding: 1rem;
  width: max-content;
}

.article > svg,
.article pre.source-codeblock,
.article pre.assembly-codeblock {
  background: #f5f5f5 !important;
  border-radius: 0;
}

.article .assembly-views > svg {
  background: transparent !important;
  min-width: max-content;
  max-width: none;
}

.article pre.source-codeblock,
.article pre.assembly-codeblock {
  color: var(--color-text);
  margin-bottom: 1.25rem;
  overflow: visible;
  padding: 1rem;
  text-align: left;
  white-space: pre;
}

.article .highlight {
  margin-bottom: 1.25rem;
}

.article .highlight pre {
  padding: 1rem;
}

.article pre.assembly-codeblock {
  justify-self: center !important;
  max-width: none;
  width: max-content;
}

.article pre.assembly-codeblock div {
  transition-property: background-color;
  transition-duration: 350ms;
}

.article .assembly-comparison label {
  cursor: pointer;
}

.article .assembly-comparison input {
  margin-right: 0.25rem;
}

.article .assembly-views > .bg-primary {
  background: transparent !important;
}

.article .\!dark,
.article .\!bg-primary {
  background: color-mix(in srgb, var(--color-surface) 65%, transparent) !important;
  color: var(--color-text) !important;
}

.article .assembly-views > svg.\!dark,
.article .assembly-views > svg.\!bg-primary {
  background: transparent !important;
}

.article .w-fit {
  width: fit-content;
}

.article .p-2 {
  padding: 1rem;
}

.article .pb-2 {
  padding-bottom: 0.5rem;
}

.article .mb-2 {
  margin-bottom: 0.5rem;
}

.article .my-1\.5 {
  margin-bottom: 0.375rem;
  margin-top: 0.375rem;
}

.article .text-center {
  text-align: center;
}

.article .italic {
  font-style: italic;
}

.article .font-xs {
  font-size: 0.8rem;
}

.article .rounded {
  border-radius: 0;
}

.article .border {
  border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
}

.article code.border {
  background-color: #eee;
  border: 0;
  border-radius: 0;
  padding: 0 0.2rem;
}

.article code.text-\[14px\] {
  font-size: inherit;
}

.article span[class*="asm-highlight-"] {
  padding: 0.05rem 0.15rem;
}

@media (min-width: 1024px) {
  .article .lg\:hidden {
    display: none;
  }
}

.assembly-views {
	display: grid;
}
.assembly-views > svg {
	grid-column: 1;
	grid-row: 1;
}

.assembly-comparison .assembly-view {
	pointer-events: none;
	visibility: hidden;
	z-index: 0;
}
.assembly-comparison > input:nth-of-type(1):checked ~ .assembly-views > .assembly-view:first-child,
.assembly-comparison > input:nth-of-type(2):checked ~ .assembly-views > .assembly-view:nth-child(2),
.assembly-comparison > input:nth-of-type(3):checked ~ .assembly-views > .assembly-view:nth-child(3) {
	pointer-events: auto;
	visibility: visible;
	z-index: 1;
}

div.asm-highlight,
span.asm-highlight {
	transition-property: background-color;
	transition-duration: 350ms;
}


div.asm-highlight-0,
span.asm-highlight-0 {
	background-color: rgba(40, 83, 76, 0.4);
}
div.asm-highlight-0:hover,
span.asm-highlight-0:hover {
	background-color: rgba(40, 83, 76, 0.8);
}
span.asm-highlight-dim-0 {
	background-color: rgba(40, 83, 76, 0.1);
}
svg.assembly-view * .relation.highlight-0 {
	fill: rgb(40, 83, 76);
}

div.asm-highlight-1,
span.asm-highlight-1 {
	background-color: rgba(102, 102, 29, 0.4);
}
div.asm-highlight-1:hover,
span.asm-highlight-1:hover {
	background-color: rgba(102, 102, 29, 0.8);
}
span.asm-highlight-dim-1 {
	background-color: rgba(102, 102, 29, 0.1);
}
svg.assembly-view * .relation.highlight-1 {
	fill: rgb(102, 102, 29);
}

div.asm-highlight-2,
span.asm-highlight-2 {
	background-color: rgba(38, 28, 104, 0.4);
}
div.asm-highlight-2:hover,
span.asm-highlight-2:hover {
	background-color: rgba(38, 28, 104, 0.8);
}
span.asm-highlight-dim-2 {
	background-color: rgba(38, 28, 104, 0.1);
}
svg.assembly-view * .relation.highlight-2 {
	fill: rgb(38, 28, 104);
}

div.asm-highlight-3,
span.asm-highlight-3 {
	background-color: rgba(75, 18, 11, 0.4);
}
div.asm-highlight-3:hover,
span.asm-highlight-3:hover {
	background-color: rgba(75, 18, 11, 0.8);
}
span.asm-highlight-dim-3 {
	background-color: rgba(75, 18, 11, 0.1);
}
svg.assembly-view * .relation.highlight-3 {
	fill: rgb(75, 18, 11);
}

div.asm-highlight-4,
span.asm-highlight-4 {
	background-color: rgba(30, 71, 100, 0.4);
}
div.asm-highlight-4:hover,
span.asm-highlight-4:hover {
	background-color: rgba(30, 71, 100, 0.8);
}
span.asm-highlight-dim-4 {
	background-color: rgba(30, 71, 100, 0.1);
}
svg.assembly-view * .relation.highlight-4 {
	fill: rgb(30, 71, 100);
}

div.asm-highlight-5,
span.asm-highlight-5 {
	background-color: rgba(110, 65, 13, 0.4);
}
div.asm-highlight-5:hover,
span.asm-highlight-5:hover {
	background-color: rgba(110, 65, 13, 0.8);
}
span.asm-highlight-dim-5 {
	background-color: rgba(110, 65, 13, 0.1);
}
svg.assembly-view * .relation.highlight-5 {
	fill: rgb(110, 65, 13);
}

div.asm-highlight-6,
span.asm-highlight-6 {
	background-color: rgba(48, 75, 3, 0.4);
}
div.asm-highlight-6:hover,
span.asm-highlight-6:hover {
	background-color: rgba(48, 75, 3, 0.8);
}
span.asm-highlight-dim-6 {
	background-color: rgba(48, 75, 3, 0.1);
}
svg.assembly-view * .relation.highlight-6 {
	fill: rgb(48, 75, 3);
}

div.asm-highlight-7,
span.asm-highlight-7 {
	background-color: rgba(109, 6, 59, 0.4);
}
div.asm-highlight-7:hover,
span.asm-highlight-7:hover {
	background-color: rgba(109, 6, 59, 0.8);
}
span.asm-highlight-dim-7 {
	background-color: rgba(109, 6, 59, 0.1);
}
svg.assembly-view * .relation.highlight-7 {
	fill: rgb(109, 6, 59);
}

div.asm-highlight-8,
span.asm-highlight-8 {
	background-color: rgba(66, 47, 47, 0.4);
}
div.asm-highlight-8:hover,
span.asm-highlight-8:hover {
	background-color: rgba(66, 47, 47, 0.8);
}
span.asm-highlight-dim-8 {
	background-color: rgba(66, 47, 47, 0.1);
}
svg.assembly-view * .relation.highlight-8 {
	fill: rgb(66, 47, 47);
}

div.asm-highlight-9,
span.asm-highlight-9 {
	background-color: rgba(53, 8, 54, 0.4);
}
div.asm-highlight-9:hover,
span.asm-highlight-9:hover {
	background-color: rgba(53, 8, 54, 0.8);
}
span.asm-highlight-dim-9 {
	background-color: rgba(53, 8, 54, 0.1);
}
svg.assembly-view * .relation.highlight-9 {
	fill: rgb(53, 8, 54);
}

div.asm-highlight-10,
span.asm-highlight-10 {
	background-color: rgba(24, 97, 8, 0.4);
}
div.asm-highlight-10:hover,
span.asm-highlight-10:hover {
	background-color: rgba(24, 97, 8, 0.8);
}
span.asm-highlight-dim-10 {
	background-color: rgba(24, 97, 8, 0.1);
}
svg.assembly-view * .relation.highlight-10 {
	fill: rgb(24, 97, 8);
}

div.asm-highlight-11,
span.asm-highlight-11 {
	background-color: rgba(105, 94, 7, 0.4);
}
div.asm-highlight-11:hover,
span.asm-highlight-11:hover {
	background-color: rgba(105, 94, 7, 0.8);
}
span.asm-highlight-dim-11 {
	background-color: rgba(105, 94, 7, 0.1);
}
svg.assembly-view * .relation.highlight-11 {
	fill: rgb(105, 94, 7);
}


svg.assembly-view * tspan.lineno {
	fill-opacity:0.4;
	font-style:italic;
	fill:#ABB2BF;
}
svg.assembly-view * .relation {
	fill-opacity:0.5;
	transition-property:fill-opacity;
	transition-duration:350ms;
}
svg.assembly-view * .relation.highlight-on {
	fill-opacity:0.75;
}
svg.assembly-view * .relation.highlight-dim {
	fill-opacity:0;
}

/* Retheme the imported Atom One Dark markup to the site's light Pygments palette. */
.article pre.source-codeblock [style*="#ABB2BF"],
.article pre.source-codeblock [style*="#abb2bf"],
.article pre.assembly-codeblock [style*="#ABB2BF"],
.article pre.assembly-codeblock [style*="#abb2bf"] {
  color: var(--color-text) !important;
}

.article pre.source-codeblock [style*="#C678DD"],
.article pre.source-codeblock [style*="#c678dd"],
.article pre.assembly-codeblock [style*="#C678DD"],
.article pre.assembly-codeblock [style*="#c678dd"] {
  color: #008000 !important;
  font-weight: 700;
}

.article pre.source-codeblock [style*="#61AFEF"],
.article pre.source-codeblock [style*="#61afef"],
.article pre.assembly-codeblock [style*="#61AFEF"],
.article pre.assembly-codeblock [style*="#61afef"] {
  color: #00f !important;
}

.article pre.source-codeblock [style*="#56B6C2"],
.article pre.source-codeblock [style*="#56b6c2"],
.article pre.assembly-codeblock [style*="#56B6C2"],
.article pre.assembly-codeblock [style*="#56b6c2"] {
  color: #b00040 !important;
}

.article pre.source-codeblock [style*="#E06C75"],
.article pre.source-codeblock [style*="#e06c75"],
.article pre.assembly-codeblock [style*="#E06C75"],
.article pre.assembly-codeblock [style*="#e06c75"] {
  color: #19177c !important;
}

.article pre.source-codeblock [style*="#D19A66"],
.article pre.source-codeblock [style*="#d19a66"],
.article pre.assembly-codeblock [style*="#D19A66"],
.article pre.assembly-codeblock [style*="#d19a66"] {
  color: #666 !important;
}

.article pre.source-codeblock [style*="#98C379"],
.article pre.source-codeblock [style*="#98c379"],
.article pre.assembly-codeblock [style*="#98C379"],
.article pre.assembly-codeblock [style*="#98c379"] {
  color: #ba2121 !important;
}

.article pre.source-codeblock [style*="#5C6370"],
.article pre.source-codeblock [style*="#5c6370"],
.article pre.assembly-codeblock [style*="#5C6370"],
.article pre.assembly-codeblock [style*="#5c6370"] {
  color: #408080 !important;
  font-style: italic;
}

.article svg.assembly-view [fill="#ABB2BF"],
.article svg.assembly-view [fill="#abb2bf"] {
  fill: var(--color-text) !important;
}

.article svg.assembly-view [fill="#C678DD"],
.article svg.assembly-view [fill="#c678dd"] {
  fill: #008000 !important;
  font-weight: 700;
}

.article svg.assembly-view [fill="#61AFEF"],
.article svg.assembly-view [fill="#61afef"] {
  fill: #00f !important;
}

.article svg.assembly-view [fill="#56B6C2"],
.article svg.assembly-view [fill="#56b6c2"] {
  fill: #b00040 !important;
}

.article svg.assembly-view [fill="#E06C75"],
.article svg.assembly-view [fill="#e06c75"] {
  fill: #19177c !important;
}

.article svg.assembly-view [fill="#D19A66"],
.article svg.assembly-view [fill="#d19a66"] {
  fill: #666 !important;
}

.article svg.assembly-view [fill="#98C379"],
.article svg.assembly-view [fill="#98c379"] {
  fill: #ba2121 !important;
}

.article svg.assembly-view [fill="#5C6370"],
.article svg.assembly-view [fill="#5c6370"] {
  fill: #408080 !important;
  font-style: italic;
}

.article svg.assembly-view * tspan.lineno {
  fill: var(--color-muted) !important;
  fill-opacity: 1;
}

.article > svg [style*="fill: #ffffff"],
.article > svg [style*="fill:#ffffff"] {
  fill: var(--color-text) !important;
}

.article > svg [style*="stroke: #ffffff"],
.article > svg [style*="stroke:#ffffff"] {
  stroke: var(--color-text) !important;
}

.article .asm-highlight-0 { background-color: rgba(64, 128, 128, 0.18) !important; }
.article .asm-highlight-1 { background-color: rgba(0, 128, 0, 0.16) !important; }
.article .asm-highlight-2 { background-color: rgba(25, 23, 124, 0.14) !important; }
.article .asm-highlight-3 { background-color: rgba(186, 33, 33, 0.14) !important; }
.article .asm-highlight-4 { background-color: rgba(0, 0, 255, 0.12) !important; }
.article .asm-highlight-5 { background-color: rgba(188, 122, 0, 0.16) !important; }
.article .asm-highlight-6 { background-color: rgba(0, 160, 0, 0.14) !important; }
.article .asm-highlight-7 { background-color: rgba(128, 0, 128, 0.12) !important; }
.article .asm-highlight-8 { background-color: rgba(102, 102, 102, 0.14) !important; }
.article .asm-highlight-9 { background-color: rgba(170, 34, 255, 0.12) !important; }
.article .asm-highlight-10 { background-color: rgba(0, 128, 0, 0.12) !important; }
.article .asm-highlight-11 { background-color: rgba(160, 160, 0, 0.16) !important; }

.article .asm-highlight-0:hover { background-color: rgba(64, 128, 128, 0.34) !important; }
.article .asm-highlight-1:hover { background-color: rgba(0, 128, 0, 0.30) !important; }
.article .asm-highlight-2:hover { background-color: rgba(25, 23, 124, 0.28) !important; }
.article .asm-highlight-3:hover { background-color: rgba(186, 33, 33, 0.28) !important; }
.article .asm-highlight-4:hover { background-color: rgba(0, 0, 255, 0.24) !important; }
.article .asm-highlight-5:hover { background-color: rgba(188, 122, 0, 0.30) !important; }
.article .asm-highlight-6:hover { background-color: rgba(0, 160, 0, 0.28) !important; }
.article .asm-highlight-7:hover { background-color: rgba(128, 0, 128, 0.24) !important; }
.article .asm-highlight-8:hover { background-color: rgba(102, 102, 102, 0.28) !important; }
.article .asm-highlight-9:hover { background-color: rgba(170, 34, 255, 0.24) !important; }
.article .asm-highlight-10:hover { background-color: rgba(0, 128, 0, 0.24) !important; }
.article .asm-highlight-11:hover { background-color: rgba(160, 160, 0, 0.30) !important; }

.article .asm-highlight-dim-0 { background-color: rgba(64, 128, 128, 0.06) !important; }
.article .asm-highlight-dim-1 { background-color: rgba(0, 128, 0, 0.05) !important; }
.article .asm-highlight-dim-2 { background-color: rgba(25, 23, 124, 0.05) !important; }
.article .asm-highlight-dim-3 { background-color: rgba(186, 33, 33, 0.05) !important; }
.article .asm-highlight-dim-4 { background-color: rgba(0, 0, 255, 0.04) !important; }
.article .asm-highlight-dim-5 { background-color: rgba(188, 122, 0, 0.05) !important; }
.article .asm-highlight-dim-6 { background-color: rgba(0, 160, 0, 0.05) !important; }
.article .asm-highlight-dim-7 { background-color: rgba(128, 0, 128, 0.04) !important; }
.article .asm-highlight-dim-8 { background-color: rgba(102, 102, 102, 0.05) !important; }
.article .asm-highlight-dim-9 { background-color: rgba(170, 34, 255, 0.04) !important; }
.article .asm-highlight-dim-10 { background-color: rgba(0, 128, 0, 0.04) !important; }
.article .asm-highlight-dim-11 { background-color: rgba(160, 160, 0, 0.05) !important; }

.article svg.assembly-view * .relation.highlight-0 { fill: rgb(64, 128, 128) !important; }
.article svg.assembly-view * .relation.highlight-1 { fill: rgb(0, 128, 0) !important; }
.article svg.assembly-view * .relation.highlight-2 { fill: rgb(25, 23, 124) !important; }
.article svg.assembly-view * .relation.highlight-3 { fill: rgb(186, 33, 33) !important; }
.article svg.assembly-view * .relation.highlight-4 { fill: rgb(0, 0, 255) !important; }
.article svg.assembly-view * .relation.highlight-5 { fill: rgb(188, 122, 0) !important; }
.article svg.assembly-view * .relation.highlight-6 { fill: rgb(0, 160, 0) !important; }
.article svg.assembly-view * .relation.highlight-7 { fill: rgb(128, 0, 128) !important; }
.article svg.assembly-view * .relation.highlight-8 { fill: rgb(102, 102, 102) !important; }
.article svg.assembly-view * .relation.highlight-9 { fill: rgb(170, 34, 255) !important; }
.article svg.assembly-view * .relation.highlight-10 { fill: rgb(0, 128, 0) !important; }
.article svg.assembly-view * .relation.highlight-11 { fill: rgb(160, 160, 0) !important; }