/*
! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Ensure the default browser behavior of the `hidden` attribute.
*/

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"] *)) {
  color: #6d28d9;
  text-decoration: none;
  font-weight: 500;
  transition: colors;
  transition-duration: 150ms;
  transition-property: border-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom-color: #6b7280;
  border-bottom-width: 1px;
}
.prose :where(a):not(:where([class~="not-prose"] *)):hover {
  color: #8b5cf6;
  border-bottom-color: #9ca3af;
}
.prose :where(strong):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(hr):not(:where([class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: #a855f7;
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose :where(code):not(:where([class~="not-prose"] *)) {
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"] *))::before {}
.prose :where(code):not(:where([class~="not-prose"] *))::after {}
.prose :where(a code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"] *)) {
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"] *)) {
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
  content: ;
}
.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
  content: ;
}
.prose :where(table):not(:where([class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
  vertical-align: top;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(video):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(figure):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 0;
}
[x-cloak] { display: none }
.link {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity));
}
.link {
  border-bottom-width: 1px;
}
/* Editorial article layout ------------------------------------------------ */
.article-column {
  max-width: 43rem;
}
.article-prose {
  font-family: "Source Serif 4", Charter, Georgia, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.article-prose h1, .article-prose h2, .article-prose h3, .article-prose h4, .article-prose h5, .article-prose h6 {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  letter-spacing: -0.025em;
}
.article-prose h2,
.article-prose h3 {
  scroll-margin-top: 5rem;
}
/* Mark external links in article prose with a small indicator */
.article-prose a[href^="http"]:not([href*="allanmacgregor.com"])::after {
  content: "\2197";
  font-size: 0.65em;
  margin-left: 0.15em;
  vertical-align: text-top;
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity));
}
.article-prose pre a[href^="http"]::after,
.article-prose a[href^="http"]:has(img)::after {
  content: none;
}
/* Forms -------------------------------------------------------------------- */
.form-label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}
.dark .form-label {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}
.form-input {
  display: block;
  width: 100%;
  border-radius: 0.125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.dark .form-input {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}
.form-input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity));
}
/* Disclosure (expandable details) ------------------------------------------ */
details.disclosure > summary {
  list-style: none;
}
details.disclosure > summary::-webkit-details-marker {
  display: none;
}
/* Dark violet panel -------------------------------------------------------
   Shared by the services page "Why me" callout and the article pull-quote
   (`Amgr.Markdown.Quote`), so the two can't drift apart. Deliberately dark in
   both colour schemes — it's a brand surface, not a themed one. */
.panel-dark {
  position: relative;
  overflow: hidden;
  border-radius: 0.375rem;
  background-color: #16121f;
  background-image: radial-gradient(90% 130% at 90% 8%, rgba(139, 92, 246, 0.3), transparent 55%);
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}
.panel-dark-label {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}
/* Article pull-quote ------------------------------------------------------
   Emitted by Amgr.Markdown.Quote from a ```quote fenced block. Selectors are
   defensive: this sits inside .prose, whose typography plugin styles figure,
   blockquote and figcaption with borders, italics and curly quotes. */
.article-prose .article-quote {
  position: relative;
  overflow: hidden;
  border-radius: 0.375rem;
  background-color: #16121f;
  background-image: radial-gradient(90% 130% at 90% 8%, rgba(139, 92, 246, 0.3), transparent 55%);
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
  padding: 2rem 2.5rem;
  margin: 2.25rem 0;
}
.article-prose .article-quote > .article-quote-label {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
  margin: 0 0 0.875rem;
}
.article-prose .article-quote > .article-quote-body {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-weight: 400;
  quotes: none;
  font-family: "Source Serif 4", Charter, Georgia, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}
