/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

:root {
  --line-height: 1.25;
}

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: var(--line-height); /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

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

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, 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;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

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

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

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

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

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

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

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

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

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-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.
 */

[type="search"]::-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 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

:root,
html[data-theme="mocha"] {
  --rosewater: #f5e0dc;
  --rosewater-rgb: 245 224 220;
  --rosewater-hsl: 9.6 55.556% 91.176%;
  --flamingo: #f2cdcd;
  --flamingo-rgb: 242 205 205;
  --flamingo-hsl: 0 58.73% 87.647%;
  --pink: #f5c2e7;
  --pink-rgb: 245 194 231;
  --pink-hsl: 316.471 71.831% 86.078%;
  --mauve: #cba6f7;
  --mauve-rgb: 203 166 247;
  --mauve-hsl: 267.407 83.505% 80.98%;
  --red: #f38ba8;
  --red-rgb: 243 139 168;
  --red-hsl: 343.269 81.25% 74.902%;
  --maroon: #eba0ac;
  --maroon-rgb: 235 160 172;
  --maroon-hsl: 350.4 65.217% 77.451%;
  --peach: #fab387;
  --peach-rgb: 250 179 135;
  --peach-hsl: 22.957 92% 75.49%;
  --yellow: #f9e2af;
  --yellow-rgb: 249 226 175;
  --yellow-hsl: 41.351 86.047% 83.137%;
  --green: #a6e3a1;
  --green-rgb: 166 227 161;
  --green-hsl: 115.455 54.098% 76.078%;
  --teal: #94e2d5;
  --teal-rgb: 148 226 213;
  --teal-hsl: 170 57.353% 73.333%;
  --sky: #89dceb;
  --sky-rgb: 137 220 235;
  --sky-hsl: 189.184 71.014% 72.941%;
  --sapphire: #74c7ec;
  --sapphire-rgb: 116 199 236;
  --sapphire-hsl: 198.5 75.949% 69.02%;
  --blue: #89b4fa;
  --blue-rgb: 137 180 250;
  --blue-hsl: 217.168 91.87% 75.882%;
  --lavender: #b4befe;
  --lavender-rgb: 180 190 254;
  --lavender-hsl: 231.892 97.368% 85.098%;
  --text: #cdd6f4;
  --text-rgb: 205 214 244;
  --text-hsl: 226.154 63.934% 88.039%;
  --subtext1: #bac2de;
  --subtext1-rgb: 186 194 222;
  --subtext1-hsl: 226.667 35.294% 80%;
  --subtext0: #a6adc8;
  --subtext0-rgb: 166 173 200;
  --subtext0-hsl: 227.647 23.611% 71.765%;
  --overlay2: #9399b2;
  --overlay2-rgb: 147 153 178;
  --overlay2-hsl: 228.387 16.757% 63.725%;
  --overlay1: #7f849c;
  --overlay1-rgb: 127 132 156;
  --overlay1-hsl: 229.655 12.775% 55.49%;
  --overlay0: #6c7086;
  --overlay0-rgb: 108 112 134;
  --overlay0-hsl: 230.769 10.744% 47.451%;
  --surface2: #585b70;
  --surface2-rgb: 88 91 112;
  --surface2-hsl: 232.5 12% 39.216%;
  --surface1: #45475a;
  --surface1-rgb: 69 71 90;
  --surface1-hsl: 234.286 13.208% 31.176%;
  --surface0: #313244;
  --surface0-rgb: 49 50 68;
  --surface0-hsl: 236.842 16.239% 22.941%;
  --base: #1e1e2e;
  --base-rgb: 30 30 46;
  --base-hsl: 240 21.053% 14.902%;
  --mantle: #181825;
  --mantle-rgb: 24 24 37;
  --mantle-hsl: 240 21.311% 11.961%;
  --crust: #11111b;
  --crust-rgb: 17 17 27;
  --crust-hsl: 240 22.727% 8.627%;
}