.article-prose .article-quote > .article-quote-body p {
  margin: 0 0 0.75rem;
}
.article-prose .article-quote > .article-quote-body p:last-child {
  margin-bottom: 0;
}
.article-prose .article-quote > .article-quote-body p::before,
.article-prose .article-quote > .article-quote-body p::after {
  content: none;
}
.article-prose .article-quote > .article-quote-body strong {
  font-weight: 500 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(196 181 253 / var(--tw-text-opacity)) !important;
}
.article-prose .article-quote > .article-quote-body a {
  --tw-text-opacity: 1 !important;
  color: rgb(221 214 254 / var(--tw-text-opacity)) !important;
  border-bottom-color: rgba(196, 181, 253, 0.5);
}
.article-prose .article-quote > .article-quote-cite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.625rem;
  margin: 1.125rem 0 0;
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
.article-prose .article-quote > .article-quote-cite::before {
  content: "—";
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity));
}
.article-prose .article-quote > .article-quote-cite a {
  --tw-text-opacity: 1 !important;
  color: rgb(229 231 235 / var(--tw-text-opacity)) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.6);
}
.article-prose .article-quote > .article-quote-cite a:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
/* The external-link arrow is for body prose; the attribution has its own mark */
.article-prose .article-quote a[href^="http"]::after {
  content: none;
}
/* gray-400, not 500: on #16121f the latter measures 3.81:1 and fails AA */
.article-prose .article-quote > .article-quote-cite .article-quote-role {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
@media (max-width: 640px) {
  .article-prose .article-quote {
    padding: 1.5rem 1.5rem;
  }

  .article-prose .article-quote > .article-quote-body {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
/* Footnotes & sidenotes --------------------------------------------------- */
.footnote-ref {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
  font-size: 0.75em;
  vertical-align: super;
  cursor: pointer;
}
.sidenotes {
  position: relative;
  counter-reset: sidenote;
}
.sidenote {
  display: none;
  counter-increment: sidenote;
}
.sidenote::before {
  content: counter(sidenote);
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity));
  font-size: 0.7rem;
  margin-right: 0.375rem;
  vertical-align: super;
}
.sidenote .footnote-backref {
  display: none;
}
.sidenote.is-active {
  display: block;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  border-left: 3px solid #d1d5db;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4b5563;
}
.sidenote.is-active p {
  margin: 0;
}
@media (min-width: 1280px) {
  .sidenotes.has-sidenotes {
    overflow: visible;
  }

  /* The TOC floats in the same right rail as the sidenote annotations.
     footnotes.js starts laying sidenotes out below it to avoid overlap.
     Rail dimensions are sized so the article column (43rem), this rail,
     and the 16rem promo sidebar all fit inside the max-w-7xl container. */
  .sidenotes .article-toc {
    position: absolute;
    top: 0;
    right: -15rem;
    width: 13.5rem;
    margin-bottom: 0;
    font-size: 0.8rem;
  }

  .sidenote {
    display: block;
    position: absolute;
    right: -15rem;
    width: 13.5rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #4b5563;
  }

  .sidenote.is-highlighted {
    background-color: #fef9c3;
    border-radius: 0.25rem;
    padding: 0.25rem 0.375rem;
    transition: background-color 0.6s ease-out;
  }

  .sidenote p {
    margin-top: 0.25rem;
  }
}
@media print {
  .sidenote {
    display: none;
  }
}
/* Masthead cursor blink — toggled by logo-type.js after the typewriter finishes */
@keyframes logo-blink {
  50%, 100% {
    opacity: 0;
  }
}
.logo-cursor-blink {
  animation: logo-blink 1.1s step-end infinite;
}
/* --- Details of care --------------------------------------------------- */
/* Text selection is a brand moment */
::-moz-selection {
  background-color: rgba(139, 92, 246, 0.22);
}
::selection {
  background-color: rgba(139, 92, 246, 0.22);
}
.dark ::-moz-selection {
  background-color: rgba(139, 92, 246, 0.38);
}
.dark ::selection {
  background-color: rgba(139, 92, 246, 0.38);
}
/* Tinted scrollbars in dark mode — the last unthemed surface */
.dark {
  scrollbar-color: #3f3954 #111827;
}
/* Section break inside article prose. divider.js swaps each markdown `---`
   <hr> for the violet-pipe mark — the Elixir pipe operator flanked by rules,
   a violet shimmer flowing through: section |> next_section. */
.article-break {
  display: flex;
  justify-content: center;
  margin: 3em 0;
}
.article-break-mark {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 640 / 80;
}
/* The mark's violet is tuned to glow against the dark surface; on the light
   surface it washes out, so deepen and saturate it there (dark mode is left
   untouched). */
html:not(.dark) .article-break-mark {
  filter: brightness(0.72) saturate(1.3);
}
/* Editorial end mark at the close of every article — a secret button.
   Injected by endmark.js as a real element so it can take a click and
   type out its reveal. Falls back to a plain ∎ if JS never runs. */
.article-endmark {
  display: flex;
  align-items: baseline;
  gap: 0.75ch;
  margin-top: 2.5rem;
  line-height: 1;
}
.article-endmark-mark {
  flex: none;
  color: #8b5cf6;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: transform 150ms ease-out, color 150ms ease-out;
}
.article-endmark-mark:hover {
  color: #7c3aed;
  transform: rotate(45deg);
}
.dark .article-endmark-mark:hover {
  color: #c4b5fd;
}
.article-endmark-mark.is-found {
  cursor: default;
}
.article-endmark-msg {
  font-family: "Fira Code VF", "Fira Code", monospace;
  font-size: 0.8125rem;
  color: #807e93;
}
.article-endmark-cursor {
  color: #8b5cf6;
}
/* Dateline whisper — the article's secret byline. byline.js turns the date
   into a quiet button; click it and a margin note types out beside it. */
.byline-date {
  cursor: pointer;
  transition: color 150ms ease-out;
}
.byline-date:hover {
  color: #7c3aed;
}
.dark .byline-date:hover {
  color: #c4b5fd;
}
.byline-whisper {
  margin-left: 0.25ch;
  font-family: "Fira Code VF", "Fira Code", monospace;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: #807e93;
}
.byline-whisper-cursor {
  color: #8b5cf6;
}
/* Heading anchors — a violet # that fades in on hover, click to copy */
.heading-anchor {
  margin-left: 0.4em;
  font-family: "Fira Code VF", "Fira Code", monospace;
  font-weight: 400;
  font-size: 0.85em;
  color: #a78bfa;
  text-decoration: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}
.heading-anchor:hover {
  color: #7c3aed;
}
.dark .heading-anchor:hover {
  color: #c4b5fd;
}
@media (hover: none) {
  .heading-anchor {
    opacity: 0.45;
  }
}
/* --- IEx console easter egg --------------------------------------------- */
#iex-console {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: min(42vh, 22rem);
  display: flex;
  flex-direction: column;
  background-color: #16141f;
  border-top: 2px solid #8b5cf6;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  font-family: "Fira Code VF", "Fira Code", monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #e2e2ea;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
#iex-console.iex-open {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  #iex-console {
    transition: none;
  }
}
.iex-bar {
  flex: none;
  padding: 0.4rem 1rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #a78bfa;
  border-bottom: 1px solid #2b2738;
  display: flex;
  justify-content: space-between;
}
.iex-bar kbd {
  color: #807e93;
  letter-spacing: 0.1em;
}
.iex-out {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem 0.25rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.iex-out .iex-echo { color: #807e93; }
.iex-out .iex-result { color: #9dd6b0; }
.iex-out .iex-error { color: #f08fa8; }
.iex-out .iex-info { color: #b1aec2; }
.iex-out a { color: #c4b5fd; text-decoration: underline; }
.iex-line {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: 0.25rem 1rem 0.85rem;
}
.iex-prompt {
  color: #c4b5fd;
  white-space: nowrap;
}
.iex-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e2e2ea;
  font: inherit;
  caret-color: #8b5cf6;
}
/* Footer hint */
.iex-hint {
  font-family: "Fira Code VF", "Fira Code", monospace;
  font-size: 0.75rem;
  color: #9ca3af;
  transition: color 150ms ease-out;
}
.iex-hint:hover {
  color: #8b5cf6;
}
/* Violet rain overlay */
#violet-rain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  transition: opacity 600ms ease-out;
}
/* Simulations --------------------------------------------------------------
   Interactive concept animations, mounted by assets/js/viz/. Emitted either by
   `Amgr.Markdown.Viz` from a ```viz fenced block or directly by the dev-only
   /lab workbench.

   Everything the renderer draws is a semantic class plus data attributes; all
   colour decisions live here. That's what lets a scene be written without
   thinking about dark mode, and it's why the JS never mentions a hex value.

   Deliberately theme-adaptive rather than a `.panel-dark` brand surface: an
   article may carry several of these, and a run of black rectangles down a
   light page reads as heavy in a way one pull-quote does not. The violet stays
   in both themes — it's the token colour, and the tokens are the subject. */
.viz {
  /* Surfaces and structure are viz-specific and set per theme below. */
  --viz-bg: #fbfaff;
  --viz-edge: rgba(124, 58, 237, 0.14);
  --viz-wire: #d8d4e8;
  --viz-node: #ffffff;
  --viz-node-line: #b7b2cc;
  --viz-slot: #ece9f6;
  --viz-slot-line: #cfc9e4;
  --viz-fill: #8b5cf6;
  --viz-fill-soft: rgba(139, 92, 246, 0.18);
  --viz-token: #7c3aed;
  --viz-text: #2f2b3a;
  /* Tinted from the surface's own violet rather than neutral gray, and dark
     enough to clear 4.5:1 on it — the previous faint measured 2.44:1 and it
     carries every axis label and counter caption on the site. */
  --viz-muted: #5f5a70;
  --viz-faint: #6f6a83;

  /* Semantic colour is inherited from the code-block theme rather than
     redeclared, so a post's simulations and its code samples can't drift into
     two different palettes. These need no dark-mode branch: syntax.css
     redefines the --code-* values under .dark and custom properties resolve at
     use time, so they follow the theme on their own.

     Deliberately not a traffic light. Emerald-and-red is a hue pair that
     belongs to dashboards, sits badly beside violet, and fails for the ~8% of
     men who can't separate the two. The code theme's teal / amber / rose runs
     cool-to-warm instead — one perceptual axis, calm to hot, already blessed
     as part of the site's identity. */
  --viz-good: var(--code-type);        /* teal  — healthy, expected      */
  --viz-warn: var(--code-atom);        /* amber — congested, under strain */
  --viz-bad: var(--code-error);        /* rose  — dropped, failing        */
  --viz-token-alt: var(--code-atom);   /* the expensive class of work     */
  --viz-wire-blocked: var(--code-atom);

  display: block;
  margin: 0;
}
.dark .viz {
  --viz-bg: #16121f;
  --viz-edge: rgba(139, 92, 246, 0.26);
  --viz-wire: #3b3450;
  --viz-node: #221c30;
  --viz-node-line: #4c4366;
  --viz-slot: #1e1a2b;
  --viz-slot-line: #3d3552;
  --viz-fill: #a78bfa;
  --viz-fill-soft: rgba(167, 139, 250, 0.22);
  --viz-token: #c4b5fd;
  --viz-text: #e5e2ee;
  --viz-muted: #a9a3bd;
  --viz-faint: #8f88a8;
}
/* Stage ------------------------------------------------------------------- */
.viz-title {
  margin: 0 0 0.5rem;
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--viz-text);
}
.viz-canvas {
  position: relative;
  border-radius: 0.375rem;
  background-color: var(--viz-bg);
  background-image: radial-gradient(120% 140% at 88% 4%, var(--viz-fill-soft), transparent 58%);
  border: 1px solid var(--viz-edge);
  overflow: hidden;
}
.viz-stage {
  display: block;
  width: 100%;
  height: auto;
}
.viz-wire {
  fill: none;
  stroke: var(--viz-wire);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke 200ms ease-out;
}
/* A jammed wire is the single most important state in the whole system: it's
   backpressure, visible, at the moment it happens. */
.viz-wire[data-blocked="true"] {
  stroke: var(--viz-wire-blocked);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}
.viz-node {
  fill: var(--viz-node);
  stroke: var(--viz-node-line);
  stroke-width: 1.25;
}
.viz-node-source {
  fill: var(--viz-fill-soft);
  stroke: var(--viz-fill);
}
.viz-node-mirror,
.viz-node-router {
  fill: var(--viz-fill);
  stroke: none;
}
.viz-node[data-stalled="true"] {
  fill: none;
  stroke-dasharray: 4 3;
  stroke: var(--viz-faint);
}
.viz-slot {
  fill: var(--viz-slot);
  stroke: var(--viz-slot-line);
  stroke-width: 1;
  transition: fill 120ms linear;
}
.viz-slot[data-filled="true"] {
  fill: var(--viz-fill-soft);
  stroke: var(--viz-fill);
}
.viz-slot[data-last="true"] {
  stroke: var(--viz-wire-blocked);
  stroke-dasharray: 3 2;
}
.viz-server {
  fill: var(--viz-node);
  stroke: var(--viz-node-line);
  stroke-width: 1.25;
}
.viz-server[data-busy="true"] {
  fill: var(--viz-fill-soft);
  stroke: var(--viz-fill);
}
.viz-server-progress {
  fill: var(--viz-fill);
  stroke: none;
}
.viz-token {
  fill: var(--viz-token);
  stroke: none;
}
.viz-token[data-tag="heavy"],
.viz-token[data-tag="burst"] {
  fill: var(--viz-token-alt);
}
.viz-token[data-serving="true"] {
  fill: var(--viz-fill);
}
/* Waiting far longer than it takes to serve. Two bands only, warming toward
   the palette's amber and then its rose — the same cool-to-warm axis the rest
   of the system uses, so it needs no separate key. A token that has been
   sitting is legible as a token, without a counter to explain it. */
.viz-token[data-age="1"] { fill: var(--viz-warn); }
.viz-token[data-age="2"] { fill: var(--viz-bad); }
.viz-token[data-state="dropped"] {
  fill: var(--viz-bad);
}
.viz-token[data-state="completed"] {
  fill: var(--viz-good);
}
/* Stage typography -------------------------------------------------------
   Six overlapping roles at six unrelated sizes had accumulated. One scale,
   one rule for family: sans for names and prose, mono only for code,
   identifiers and measurements — never as a costume for "technical". */
.viz-node-label,
.viz-pipe-title,
.viz-pipe-label,
.viz-t-label {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  fill: var(--viz-text);
}
.viz-pipe-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.viz-node-label,
.viz-pipe-label,
.viz-t-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
/* Asides and running commentary. */
.viz-pipe-note,
.viz-pipe-halt {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 10.5px;
  fill: var(--viz-muted);
}
.viz-pipe-halt {
  fill: var(--viz-warn);
  font-weight: 600;
}
/* The one number a scene wants read from across the room, and its caption. */
.viz-pipe-counter {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  fill: var(--viz-text);
}
.viz-pipe-counter-label {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--viz-muted);
}
/* Code, identifiers, measurements. Earns the mono. */
.viz-node-sub,
.viz-pipe-code,
.viz-axis-label,
.viz-cell-value,
.viz-row-label,
.viz-t-code {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  fill: var(--viz-muted);
}
.viz-axis-label {
  font-size: 9.5px;
  fill: var(--viz-faint);
}
.viz-cell-value,
.viz-row-label {
  fill: var(--viz-text);
}
.viz-track-tag {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 9.5px;
  font-weight: 500;
  fill: var(--viz-muted);
}
.viz-node-sub[data-alarm="true"] {
  fill: var(--viz-bad);
  font-weight: 600;
}
/* Domain glyphs -----------------------------------------------------------
   Node bodies that look like what they are. Simulation type decides how work
   moves; `visual.kind` decides the picture, so a queue can draw as a relation
   or a process without changing its mechanics. */
.viz-domain {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--viz-faint);
}
/* A database relation */
.viz-table {
  fill: var(--viz-node);
  stroke: var(--viz-node-line);
  stroke-width: 1.25;
}
.viz-table-head {
  fill: var(--viz-fill-soft);
  stroke: none;
}
.viz-table-row {
  fill: none;
  stroke: var(--viz-slot-line);
  stroke-width: 0.9;
}
.viz-table-row[data-filled="true"] {
  fill: var(--viz-fill-soft);
  stroke: var(--viz-fill);
}
/* A row whose scheduled_at is still in the future: present, not yet visible. */
.viz-table-row[data-state="claimed"] {
  fill: var(--viz-fill);
  stroke: var(--viz-fill);
}
.viz-table-row[data-state="scheduled"] {
  fill: none;
  stroke: var(--viz-warn);
  stroke-dasharray: 2 2;
}
/* State that lives in a process — dashed, because it doesn't outlive it */
.viz-memory {
  fill: none;
  stroke: var(--viz-faint);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}
.viz-memory-row {
  fill: none;
  stroke: var(--viz-slot-line);
  stroke-width: 0.9;
}
.viz-memory-row[data-filled="true"] {
  fill: var(--viz-fill-soft);
  stroke: var(--viz-fill);
}
/* A lock */
.viz-lock-body {
  fill: var(--viz-slot);
  stroke: var(--viz-node-line);
  stroke-width: 1.25;
}
.viz-lock-body[data-held="true"] {
  fill: var(--viz-warn);
  stroke: var(--viz-warn);
}
.viz-lock-shackle {
  fill: none;
  stroke: var(--viz-node-line);
  stroke-width: 2;
  stroke-linecap: round;
}
.viz-lock-shackle[data-held="true"] {
  stroke: var(--viz-warn);
}
/* A B-tree, and the pages a sequential scan reads */
.viz-index-node {
  fill: var(--viz-slot);
  stroke: var(--viz-slot-line);
  stroke-width: 0.9;
}
.viz-index-node[data-path="true"] {
  fill: var(--viz-fill-soft);
  stroke: var(--viz-fill);
}
.viz-page {
  fill: var(--viz-slot);
  stroke: var(--viz-slot-line);
  stroke-width: 0.9;
}
/* A batch tray */
.viz-tray {
  fill: none;
  stroke: var(--viz-node-line);
  stroke-width: 1.25;
}
.viz-tray-chip {
  fill: none;
  stroke: var(--viz-slot-line);
  stroke-width: 0.9;
}
.viz-tray-chip[data-filled="true"] {
  fill: var(--viz-fill-soft);
  stroke: var(--viz-fill);
}
.viz-tray-timer {
  fill: var(--viz-warn);
  stroke: none;
}
/* Token species ------------------------------------------------------------
   Shapes have to survive being six pixels wide, so this is a small alphabet
   chosen to be told apart at a glance rather than to be literal pictures. */
.viz-token-shape {
  fill: var(--viz-token);
  stroke: none;
}
.viz-token-shape[data-tag="heavy"],
.viz-token-shape[data-tag="retry"],
.viz-token-shape[data-tag="stalled"],
.viz-token-shape[data-tag="write"],
.viz-token-shape[data-tag="poison"] {
  fill: var(--viz-token-alt);
}
.viz-token-shape[data-serving="true"] { fill: var(--viz-fill); }
.viz-token-shape[data-state="dropped"] { fill: var(--viz-bad); }
.viz-token-shape[data-state="completed"] { fill: var(--viz-good); }
/* Carrying a lock. The ring is the visible span between acquire and release. */
.viz-token[data-locked="true"],
.viz-token-shape[data-locked="true"] {
  stroke: var(--viz-warn);
  stroke-width: 1.5;
}
/* Callouts ----------------------------------------------------------------
   Transient annotations the model emits and the renderer used to discard. */
.viz-callout {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--viz-muted);
}
.viz-callout[data-kind="locked"] { fill: var(--viz-warn); }
.viz-callout[data-kind="conflict"] { fill: var(--viz-bad); }
.viz-callout[data-kind="lost"] { fill: var(--viz-bad); }
.viz-callout[data-kind="rescued"] { fill: var(--viz-good); }
/* Timeline scenes ---------------------------------------------------------
   Where the horizontal axis is time rather than distance and nothing travels.
   A wait is a length you compare by eye. */