html[data-theme="latte"] {
  --rosewater: #dc8a78;
  --rosewater-rgb: 220 138 120;
  --rosewater-hsl: 10.8 58.824% 66.667%;
  --flamingo: #dd7878;
  --flamingo-rgb: 221 120 120;
  --flamingo-hsl: 0 59.763% 66.863%;
  --pink: #ea76cb;
  --pink-rgb: 234 118 203;
  --pink-hsl: 316.034 73.418% 69.02%;
  --mauve: #8839ef;
  --mauve-rgb: 136 57 239;
  --mauve-hsl: 266.044 85.047% 58.039%;
  --red: #d20f39;
  --red-rgb: 210 15 57;
  --red-hsl: 347.077 86.667% 44.118%;
  --maroon: #e64553;
  --maroon-rgb: 230 69 83;
  --maroon-hsl: 354.783 76.303% 58.627%;
  --peach: #fe640b;
  --peach-rgb: 254 100 11;
  --peach-hsl: 21.975 99.184% 51.961%;
  --yellow: #df8e1d;
  --yellow-rgb: 223 142 29;
  --yellow-hsl: 34.948 76.984% 49.412%;
  --green: #40a02b;
  --green-rgb: 64 160 43;
  --green-hsl: 109.231 57.635% 39.804%;
  --teal: #179299;
  --teal-rgb: 23 146 153;
  --teal-hsl: 183.231 73.864% 34.51%;
  --sky: #04a5e5;
  --sky-rgb: 4 165 229;
  --sky-hsl: 197.067 96.567% 45.686%;
  --sapphire: #209fb5;
  --sapphire-rgb: 32 159 181;
  --sapphire-hsl: 188.859 69.953% 41.765%;
  --blue: #1e66f5;
  --blue-rgb: 30 102 245;
  --blue-hsl: 219.907 91.489% 53.922%;
  --lavender: #7287fd;
  --lavender-rgb: 114 135 253;
  --lavender-hsl: 230.935 97.203% 71.961%;
  --text: #4c4f69;
  --text-rgb: 76 79 105;
  --text-hsl: 233.793 16.022% 35.49%;
  --subtext1: #5c5f77;
  --subtext1-rgb: 92 95 119;
  --subtext1-hsl: 233.333 12.796% 41.373%;
  --subtext0: #6c6f85;
  --subtext0-rgb: 108 111 133;
  --subtext0-hsl: 232.8 10.373% 47.255%;
  --overlay2: #7c7f93;
  --overlay2-rgb: 124 127 147;
  --overlay2-hsl: 232.174 9.623% 53.137%;
  --overlay1: #8c8fa1;
  --overlay1-rgb: 140 143 161;
  --overlay1-hsl: 231.429 10.048% 59.02%;
  --overlay0: #9ca0b0;
  --overlay0-rgb: 156 160 176;
  --overlay0-hsl: 228 11.236% 65.098%;
  --surface2: #acb0be;
  --surface2-rgb: 172 176 190;
  --surface2-hsl: 226.667 12.162% 70.98%;
  --surface1: #bcc0cc;
  --surface1-rgb: 188 192 204;
  --surface1-hsl: 225 13.559% 76.863%;
  --surface0: #ccd0da;
  --surface0-rgb: 204 208 218;
  --surface0-hsl: 222.857 15.909% 82.745%;
  --base: #eff1f5;
  --base-rgb: 239 241 245;
  --base-hsl: 220 23.077% 94.902%;
  --mantle: #e6e9ef;
  --mantle-rgb: 230 233 239;
  --mantle-hsl: 220 21.951% 91.961%;
  --crust: #dce0e8;
  --crust-rgb: 220 224 232;
  --crust-hsl: 220 20.69% 88.627%;
}

html[data-theme="frappe"] {
  --rosewater: #f2d5cf;
  --rosewater-rgb: 242 213 207;
  --rosewater-hsl: 10.286 57.377% 88.039%;
  --flamingo: #eebebe;
  --flamingo-rgb: 238 190 190;
  --flamingo-hsl: 0 58.537% 83.922%;
  --pink: #f4b8e4;
  --pink-rgb: 244 184 228;
  --pink-hsl: 316 73.171% 83.922%;
  --mauve: #ca9ee6;
  --mauve-rgb: 202 158 230;
  --mauve-hsl: 276.667 59.016% 76.078%;
  --red: #e78284;
  --red-rgb: 231 130 132;
  --red-hsl: 358.812 67.785% 70.784%;
  --maroon: #ea999c;
  --maroon-rgb: 234 153 156;
  --maroon-hsl: 357.778 65.854% 75.882%;
  --peach: #ef9f76;
  --peach-rgb: 239 159 118;
  --peach-hsl: 20.331 79.085% 70%;
  --yellow: #e5c890;
  --yellow-rgb: 229 200 144;
  --yellow-hsl: 39.529 62.044% 73.137%;
  --green: #a6d189;
  --green-rgb: 166 209 137;
  --green-hsl: 95.833 43.902% 67.843%;
  --teal: #81c8be;
  --teal-rgb: 129 200 190;
  --teal-hsl: 171.549 39.227% 64.51%;
  --sky: #99d1db;
  --sky-rgb: 153 209 219;
  --sky-hsl: 189.091 47.826% 72.941%;
  --sapphire: #85c1dc;
  --sapphire-rgb: 133 193 220;
  --sapphire-hsl: 198.621 55.414% 69.216%;
  --blue: #8caaee;
  --blue-rgb: 140 170 238;
  --blue-hsl: 221.633 74.242% 74.118%;
  --lavender: #babbf1;
  --lavender-rgb: 186 187 241;
  --lavender-hsl: 238.909 66.265% 83.725%;
  --text: #c6d0f5;
  --text-rgb: 198 208 245;
  --text-hsl: 227.234 70.149% 86.863%;
  --subtext1: #b5bfe2;
  --subtext1-rgb: 181 191 226;
  --subtext1-hsl: 226.667 43.689% 79.804%;
  --subtext0: #a5adce;
  --subtext0-rgb: 165 173 206;
  --subtext0-hsl: 228.293 29.496% 72.745%;
  --overlay2: #949cbb;
  --overlay2-rgb: 148 156 187;
  --overlay2-hsl: 227.692 22.286% 65.686%;
  --overlay1: #838ba7;
  --overlay1-rgb: 131 139 167;
  --overlay1-hsl: 226.667 16.981% 58.431%;
  --overlay0: #737994;
  --overlay0-rgb: 115 121 148;
  --overlay0-hsl: 229.091 13.36% 51.569%;
  --surface2: #626880;
  --surface2-rgb: 98 104 128;
  --surface2-hsl: 228 13.274% 44.314%;
  --surface1: #51576d;
  --surface1-rgb: 81 87 109;
  --surface1-hsl: 227.143 14.737% 37.255%;
  --surface0: #414559;
  --surface0-rgb: 65 69 89;
  --surface0-hsl: 230 15.584% 30.196%;
  --base: #303446;
  --base-rgb: 48 52 70;
  --base-hsl: 229.091 18.644% 23.137%;
  --mantle: #292c3c;
  --mantle-rgb: 41 44 60;
  --mantle-hsl: 230.526 18.812% 19.804%;
  --crust: #232634;
  --crust-rgb: 35 38 52;
  --crust-hsl: 229.412 19.54% 17.059%;
}