.viz-lane {
  fill: var(--viz-slot);
  stroke: none;
  opacity: 0.55;
}
.viz-poll-tick {
  stroke: var(--viz-warn);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.75;
}
.viz-wait-bar {
  fill: var(--viz-fill);
  stroke: none;
}
/* Still waiting to be discovered — the bar has no end yet. */
.viz-wait-bar[data-state="waiting"] {
  fill: none;
  stroke: var(--viz-warn);
  stroke-width: 1.25;
}
/* Logarithmic-time scenes -------------------------------------------------
   Where the axis spans orders of magnitude and the *spacing* of events is the
   whole argument. */
.viz-log-rule {
  stroke: var(--viz-edge);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
/* The window in which a failing dependency is still unhealthy. */
.viz-log-band {
  fill: var(--viz-warn);
  stroke: none;
  opacity: 0.07;
}
.viz-attempt-thread {
  stroke: var(--viz-slot-line);
  stroke-width: 1.25;
}
.viz-attempt {
  fill: var(--viz-fill);
  stroke: none;
  transition: opacity 140ms linear;
}
.viz-attempt[data-state="ok"] { fill: var(--viz-good); }
.viz-attempt[data-state="discarded"] { fill: var(--viz-bad); }
/* Occupancy / Gantt scenes ------------------------------------------------ */
.viz-channel {
  fill: var(--viz-slot);
  stroke: none;
  opacity: 0.6;
}
.viz-occupancy {
  fill: var(--viz-fill);
  stroke: none;
}
/* A stalled response is the thing sitting on the channel. */
.viz-occupancy[data-tag="stalled"] {
  fill: var(--viz-token-alt);
}
/* Radial / convergence scenes --------------------------------------------- */
.viz-reach {
  /* SVG paths fill black by default; a reach is a line, not a shape. */
  fill: none;
  stroke: var(--viz-fill);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.viz-reach[data-state="blocked"] {
  stroke: var(--viz-bad);
  stroke-dasharray: 3 3;
}
/* Reached the row, did the work, lost the race. Fainter than blocked: the
   transaction isn't being held back, it already finished and was discarded. */
.viz-reach[data-state="lost"] {
  stroke: var(--viz-bad);
  stroke-dasharray: 2 4;
  opacity: 0.6;
}
.viz-worker {
  fill: var(--viz-node);
  stroke: var(--viz-node-line);
  stroke-width: 1.25;
}
.viz-worker[data-state="working"] { fill: var(--viz-fill-soft); stroke: var(--viz-fill); }
.viz-worker[data-state="blocked"] { fill: none; stroke: var(--viz-bad); stroke-dasharray: 3 2; }
.viz-heap-page {
  fill: var(--viz-slot);
  stroke: var(--viz-slot-line);
  stroke-width: 0.7;
}
.viz-heap-page[data-state="hit"] { fill: var(--viz-fill); stroke: var(--viz-fill); }
.viz-heap-page[data-state="swept"] { fill: var(--viz-fill-soft); stroke: var(--viz-fill); }
.viz-descent {
  fill: none;
  stroke: var(--viz-fill);
  stroke-width: 1.25;
}
.viz-fetch-arc {
  fill: none;
  stroke: var(--viz-warn);
  stroke-width: 1;
  opacity: 0.8;
}
/* Pulse scenes ------------------------------------------------------------ */
.viz-timeout-ring { fill: none; stroke: var(--viz-slot-line); stroke-width: 2; }
.viz-timeout-arc { fill: none; stroke: var(--viz-warn); stroke-width: 3; stroke-linecap: round; }
.viz-tray-fill { fill: var(--viz-fill); stroke: none; opacity: 0.75; }
.viz-closure { fill: var(--viz-slot); stroke: none; }
.viz-closure[data-reason="full"] { fill: var(--viz-fill); }
.viz-closure[data-reason="timeout"] { fill: var(--viz-warn); }
/* Convergence scenes ------------------------------------------------------ */
.viz-caller { fill: none; stroke: var(--viz-faint); stroke-width: 1.25; }
.viz-caller[data-state="in"] { fill: var(--viz-fill); stroke: var(--viz-fill); }
/* A transaction that did the work and lost the version check. Hollow like a
   waiter, because it holds nothing — but rose, because unlike a waiter its
   work is gone. */
.viz-caller[data-state="lost"] { fill: none; stroke: var(--viz-bad); stroke-width: 1.5; }
/* The opening a crowd is trying to get through. Deliberately quiet — it is a
   shape you read the *width* of, not a thing that should compete with the
   tokens moving inside it. */
.viz-funnel {
  fill: var(--viz-fill-soft);
  fill-opacity: 0.55;
  stroke: var(--viz-edge);
  stroke-width: 1;
}
/* A single-slot door: the throat is a slit, and saying so in colour costs
   nothing and lands immediately. */
.viz-funnel[data-tight="true"] {
  fill: color-mix(in srgb, var(--viz-warn) 12%, transparent);
  stroke: color-mix(in srgb, var(--viz-warn) 45%, transparent);
}
.viz-door-slot { fill: var(--viz-slot); stroke: var(--viz-node-line); stroke-width: 1.25; }
.viz-door-slot[data-state="busy"] { fill: var(--viz-fill-soft); stroke: var(--viz-fill); }
/* The same row under both strategies, so both states carry the same visual
   weight: a tint plus a coloured edge. A solid amber fill made the locked row
   a blob twice the presence of its twin, and buried the label inside it. */
.viz-hot-row { fill: var(--viz-slot); stroke: var(--viz-node-line); stroke-width: 1.25; }
.viz-hot-row[data-state="locked"] {
  fill: color-mix(in srgb, var(--viz-warn) 16%, var(--viz-bg));
  stroke: var(--viz-warn);
}
.viz-hot-row[data-state="touched"] { fill: var(--viz-fill-soft); stroke: var(--viz-fill); }
/* Readouts ---------------------------------------------------------------- */
.viz-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 0.75rem;
  padding-bottom: 0.125rem;
}
.viz-stat {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 4.5rem;
}
.viz-stat-value {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--viz-text);
  transition: color 200ms ease-out;
}
.viz-stat-label {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--viz-faint);
}
.viz-stat[data-tone="good"] .viz-stat-value { color: var(--viz-good); }
.viz-stat[data-tone="warn"] .viz-stat-value { color: var(--viz-warn); }
.viz-stat[data-tone="bad"] .viz-stat-value { color: var(--viz-bad); }
/* The last ~14s of a metric, under the number it belongs to. Quiet by
   default — it is there to answer "is this still moving?", not to compete
   with the figure above it. */
.viz-spark {
  display: block;
  width: 52px;
  height: 14px;
  margin: 0.125rem 0 0.0625rem;
  overflow: visible;
}
.viz-spark path {
  fill: none;
  stroke: var(--viz-faint);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.viz-stat[data-tone="good"] .viz-spark path { stroke: var(--viz-good); }
.viz-stat[data-tone="warn"] .viz-spark path { stroke: var(--viz-warn); }
.viz-stat[data-tone="bad"] .viz-spark path { stroke: var(--viz-bad); }
@media (prefers-reduced-motion: reduce) {
  .viz-spark path { stroke-width: 1.5; }
}
/* Controls ---------------------------------------------------------------- */
.viz-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--viz-edge);
}
.viz-transport {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.viz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border: 1px solid var(--viz-node-line);
  border-radius: 0.1875rem;
  background: var(--viz-node);
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  color: var(--viz-muted);
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.viz-btn:hover {
  color: var(--viz-token);
  border-color: var(--viz-fill);
}
.viz-btn:focus-visible {
  outline: 2px solid var(--viz-fill);
  outline-offset: 1px;
}
.viz-btn-play {
  width: 1.75rem;
  padding: 0;
}
.viz-btn-play svg {
  width: 0.6875rem;
  height: 0.6875rem;
  fill: currentColor;
}
.viz-btn-play[data-playing="true"] {
  color: var(--viz-token);
  border-color: var(--viz-fill);
}
.viz-btn-action {
  border-color: var(--viz-fill);
  color: var(--viz-token);
}
.viz-speed {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
.viz-speed-label,
.viz-field-name {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--viz-faint);
}
.viz-select {
  min-height: 1.75rem;
  padding: 0 0.375rem;
  border: 1px solid var(--viz-node-line);
  border-radius: 0.1875rem;
  background: var(--viz-node);
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  color: var(--viz-text);
  cursor: pointer;
}
.viz-select:focus-visible {
  outline: 2px solid var(--viz-fill);
  outline-offset: 1px;
}
.viz-params {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.125rem;
}
.viz-field {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 7.5rem;
}
.viz-field[data-type="select"] { min-width: 9.5rem; }
.viz-field[data-type="toggle"] {
  flex-direction: row;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
}
.viz-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.viz-field-value {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--viz-token);
}
.viz-range {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--viz-slot-line);
  cursor: pointer;
}
.viz-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border: none;
  border-radius: 50%;
  background: var(--viz-fill);
  cursor: pointer;
}
.viz-range::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: none;
  border-radius: 50%;
  background: var(--viz-fill);
  cursor: pointer;
}
.viz-range:focus-visible {
  outline: 2px solid var(--viz-fill);
  outline-offset: 3px;
}
.viz-check {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--viz-fill);
  cursor: pointer;
}
/* Legend and caption ------------------------------------------------------ */
.viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.625rem;
}
.viz-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.6875rem;
  color: var(--viz-muted);
}
.viz-legend-swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--viz-token);
}
.viz-legend-swatch[data-tag="heavy"] { background: var(--viz-token-alt); }
.viz-legend-swatch[data-kind="dropped"] { background: var(--viz-bad); }
.viz-legend-swatch[data-kind="busy"] { background: var(--viz-fill); }
.viz-legend-swatch[data-kind="kept"] { background: var(--viz-fill); }
.viz-legend-swatch[data-kind="filtered"] {
  background: transparent;
  border: 1px dashed var(--viz-faint);
}
.viz-legend-swatch[data-kind="untouched"] {
  background: transparent;
  border: 1px dotted var(--viz-edge);
}
.viz-caption,
.viz-error {
  margin: 0.625rem 0 0;
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--viz-muted);
}
.viz-error { color: var(--viz-bad); }
.viz[data-reduced-motion="true"] .viz-canvas::after {
  content: "paused — press play";
  position: absolute;
  right: 0.5rem;
  bottom: 0.375rem;
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.625rem;
  color: var(--viz-faint);
}
/* Pipeline scenes (Stream vs Enum and kin) --------------------------------- */
.viz-cell {
  fill: none;
  stroke: var(--viz-slot-line);
  stroke-width: 1;
  transition: fill 120ms linear;
}
.viz-cell[data-state="kept"] {
  fill: var(--viz-fill-soft);
  stroke: var(--viz-fill);
}
.viz-cell[data-state="active"] {
  fill: var(--viz-fill);
  stroke: var(--viz-fill);
}
.viz-cell[data-state="dropped"] {
  fill: none;
  stroke: var(--viz-faint);
  stroke-dasharray: 2 2;
}
.viz-cell[data-state="untouched"] {
  fill: none;
  stroke: var(--viz-edge);
  stroke-dasharray: 1 3;
}
.viz-cell-value[data-state="active"] { fill: var(--viz-bg); font-weight: 600; }
.viz-cell-value[data-state="dropped"] { fill: var(--viz-faint); }
/* Tree, ring and grid scenes ----------------------------------------------
   Shared by the hand-written scenes via render/parts.js. Same state vocabulary
   as the pipeline cells above, so "active" and "untouched" mean one thing
   across the whole system. */