html[data-theme="macchiato"] {
  --rosewater: #f4dbd6;
  --rosewater-rgb: 244 219 214;
  --rosewater-hsl: 10 57.692% 89.804%;
  --flamingo: #f0c6c6;
  --flamingo-rgb: 240 198 198;
  --flamingo-hsl: 0 58.333% 85.882%;
  --pink: #f5bde6;
  --pink-rgb: 245 189 230;
  --pink-hsl: 316.071 73.684% 85.098%;
  --mauve: #c6a0f6;
  --mauve-rgb: 198 160 246;
  --mauve-hsl: 266.512 82.692% 79.608%;
  --red: #ed8796;
  --red-rgb: 237 135 150;
  --red-hsl: 351.176 73.913% 72.941%;
  --maroon: #ee99a0;
  --maroon-rgb: 238 153 160;
  --maroon-hsl: 355.059 71.429% 76.667%;
  --peach: #f5a97f;
  --peach-rgb: 245 169 127;
  --peach-hsl: 21.356 85.507% 72.941%;
  --yellow: #eed49f;
  --yellow-rgb: 238 212 159;
  --yellow-hsl: 40.253 69.912% 77.843%;
  --green: #a6da95;
  --green-rgb: 166 218 149;
  --green-hsl: 105.217 48.252% 71.961%;
  --teal: #8bd5ca;
  --teal-rgb: 139 213 202;
  --teal-hsl: 171.081 46.835% 69.02%;
  --sky: #91d7e3;
  --sky-rgb: 145 215 227;
  --sky-hsl: 188.78 59.42% 72.941%;
  --sapphire: #7dc4e4;
  --sapphire-rgb: 125 196 228;
  --sapphire-hsl: 198.641 65.605% 69.216%;
  --blue: #8aadf4;
  --blue-rgb: 138 173 244;
  --blue-hsl: 220.189 82.813% 74.902%;
  --lavender: #b7bdf8;
  --lavender-rgb: 183 189 248;
  --lavender-hsl: 234.462 82.278% 84.51%;
  --text: #cad3f5;
  --text-rgb: 202 211 245;
  --text-hsl: 227.442 68.254% 87.647%;
  --subtext1: #b8c0e0;
  --subtext1-rgb: 184 192 224;
  --subtext1-hsl: 228 39.216% 80%;
  --subtext0: #a5adcb;
  --subtext0-rgb: 165 173 203;
  --subtext0-hsl: 227.368 26.761% 72.157%;
  --overlay2: #939ab7;
  --overlay2-rgb: 147 154 183;
  --overlay2-hsl: 228.333 20% 64.706%;
  --overlay1: #8087a2;
  --overlay1-rgb: 128 135 162;
  --overlay1-hsl: 227.647 15.455% 56.863%;
  --overlay0: #6e738d;
  --overlay0-rgb: 110 115 141;
  --overlay0-hsl: 230.323 12.351% 49.216%;
  --surface2: #5b6078;
  --surface2-rgb: 91 96 120;
  --surface2-hsl: 229.655 13.744% 41.373%;
  --surface1: #494d64;
  --surface1-rgb: 73 77 100;
  --surface1-hsl: 231.111 15.607% 33.922%;
  --surface0: #363a4f;
  --surface0-rgb: 54 58 79;
  --surface0-hsl: 230.4 18.797% 26.078%;
  --base: #24273a;
  --base-rgb: 36 39 58;
  --base-hsl: 231.818 23.404% 18.431%;
  --mantle: #1e2030;
  --mantle-rgb: 30 32 48;
  --mantle-hsl: 233.333 23.077% 15.294%;
  --crust: #181926;
  --crust-rgb: 24 25 38;
  --crust-hsl: 235.714 22.581% 12.157%;
}

:root {
  /* Typography */
  --font-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
    sans-serif;
  --font-serif: "EB Garamond", "EB Garamond-fallback", "Times New Roman", Times,
    serif;
  --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
    monospace;
  --font-size-h1: 2em;
  --font-size-h2: 1.5em;
  --font-size-h3: 1.17em;
  --font-size-h4: 1em;
  --font-size-h5: 0.83em;
  --font-size-h6: 0.67em;

  /* Other vars */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --icon-s: 1rem;
  --icon-m: 1.5rem;

  /* Colors */
  --accent0: var(--mauve);
  --accent1: var(--lavender);
  --accent2: var(--sapphire);
  --accent3: var(--green);
  --accent4: var(--teal);
  --accent5: var(--peach);
  --accent6: var(--red);
  --accent7: var(--yellow);
  --subheading0: var(--subtext0);
  --subheading1: var(--subtext1);
  --subtle: var(--overlay1);
  --success: var(--green);
  --warning: var(--yellow);
  --error: var(--red);
}

/* Fallback from EB Garamond to Times */
@font-face {
  font-family: "EB Garamond-fallback";
  size-adjust: 94.30000000000004%;
  ascent-override: 110%;
  src: local("Times New Roman");
}

/* Icons, icon buttons */
svg.icon,
svg.lucide {
  height: var(--icon-m);
  width: var(--icon-m);
}