.viz-dot {
  fill: var(--viz-slot);
  stroke: var(--viz-slot-line);
  stroke-width: 1;
}
.viz-dot[data-state="kept"] { fill: var(--viz-fill-soft); stroke: var(--viz-fill); }
.viz-dot[data-state="active"] { fill: var(--viz-fill); stroke: var(--viz-fill); }
.viz-dot[data-state="untouched"] { fill: none; stroke: var(--viz-faint); stroke-dasharray: 2 2; }
.viz-edge {
  fill: none;
  stroke: var(--viz-wire);
  stroke-width: 1.25;
}
.viz-edge[data-state="active"] { stroke: var(--viz-fill); stroke-width: 1.75; }
.viz-edge[data-state="shared"] { stroke: var(--viz-edge); }
.viz-pipe-counter[data-tone="good"] { fill: var(--viz-good); }
.viz-pipe-counter[data-tone="warn"] { fill: var(--viz-warn); }
.viz-pipe-counter[data-tone="bad"] { fill: var(--viz-bad); }
.viz-pipe-halt[data-tone="good"] { fill: var(--viz-good); }
.viz-pipe-halt[data-tone="bad"] { fill: var(--viz-bad); }
/* Hash ring */
.viz-ring {
  fill: none;
  stroke: var(--viz-wire);
  stroke-width: 1.25;
}
.viz-key {
  stroke-width: 0;
}
.viz-key[data-state="kept"] { fill: var(--viz-fill-soft); stroke: var(--viz-fill); stroke-width: 1; }
.viz-key[data-state="active"] { fill: var(--viz-bad); stroke: none; }
.viz-vnode {
  stroke: var(--viz-fill);
  stroke-width: 2;
  stroke-linecap: round;
}
/* Owner tinting. Six steps around the violet-to-warm range rather than six
   arbitrary hues — node identity is secondary information here, and a rainbow
   would out-shout the thing the scene is actually about. */
.viz-vnode[data-owner="0"] { stroke: var(--viz-fill); }
.viz-vnode[data-owner="1"] { stroke: var(--viz-good); }
.viz-vnode[data-owner="2"] { stroke: var(--viz-warn); }
.viz-vnode[data-owner="3"] { stroke: var(--viz-token); }
.viz-vnode[data-owner="4"] { stroke: var(--viz-bad); }
.viz-vnode[data-owner="5"] { stroke: var(--viz-muted); }
/* Process heaps */
.viz-heap {
  fill: var(--viz-slot);
  stroke: var(--viz-slot-line);
  stroke-width: 1;
}
.viz-heap[data-state="active"] {
  stroke: var(--viz-warn);
  stroke-width: 1.5;
}
.viz-heap-fill {
  fill: var(--viz-fill);
  stroke: none;
  opacity: 0.75;
}
.viz-heap-fill[data-state="active"] {
  fill: var(--viz-warn);
  opacity: 1;
}
/* Retried work is the same request wearing a different hat, so it reads as the
   warm class rather than getting a hue of its own. */
.viz-token[data-tag="retry"],
.viz-token[data-tag="stalled"],
.viz-token[data-tag="locked"],
.viz-token[data-tag="write"] {
  fill: var(--viz-token-alt);
}
.viz-legend-swatch[data-tag="retry"],
.viz-legend-swatch[data-tag="stalled"],
.viz-legend-swatch[data-tag="write"] {
  background: var(--viz-token-alt);
}
.viz-legend-swatch[data-kind="active"] { background: var(--viz-fill); }
.viz-legend-swatch[data-kind="running"] { background: var(--viz-fill); }
/* In-article embed --------------------------------------------------------
   Defensive selectors, same reasoning as the pull-quote: this sits inside
   .prose, whose typography plugin has opinions about figure and figcaption. */
.article-prose .article-viz {
  margin: 2.25rem 0;
}
/* Directed discovery. A reader landing on a running simulation with four
   sliders has no way to know which one carries the point, so this says what to
   do — server-rendered, so it survives without JavaScript. */
.article-prose .article-viz > .article-viz-try {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.625rem 0 0;
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--viz-text);
}
.article-prose .article-viz > .article-viz-try > span {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--viz-fill);
}
.article-prose .article-viz > .article-viz-caption {
  margin: 0.625rem 0 0;
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--viz-muted);
  text-align: left;
}
/* A ```viz block that names a scene we don't have. Dev sees it; a reader
   shouldn't, so it's quiet rather than alarming — the palette's rose on a
   whisper of the same hue, bordered all the way round. */
.article-prose .article-viz-error {
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--viz-bad) 35%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--viz-bad) 7%, transparent);
  color: var(--viz-text);
}
@media (max-width: 640px) {
  .viz-controls { gap: 0.625rem 0.875rem; }
  .viz-field { min-width: 100%; }
  .viz-readouts { gap: 0 1rem; }
  .viz-stat-value { font-size: 0.875rem; }

  /* A scene is drawn on an ~820-unit stage. Fitting that into a 390px phone
     scales it to 0.42, which renders a 9px caption at under 4px and a token
     at two and a half — the picture is technically present and actually
     unreadable. So the stage keeps a floor and the canvas scrolls under it,
     the same bargain a wide code block or table makes. */
  .viz-canvas {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .viz-stage { min-width: 620px; }
}
/* Simulation lab (dev only) ------------------------------------------------
   Styling for /lab. Never reached in a build where the route isn't compiled,
   but it lives here rather than in a separate sheet because the CSS build is
   manual and a second file is a second thing to remember to rebuild. */
.viz-lab-head { margin-bottom: 1.5rem; }
.viz-lab-title {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.dark .viz-lab-title {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}
.viz-lab-title {
  margin: 0;
}
.viz-lab-lede {
  font-family: "Source Serif 4", Charter, Georgia, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}
.dark .viz-lab-lede {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
.viz-lab-lede {
  margin: 0.375rem 0 0;
}
.viz-lab-summary {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
.dark .viz-lab-summary {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
.viz-lab-summary {
  max-width: 46rem;
  margin: 0.5rem 0 0;
}
.viz-lab-back {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
}
.dark .viz-lab-back {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}
.viz-lab-back {
  display: inline-block;
  margin-bottom: 1rem;
}
.viz-lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.75rem;
}
.viz-lab-card {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.dark .viz-lab-card {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
}
.viz-lab-card {
  padding-bottom: 1.25rem;
}
.viz-lab-card-title {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.dark .viz-lab-card-title {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}
.viz-lab-card-title {
  display: block;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.viz-lab-card-title:hover {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
}
.dark .viz-lab-card-title:hover {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}
.viz-lab-card-blurb {
  font-family: "Source Serif 4", Charter, Georgia, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}
.dark .viz-lab-card-blurb {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
.viz-lab-card-blurb {
  margin: 0.375rem 0 0.75rem;
}
.viz-lab-preview { margin-bottom: 0.75rem; }
.viz-lab-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.75rem;
}
.viz-lab-id {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
.dark .viz-lab-id {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
.viz-lab-tag {
  font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
}
.dark .viz-lab-tag {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}
.viz-lab-stage { margin-bottom: 1rem; }
.viz-lab-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin-bottom: 0.875rem;
}
.viz-lab-seed {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.viz-lab-seed-input {
  width: 6rem;
  min-height: 1.75rem;
  padding: 0 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.dark .viz-lab-seed-input {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}
.viz-lab-seed-input {
  border-radius: 0.1875rem;
}
.viz-lab-seed-input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity));
}
.viz-lab-output {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}
.dark .viz-lab-output {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}
.viz-lab-output {
  padding: 0.75rem 0.875rem;
  border-radius: 0.25rem;
  overflow-x: auto;
  white-space: pre;
}
.viz-lab-stage { max-width: 56rem; }
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("/fonts/Inter-Regular-4dd66a113d54a7f9a1ae913049610617.woff2?vsn=d") format("woff2"),
       url("/fonts/Inter-Regular-7c539936c4c8c822b59a1bcc6c08a6ec.woff?vsn=d") format("woff");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("/fonts/SourceSerif4-Roman.var-e9192c2fe0a31fbb3b7cd6a28b2309cd.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("/fonts/SourceSerif4-Italic.var-66c33f6b248f76850cff4a00118c80e4.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/FiraCode-Light-f46c731cb8e64db8e052d4537017cd11.woff2?vsn=d') format('woff2'),
    url("/fonts/FiraCode-Light-3ee54064261b9c60dd7158361a69984e.woff?vsn=d") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/FiraCode-Regular-507cfa03982e436605ea817454931f2f.woff2?vsn=d') format('woff2'),
    url("/fonts/FiraCode-Regular-a79534418cf151b4950f1f4d62a35341.woff?vsn=d") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/FiraCode-Medium-c0ee572c47b2dea2e3d37ee527d8cb14.woff2?vsn=d') format('woff2'),
    url("/fonts/FiraCode-Medium-0ba163e48cc171359978e0da4ff71d90.woff?vsn=d") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/FiraCode-SemiBold-aa0b6c0b856be73eeea1f8c524a2f878.woff2?vsn=d') format('woff2'),
    url("/fonts/FiraCode-SemiBold-f47027f165df32df70e5cd25cdd7681a.woff?vsn=d") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/FiraCode-Bold-46d5e77a7397fed486199ac0e148bbfc.woff2?vsn=d') format('woff2'),
    url("/fonts/FiraCode-Bold-9effcc85d769e18d728a90b52bc336b8.woff?vsn=d") format("woff");
  font-weight: 700;
  font-style: normal;
}
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "Inter var";
    font-weight: 100 900;
    font-style: normal;
    font-named-instance: "Regular";
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url("/fonts/Inter-roman.var-90e8f61d26f65b5ff0acc45ddf6740ea.woff2?vsn=d") format("woff2");
  }

  @font-face {
    font-family: "Inter var";
    font-weight: 100 900;
    font-style: italic;
    font-named-instance: "Italic";
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url("/fonts/Inter-italic.var-2690e3c25733fb852b55b3f8d651a431.woff2?vsn=d") format("woff2");
  }

  @font-face {
    font-family: 'Fira Code VF';
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/FiraCode-VF-4bcf8df5bcb37545cbadd2ef224c2cdc.woff2?vsn=d') format('woff2-variations'),
        url('/fonts/FiraCode-VF-3a803c241d7241c54d2d9a9056959545.woff?vsn=d') format('woff-variations');
  }
}
/* ---------------------------------------------------------------------------
   Code block theme — one token system feeding both highlighters:
   makeup (server-side Elixir) and highlight.js (client-side everything else).
   Light and dark are just two sets of custom-property values.
   --------------------------------------------------------------------------- */
:root {
  --code-bg: #fbfafe;
  --code-border: #e6e3f0;
  --code-rule: #8b5cf6;          /* violet-500 — the editorial top rule  */
  --code-ink: #2a2734;
  --code-muted: #565064;
  --code-keyword: #6d28d9;       /* violet-700 */
  --code-string: #2f7d52;        /* muted moss */
  --code-atom: #a85b08;          /* desaturated amber — numbers, atoms  */
  --code-type: #0f766e;          /* teal — modules, classes, fn heads   */
  --code-comment: #8b8a94;
  --code-error: #be123c;
  --code-label: #6d28d9;
  --code-hll-bg: #f1ecfd;
  --code-inline-bg: #f3effd;
  --code-inline-ink: #5b21b6;
  --code-scroll-shadow: rgba(76, 29, 149, 0.12);
}
.dark {
  --code-bg: #16141f;
  --code-border: #2b2738;
  --code-rule: #8b5cf6;
  --code-ink: #e2e2ea;
  --code-muted: #b1aec2;
  --code-keyword: #c4b5fd;       /* violet-300 */
  --code-string: #9dd6b0;        /* sage */
  --code-atom: #e3b584;          /* sand */
  --code-type: #7fd0c2;          /* soft teal */
  --code-comment: #807e93;
  --code-error: #f08fa8;
  --code-label: #a78bfa;
  --code-hll-bg: #221d36;
  --code-inline-bg: #251f38;
  --code-inline-ink: #cabffc;
  --code-scroll-shadow: rgba(0, 0, 0, 0.55);
}
/* --- Block chrome ---------------------------------------------------------- */
.prose pre {
  position: relative;
  overflow: hidden;
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  border-top: 2px solid var(--code-rule);
  border-radius: 0;
  color: var(--code-ink);
  padding: 2.4rem 0 0 0;
}
/* The inner code element is the scroller, so the label and copy button
   stay put while long lines scroll. Gradient pairs render edge shadows
   only when there is hidden overflow (background-attachment trick). */
.prose pre code {
  display: block;
  overflow-x: auto;
  padding: 0 1.25rem 1.15rem;
  background:
    linear-gradient(90deg, var(--code-bg) 40%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(270deg, var(--code-bg) 40%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, var(--code-scroll-shadow), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, var(--code-scroll-shadow), transparent) right center;
  background-repeat: no-repeat;
  background-size: 3rem 100%, 3rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.75rem;
  left: 1.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--code-label);
}
.code-copy {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--code-comment);
  padding: 0.15rem 0.25rem;
  opacity: 0;
  transition: opacity 150ms ease-out, color 150ms ease-out;
}
.prose pre:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}
.code-copy:hover {
  color: var(--code-label);
}
.code-copy-done,
.code-copy-done:hover {
  color: var(--code-string);
  opacity: 1;
}
@media (hover: none) {
  .code-copy {
    opacity: 1;
  }
}
/* Let code breathe a step wider than the prose column on large screens.
   The right bleed stays shy of the sidenote rail's gutter. */
@media (min-width: 1024px) {
  .prose pre {
    margin-left: -1.25rem;
    margin-right: -0.5rem;
  }
}
/* --- Inline code ------------------------------------------------------------ */
.prose code.inline {
  color: var(--code-inline-ink);
  background-color: var(--code-inline-bg);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
}
/* --- Shared token colors: makeup (server-side Elixir) ----------------------- */
.makeup {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--code-ink);
}
.makeup .unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Highlighted lines (.hll) — violet wash with an inset rule, full-bleed
   across the scroller's padding. */
.makeup .hll {
  display: block;
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
  background-color: var(--code-hll-bg);
  box-shadow: inset 2px 0 0 var(--code-rule);
}
.makeup .k, .makeup .kc, .makeup .kd, .makeup .kn, .makeup .kp,
.makeup .kr, .makeup .kt, .makeup .nb, .makeup .bp, .makeup .nt {
  color: var(--code-keyword);
}
.makeup .s, .makeup .s1, .makeup .s2, .makeup .sa, .makeup .sb,
.makeup .sc, .makeup .sd, .makeup .sh, .makeup .si, .makeup .sr,
.makeup .sx, .makeup .dl, .makeup .gi {
  color: var(--code-string);
}
.makeup .m, .makeup .mb, .makeup .mf, .makeup .mh, .makeup .mi,
.makeup .mo, .makeup .il, .makeup .l, .makeup .ld, .makeup .ss,
.makeup .na, .makeup .no, .makeup .se, .makeup .cp, .makeup .cpf {
  color: var(--code-atom);
}
.makeup .nc, .makeup .nn, .makeup .nd, .makeup .ne, .makeup .nf,
.makeup .fm {
  color: var(--code-type);
}
.makeup .n, .makeup .ni, .makeup .nl, .makeup .nv, .makeup .nx,
.makeup .py, .makeup .vc, .makeup .vg, .makeup .vi, .makeup .vm {
  color: var(--code-ink);
}
.makeup .o, .makeup .ow, .makeup .p {
  color: var(--code-muted);
}
.makeup .c, .makeup .c1, .makeup .ch, .makeup .cm, .makeup .cs,
.makeup .gu {
  color: var(--code-comment);
  font-style: italic;
}
.makeup .err, .makeup .gd {
  color: var(--code-error);
}
.makeup .ge { font-style: italic; }
.makeup .gs { font-weight: bold; }
/* --- Shared token colors: highlight.js (client-side) ------------------------ */
.hljs {
  color: var(--code-ink);
}
.hljs-keyword, .hljs-doctag, .hljs-formula, .hljs-selector-tag,
.hljs-name {
  color: var(--code-keyword);
}
.hljs-string, .hljs-regexp, .hljs-meta-string, .hljs-addition {
  color: var(--code-string);
}
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-link,
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable,
.hljs-selector-attr, .hljs-selector-pseudo {
  color: var(--code-atom);
}
.hljs-title, .hljs-section, .hljs-type, .hljs-built_in,
.hljs-builtin-name, .hljs-class .hljs-title, .hljs-selector-id,
.hljs-selector-class {
  color: var(--code-type);
}
.hljs-meta, .hljs-tag, .hljs-subst, .hljs-params {
  color: var(--code-muted);
}
.hljs-comment, .hljs-quote {
  color: var(--code-comment);
  font-style: italic;
}
.hljs-deletion {
  color: var(--code-error);
}
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
.hljs-link { text-decoration: underline; }
.dark .prose strong {
  --tw-text-opacity: 1 !important;
  color: rgb(249 250 251 / var(--tw-text-opacity)) !important;
}
.dark .link, .dark .prose a, .dark .prose a code {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
}
.dark .link:focus, .dark .prose a:focus, .dark .prose a:focus code {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity));
}
.dark .link:visited, .dark .prose a:visited, .dark .prose a:visited code {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity));
}
.dark .link:hover, .dark .prose a:hover, .dark .prose a:hover code {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity));
}
.dark .sidenote {
  color: #9ca3af;
}
.dark .sidenote::before {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}
.dark .sidenote.is-active {
  color: #9ca3af;
  border-left-color: #4b5563;
  background-color: #1f2937;
}
.dark .sidenote.is-highlighted {
  background-color: rgba(217, 180, 60, 0.15);
}
/* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}
.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}
.phx-disconnected{
  cursor: wait;
}
.phx-disconnected *{
  pointer-events: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.visible {
  visibility: visible;
}
.\!visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.ml-2 {
  margin-left: 0.5rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mt-auto {
  margin-top: auto;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.ml-4 {
  margin-left: 1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.h-12 {
  height: 3rem;
}
.h-44 {
  height: 11rem;
}
.h-6 {
  height: 1.5rem;
}
.h-16 {
  height: 4rem;
}
.h-5 {
  height: 1.25rem;
}
.h-9 {
  height: 2.25rem;
}
.h-2 {
  height: 0.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-full {
  height: 100%;
}
.min-h-\[65vh\] {
  min-height: 65vh;
}
.w-12 {
  width: 3rem;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-0 {
  width: 0px;
}
.w-44 {
  width: 11rem;
}
.w-6 {
  width: 1.5rem;
}
.w-5 {
  width: 1.25rem;
}
.w-9 {
  width: 2.25rem;
}
.w-60 {
  width: 15rem;
}
.w-2 {
  width: 0.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-none {
  max-width: none;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[46rem\] {
  max-width: 46rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.origin-top {
  transform-origin: top;
}
.translate-x-3 {
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-3 {
  --tw-translate-y: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-0 {
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-px {
  gap: 1px;
}
.gap-4 {
  gap: 1rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-0 {
  row-gap: 0px;
}
.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-t-4 {
  border-top-width: 4px;
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-brand-400 {
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity));
}
.border-\[\#FDD44F\] {
  --tw-border-opacity: 1;
  border-color: rgb(253 212 79 / var(--tw-border-opacity));
}
.border-brand-300 {
  --tw-border-opacity: 1;
  border-color: rgb(196 181 253 / var(--tw-border-opacity));
}
.border-brand-200 {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 254 / var(--tw-border-opacity));
}
.border-transparent {
  border-color: transparent;
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity));
}
.border-brand-500 {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity));
}
.border-t-brand-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(139 92 246 / var(--tw-border-opacity));
}
.border-t-\[\#0047B6\] {
  --tw-border-opacity: 1;
  border-top-color: rgb(0 71 182 / var(--tw-border-opacity));
}
.bg-brand-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-brand-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity));
}
.bg-brand-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
}
.bg-brand-500\/10 {
  background-color: rgb(139 92 246 / 0.1);
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-gray-500\/10 {
  background-color: rgb(107 114 128 / 0.1);
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.p-5 {
  padding: 1.25rem;
}
.p-8 {
  padding: 2rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-center {
  text-align: center;
}
.font-serif {
  font-family: "Source Serif 4", Charter, Georgia, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.font-mono {
  font-family: Fira Code VF, Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[11px\] {
  font-size: 11px;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.font-medium {
  font-weight: 500;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-snug {
  line-height: 1.375;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-tight {
  line-height: 1.25;
}
.leading-none {
  line-height: 1;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-brand-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-\[\#0047B6\] {
  --tw-text-opacity: 1;
  color: rgb(0 71 182 / var(--tw-text-opacity));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-brand-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity));
}
.text-brand-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}
.text-brand-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity));
}
.text-brand-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.decoration-brand-400 {
  -webkit-text-decoration-color: #a78bfa;
          text-decoration-color: #a78bfa;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-brand-500\/40 {
  --tw-ring-color: rgb(139 92 246 / 0.4);
}
.ring-amber-500\/40 {
  --tw-ring-color: rgb(245 158 11 / 0.4);
}
.ring-orange-500\/40 {
  --tw-ring-color: rgb(249 115 22 / 0.4);
}
.ring-red-500\/40 {
  --tw-ring-color: rgb(239 68 68 / 0.4);
}
.ring-gray-500\/40 {
  --tw-ring-color: rgb(107 114 128 / 0.4);
}
.ring-brand-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(221 214 254 / var(--tw-ring-opacity));
}
.ring-gray-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:border-brand-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity));
}
.hover\:border-brand-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity));
}
.hover\:border-brand-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(196 181 253 / var(--tw-border-opacity));
}
.hover\:bg-brand-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity));
}
.hover\:bg-brand-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
}
.hover\:text-brand-600:hover {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity));
}
.hover\:text-brand-500:hover {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity));
}
.hover\:text-brand-700:hover {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
}
.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.focus\:border-brand-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-y-100 {
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.dark .dark\:prose-dark :where(blockquote):not(:where([class~="not-prose"] *)) {
  color: #9ca3af;
}
.dark .dark\:prose-dark :where(pre):not(:where([class~="not-prose"] *)) {}
.dark .dark\:prose-dark :where(pre code):not(:where([class~="not-prose"] *)) {}
.dark .dark\:prose-dark {
  color: #d1d5db;
}
.dark .dark\:prose-dark :where(h1):not(:where([class~="not-prose"] *)) {
  color: #d1d5db;
}
.dark .dark\:prose-dark :where(h2):not(:where([class~="not-prose"] *)) {
  color: #d1d5db;
}
.dark .dark\:prose-dark :where(h3):not(:where([class~="not-prose"] *)) {
  color: #d1d5db;
}
.dark .dark\:prose-dark :where(h4):not(:where([class~="not-prose"] *)) {
  color: #d1d5db;
}
.dark .dark\:prose-dark :where(h5):not(:where([class~="not-prose"] *)) {
  color: #d1d5db;
}
.dark .dark\:prose-dark :where(h6):not(:where([class~="not-prose"] *)) {
  color: #d1d5db;
}
.dark .dark\:prose-dark :where(figcaption):not(:where([class~="not-prose"] *)) {
  color: #6b7280;
}
.dark .dark\:prose-dark :where(thead):not(:where([class~="not-prose"] *)) {
  color: #d1d5db;
}
.dark .dark\:block {
  display: block;
}
.dark .dark\:hidden {
  display: none;
}
.dark .dark\:divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-divide-opacity));
}
.dark .dark\:border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
}
.dark .dark\:border-brand-800 {
  --tw-border-opacity: 1;
  border-color: rgb(91 33 182 / var(--tw-border-opacity));
}
.dark .dark\:border-brand-700 {
  --tw-border-opacity: 1;
  border-color: rgb(109 40 217 / var(--tw-border-opacity));
}
.dark .dark\:border-brand-600 {
  --tw-border-opacity: 1;
  border-color: rgb(124 58 237 / var(--tw-border-opacity));
}
.dark .dark\:bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark .dark\:bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark .dark\:bg-brand-900\/30 {
  background-color: rgb(76 29 149 / 0.3);
}
.dark .dark\:bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark .dark\:text-brand-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}
.dark .dark\:text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
.dark .dark\:text-\[\#7aa5e8\] {
  --tw-text-opacity: 1;
  color: rgb(122 165 232 / var(--tw-text-opacity));
}
.dark .dark\:text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}
.dark .dark\:text-brand-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity));
}
.dark .dark\:text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
.dark .dark\:text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity));
}
.dark .dark\:text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity));
}
.dark .dark\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}
.dark .dark\:text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}
.dark .dark\:text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}
.dark .dark\:text-brand-800 {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity));
}
.dark .dark\:text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}
.dark .dark\:ring-brand-700 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(109 40 217 / var(--tw-ring-opacity));
}
.dark .dark\:ring-gray-700 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
}
.dark .dark\:hover\:border-brand-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(124 58 237 / var(--tw-border-opacity));
}
.dark .dark\:hover\:bg-gray-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark .dark\:hover\:text-brand-300:hover {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}
.dark .dark\:hover\:text-brand-200:hover {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity));
}
.dark .dark\:focus\:ring-offset-gray-900:focus {
  --tw-ring-offset-color: #111827;
}
@media (min-width: 640px) {

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-1 {
    margin-top: 0.25rem;
  }

  .sm\:mb-0 {
    margin-bottom: 0px;
  }

  .sm\:block {
    display: block;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[9rem_1fr\] {
    grid-template-columns: 9rem 1fr;
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[13rem_1fr\] {
    grid-template-columns: 13rem 1fr;
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .sm\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }

  .sm\:self-start {
    align-self: flex-start;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:pt-1 {
    padding-top: 0.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}
@media (min-width: 768px) {

  .md\:order-2 {
    order: 2;
  }

  .md\:order-1 {
    order: 1;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:items-baseline {
    align-items: baseline;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
@media (min-width: 1024px) {

  .lg\:prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
  }

  .lg\:prose-lg :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
  }

  .lg\:prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
    font-size: 1.2222222em;
    line-height: 1.4545455;
    margin-top: 1.0909091em;
    margin-bottom: 1.0909091em;
  }

  .lg\:prose-lg :where(blockquote):not(:where([class~="not-prose"] *)) {
    margin-top: 1.6666667em;
    margin-bottom: 1.6666667em;
    padding-left: 1em;
  }

  .lg\:prose-lg :where(h1):not(:where([class~="not-prose"] *)) {
    font-size: 2.6666667em;
    margin-top: 0;
    margin-bottom: 0.8333333em;
    line-height: 1;
  }

  .lg\:prose-lg :where(h2):not(:where([class~="not-prose"] *)) {
    font-size: 1.6666667em;
    margin-top: 1.8666667em;
    margin-bottom: 1.0666667em;
    line-height: 1.3333333;
  }

  .lg\:prose-lg :where(h3):not(:where([class~="not-prose"] *)) {
    font-size: 1.3333333em;
    margin-top: 1.6666667em;
    margin-bottom: 0.6666667em;
    line-height: 1.5;
  }

  .lg\:prose-lg :where(h4):not(:where([class~="not-prose"] *)) {
    margin-top: 1.7777778em;
    margin-bottom: 0.4444444em;
    line-height: 1.5555556;
  }

  .lg\:prose-lg :where(img):not(:where([class~="not-prose"] *)) {
    margin-top: 1.7777778em;
    margin-bottom: 1.7777778em;
  }

  .lg\:prose-lg :where(video):not(:where([class~="not-prose"] *)) {
    margin-top: 1.7777778em;
    margin-bottom: 1.7777778em;
  }

  .lg\:prose-lg :where(figure):not(:where([class~="not-prose"] *)) {
    margin-top: 1.7777778em;
    margin-bottom: 1.7777778em;
  }

  .lg\:prose-lg :where(figure > *):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .lg\:prose-lg :where(figcaption):not(:where([class~="not-prose"] *)) {
    font-size: 0.8888889em;
    line-height: 1.5;
    margin-top: 1em;
  }

  .lg\:prose-lg :where(code):not(:where([class~="not-prose"] *)) {
    font-size: 0.8888889em;
  }

  .lg\:prose-lg :where(h2 code):not(:where([class~="not-prose"] *)) {
    font-size: 0.8666667em;
  }

  .lg\:prose-lg :where(h3 code):not(:where([class~="not-prose"] *)) {
    font-size: 0.875em;
  }

  .lg\:prose-lg :where(pre):not(:where([class~="not-prose"] *)) {
    font-size: 0.8888889em;
    line-height: 1.75;
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0.375rem;
    padding-top: 1em;
    padding-right: 1.5em;
    padding-bottom: 1em;
    padding-left: 1.5em;
  }

  .lg\:prose-lg :where(ol):not(:where([class~="not-prose"] *)) {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
    padding-left: 1.5555556em;
  }

  .lg\:prose-lg :where(ul):not(:where([class~="not-prose"] *)) {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
    padding-left: 1.5555556em;
  }

  .lg\:prose-lg :where(li):not(:where([class~="not-prose"] *)) {
    margin-top: 0.6666667em;
    margin-bottom: 0.6666667em;
  }

  .lg\:prose-lg :where(ol > li):not(:where([class~="not-prose"] *)) {
    padding-left: 0.4444444em;
  }

  .lg\:prose-lg :where(ul > li):not(:where([class~="not-prose"] *)) {
    padding-left: 0.4444444em;
  }

  .lg\:prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"] *)) {
    margin-top: 0.8888889em;
    margin-bottom: 0.8888889em;
  }

  .lg\:prose-lg :where(.prose-lg > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
    margin-top: 1.3333333em;
  }

  .lg\:prose-lg :where(.prose-lg > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
    margin-bottom: 1.3333333em;
  }

  .lg\:prose-lg :where(.prose-lg > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
    margin-top: 1.3333333em;
  }

  .lg\:prose-lg :where(.prose-lg > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
    margin-bottom: 1.3333333em;
  }

  .lg\:prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
    margin-top: 0.8888889em;
    margin-bottom: 0.8888889em;
  }

  .lg\:prose-lg :where(hr):not(:where([class~="not-prose"] *)) {
    margin-top: 3.1111111em;
    margin-bottom: 3.1111111em;
  }

  .lg\:prose-lg :where(hr + *):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
  }

  .lg\:prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
  }

  .lg\:prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
  }

  .lg\:prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
  }

  .lg\:prose-lg :where(table):not(:where([class~="not-prose"] *)) {
    font-size: 0.8888889em;
    line-height: 1.5;
  }

  .lg\:prose-lg :where(thead th):not(:where([class~="not-prose"] *)) {
    padding-right: 0.75em;
    padding-bottom: 0.75em;
    padding-left: 0.75em;
  }

  .lg\:prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
    padding-left: 0;
  }

  .lg\:prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
    padding-right: 0;
  }

  .lg\:prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
    padding-top: 0.75em;
    padding-right: 0.75em;
    padding-bottom: 0.75em;
    padding-left: 0.75em;
  }

  .lg\:prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
    padding-left: 0;
  }

  .lg\:prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
    padding-right: 0;
  }

  .lg\:prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
  }

  .lg\:prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"] *)) {
    margin-bottom: 0;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-8 {
    top: 2rem;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_18rem\] {
    grid-template-columns: minmax(0,1fr) 18rem;
  }

  .lg\:grid-cols-\[19rem_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 19rem minmax(0,1fr);
  }

  .lg\:gap-x-12 {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }

  .lg\:gap-x-16 {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1280px) {

  .xl\:sticky {
    position: sticky;
  }

  .xl\:top-8 {
    top: 2rem;
  }

  .xl\:block {
    display: block;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_16rem\] {
    grid-template-columns: minmax(0,1fr) 16rem;
  }

  .xl\:gap-x-16 {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }

  .xl\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .xl\:gap-x-7 {
    -moz-column-gap: 1.75rem;
         column-gap: 1.75rem;
  }
}
@media print {

  .print\:prose-print {
    color: #000;
  }

  .print\:prose-print :where(h1):not(:where([class~="not-prose"] *)) {
    color: #000;
  }

  .print\:prose-print :where(h2):not(:where([class~="not-prose"] *)) {
    color: #000;
  }

  .print\:prose-print :where(h3):not(:where([class~="not-prose"] *)) {
    color: #000;
  }

  .print\:prose-print :where(h4):not(:where([class~="not-prose"] *)) {
    color: #000;
  }

  .print\:prose-print :where(h5):not(:where([class~="not-prose"] *)) {
    color: #000;
  }

  .print\:prose-print :where(h6):not(:where([class~="not-prose"] *)) {
    color: #000;
  }

  .print\:inline {
    display: inline;
  }

  .print\:hidden {
    display: none;
  }
}