button.icon-button,
a.icon-button {
  height: var(--space-l);
  width: var(--space-l);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* breakpoints */
.bp-desktop-up {
  @media only screen and (width <= 900px) {
    display: none !important;
  }
}
.bp-tablet-down {
  @media only screen and (width > 900px) {
    display: none !important;
  }
}
.bp-tablet-up {
  @media only screen and (width <= 600px) {
    display: none !important;
  }
}
.bp-phone-only {
  @media only screen and (width > 600px) {
    display: none !important;
  }
}

/* Box sizing */
html {
  box-sizing: border-box;
  font-size: 100%;
  height: 100%;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100%;
  background-color: var(--base);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

h1 {
  font-size: var(--font-size-h1);
}
h2 {
  font-size: var(--font-size-h2);
}
h3 {
  font-size: var(--font-size-h3);
}
h4 {
  font-size: var(--font-size-h4);
}
h5 {
  font-size: var(--font-size-h5);
}
h6 {
  font-size: var(--font-size-h6);
}

/* Links */
a {
  color: var(--accent3);
  text-decoration: none;
  transition: color 0.2s;
  &:hover,
  &:focus {
    color: var(--accent2);
    text-decoration: underline;
  }
}

/* Default button styling */
button {
  border: 2px solid transparent;
  background-color: var(--surface0);
  color: var(--text);
  padding: 0.5em;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border 0.2s;
  &:hover,
  &:focus {
    background-color: var(--surface1);
    border-color: var(--surface2);
    color: var(--accent0);
  }
}

div.callout {
  width: 100%;
  padding: var(--space-m);
  border-radius: var(--space-s);
  background-color: var(--surface0);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);

  .callout-title-icon {
    &,
    svg {
      width: var(--icon-m);
      height: var(--icon-m);
    }
  }
  .callout-title {
    display: flex;
    gap: var(--space-s);
    align-items: center;
  }

  .callout-content > :first-child {
    margin-top: 0;
  }
  .callout-content > :last-child {
    margin-bottom: 0;
  }

  &[data-callout="note"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: var(--space-xs) solid var(--accent4);

    .callout-title {
      color: var(--accent4);
    }
  }
}

.shiki,
.shiki span {
  background-color: var(--mantle);
}

html[data-theme="mocha"] {
  .shiki,
  .shiki span {
    color: var(--shiki-mocha) !important;
  }
}
html[data-theme="macchiato"] {
  .shiki,
  .shiki span {
    color: var(--shiki-macchiato) !important;
  }
}
html[data-theme="frappe"] {
  .shiki,
  .shiki span {
    color: var(--shiki-frappe) !important;
  }
}
html[data-theme="latte"] {
  .shiki,
  .shiki span {
    color: var(--shiki-latte) !important;
  }
}

pre,
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
pre > code {
  font-size: 1em;
}

pre.shiki {
  position: relative;
  border-radius: var(--space-s);
  padding: var(--space-m);
  overflow: hidden;
  white-space: pre-wrap;
  width: 100%;

  code {
    /* place a padding on the inner code element so that when it overflows
    there's still spacing on the right side */
    /* padding-right: 1rem; */
    width: 100%;
    display: block;
  }

  /* decorative text */
  button.copy-code-button,
  &[data-file]::before {
    font-size: 0.7em;
    background-color: transparent;
    opacity: 0.6;
  }

  &[data-file]::before {
    content: attr(data-file);
    display: block;
    margin-bottom: var(--space-s);
  }

  button.copy-code-button {
    align-items: center;
    border-radius: var(--space-xs);
    display: flex;
    gap: var(--space-xs);
    position: absolute;
    right: var(--space-s);
    top: var(--space-s);

    svg {
      display: none;
      width: 1em;
      height: 1em;
    }

    &.copied {
      color: var(--success);
      svg {
        display: initial;
      }
    }

    &:hover,
    &:focus {
      opacity: 1;
    }
  }
}

/* inline code blocks */
p code {
  color: var(--accent0);
  border-radius: var(--space-xs);
  background-color: var(--surface0);
  padding: 0 var(--space-xs);
}

/* Stolen from Angular CDK */
.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  left: 0;
  [dir="rtl"] & {
    left: auto;
    right: 0;
  }
}

/*! Hint.css (base version) - v3.0.0 - 2023-11-29
* https://kushagra.dev/lab/hint/
* Copyright (c) 2023 Kushagra Gour */

:root {
  --hint-background: var(--overlay0);
  --hint-foreground: var(--text);
  --hint-border-radius: var(--space-xs);
}

[class*="hint--"] {
  position: relative;
  display: inline-block;
}
[class*="hint--"]:after,
[class*="hint--"]:before {
  position: absolute;
  transform: translate3d(0, 0, 0);
  visibility: hidden;
  opacity: 0;
  z-index: 1000000;
  pointer-events: none;
  transition: 0.3s ease;
  transition-delay: 0s;
}
[class*="hint--"]:hover:after,
[class*="hint--"]:hover:before {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.1s;
}
[class*="hint--"]:before {
  content: "";
  position: absolute;
  background: var(--hint-background);
  border: 6px solid transparent;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  z-index: 1000001;
}
[class*="hint--"]:after {
  background: var(--hint-background);
  color: var(--hint-foreground);
  border-radius: var(--hint-border-radius);
  padding: 8px 10px;
  font-size: 1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1rem;
  white-space: nowrap;
}
[class*="hint--"][aria-label]:after {
  content: attr(aria-label);
}
[class*="hint--"][data-hint]:after {
  content: attr(data-hint);
}
[aria-label=""]:after,
[aria-label=""]:before,
[data-hint=""]:after,
[data-hint=""]:before {
  display: none !important;
}
.hint--top {
  --rotation: 135deg;
}
.hint--top:after,
.hint--top:before {
  bottom: 100%;
  left: 50%;
}
.hint--top:before {
  margin-bottom: -5.5px;
  transform: rotate(var(--rotation));
  left: calc(50% - 6px);
}
.hint--top:after {
  transform: translateX(-50%);
}
.hint--top:hover:before {
  transform: translateY(-8px) rotate(var(--rotation));
}
.hint--top:hover:after {
  transform: translateX(-50%) translateY(-8px);
}
.hint--bottom {
  --rotation: -45deg;
}
.hint--bottom:after,
.hint--bottom:before {
  top: 100%;
  left: 50%;
}
.hint--bottom:before {
  margin-top: -5.5px;
  transform: rotate(var(--rotation));
  left: calc(50% - 6px);
}
.hint--bottom:after {
  transform: translateX(-50%);
}
.hint--bottom:hover:before {
  transform: translateY(8px) rotate(var(--rotation));
}
.hint--bottom:hover:after {
  transform: translateX(-50%) translateY(8px);
}
.hint--right {
  --rotation: -135deg;
}
.hint--right:before {
  margin-left: -5.5px;
  margin-bottom: -6px;
  transform: rotate(var(--rotation));
}
.hint--right:after {
  margin-bottom: calc(-1 * (1rem + 16px) / 2);
}
.hint--right:after,
.hint--right:before {
  left: 100%;
  bottom: 50%;
}
.hint--right:hover:before {
  transform: translateX(8px) rotate(var(--rotation));
}
.hint--right:hover:after {
  transform: translateX(8px);
}
.hint--left {
  --rotation: 45deg;
}
.hint--left:before {
  margin-right: -5.5px;
  margin-bottom: -6px;
  transform: rotate(var(--rotation));
}
.hint--left:after {
  margin-bottom: calc(-1 * (1rem + 16px) / 2);
}
.hint--left:after,
.hint--left:before {
  right: 100%;
  bottom: 50%;
}
.hint--left:hover:before {
  transform: translateX(-8px) rotate(var(--rotation));
}
.hint--left:hover:after {
  transform: translateX(-8px);
}
.hint--top-left {
  --rotation: 135deg;
}
.hint--top-left:after,
.hint--top-left:before {
  bottom: 100%;
  left: 50%;
}
.hint--top-left:before {
  margin-bottom: -5.5px;
  transform: rotate(var(--rotation));
  left: calc(50% - 6px);
}
.hint--top-left:after {
  transform: translateX(-100%);
  margin-left: 12px;
}
.hint--top-left:hover:before {
  transform: translateY(-8px) rotate(var(--rotation));
}
.hint--top-left:hover:after {
  transform: translateX(-100%) translateY(-8px);
}
.hint--top-right {
  --rotation: 135deg;
}
.hint--top-right:after,
.hint--top-right:before {
  bottom: 100%;
  left: 50%;
}
.hint--top-right:before {
  margin-bottom: -5.5px;
  transform: rotate(var(--rotation));
  left: calc(50% - 6px);
}
.hint--top-right:after {
  transform: translateX(0);
  margin-left: -12px;
}
.hint--top-right:hover:before {
  transform: translateY(-8px) rotate(var(--rotation));
}
.hint--top-right:hover:after {
  transform: translateY(-8px);
}
.hint--bottom-left {
  --rotation: -45deg;
}
.hint--bottom-left:after,
.hint--bottom-left:before {
  top: 100%;
  left: 50%;
}
.hint--bottom-left:before {
  margin-top: -5.5px;
  transform: rotate(var(--rotation));
  left: calc(50% - 6px);
}
.hint--bottom-left:after {
  transform: translateX(-100%);
  margin-left: 12px;
}
.hint--bottom-left:hover:before {
  transform: translateY(8px) rotate(var(--rotation));
}
.hint--bottom-left:hover:after {
  transform: translateX(-100%) translateY(8px);
}
.hint--bottom-right {
  --rotation: -45deg;
}
.hint--bottom-right:after,
.hint--bottom-right:before {
  top: 100%;
  left: 50%;
}
.hint--bottom-right:before {
  margin-top: -5.5px;
  transform: rotate(var(--rotation));
  left: calc(50% - 6px);
}
.hint--bottom-right:after {
  transform: translateX(0);
  margin-left: -12px;
}
.hint--bottom-right:hover:before {
  transform: translateY(8px) rotate(var(--rotation));
}
.hint--bottom-right:hover:after {
  transform: translateY(8px);
}
.hint--fit:after,
.hint--large:after,
.hint--medium:after,
.hint--small:after {
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.4em;
  word-wrap: break-word;
}
.hint--small:after {
  width: 80px;
}
.hint--medium:after {
  width: 150px;
}
.hint--large:after {
  width: 300px;
}
.hint--fit:after {
  width: 100%;
}
.hint--always:after,
.hint--always:before {
  opacity: 1;
  visibility: visible;
}
.hint--always.hint--top:before {
  transform: translateY(-8px) rotate(var(--rotation));
}
.hint--always.hint--top:after {
  transform: translateX(-50%) translateY(-8px);
}
.hint--always.hint--top-left:before {
  transform: translateY(-8px) rotate(var(--rotation));
}
.hint--always.hint--top-left:after {
  transform: translateX(-100%) translateY(-8px);
}
.hint--always.hint--top-right:before {
  transform: translateY(-8px) rotate(var(--rotation));
}
.hint--always.hint--top-right:after {
  transform: translateY(-8px);
}
.hint--always.hint--bottom:before {
  transform: translateY(8px) rotate(var(--rotation));
}
.hint--always.hint--bottom:after {
  transform: translateX(-50%) translateY(8px);
}
.hint--always.hint--bottom-left:before {
  transform: translateY(8px) rotate(var(--rotation));
}
.hint--always.hint--bottom-left:after {
  transform: translateX(-100%) translateY(8px);
}
.hint--always.hint--bottom-right:before {
  transform: translateY(8px) rotate(var(--rotation));
}
.hint--always.hint--bottom-right:after {
  transform: translateY(8px);
}
.hint--always.hint--left:before {
  transform: translateX(-8px) rotate(var(--rotation));
}
.hint--always.hint--left:after {
  transform: translateX(-8px);
}
.hint--always.hint--right:before {
  transform: translateX(8px) rotate(var(--rotation));
}
.hint--always.hint--right:after {
  transform: translateX(8px);
}