.profile-frame {
  aspect-ratio: 1/1;
  border-radius: 63% 37% 37% 63%/43% 37% 63% 57%;
  overflow: clip;
  shape-outside: margin-box circle(50%);
}
.profile-frame img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
@charset "UTF-8";
blockquote {
  font-family: var(--font-secondary-stack);
  font-weight: var(--font-secondary-weight);
  font-style: var(--font-secondary-style);
  font-stretch: var(--font-secondary-width);
  border-inline-start: 0.25rem solid var(--text-3);
  margin-block: 1rlh;
  margin-inline-start: -0.25rem;
  padding-inline: 1rlh;
  text-wrap: pretty;
}
blockquote b, blockquote strong {
  font-weight: var(--font-secondary-bold);
}
blockquote i, blockquote em {
  font-style: var(--font-secondary-italic);
}

figure {
  margin-block: 2rlh;
}
figure > * {
  margin-block: 0;
}
figure img {
  display: block;
  margin-inline: auto;
}

figcaption {
  font-size: var(--font-size--1);
  line-height: var(--line-height--1);
  color: var(--text-2);
  margin-block-start: 1rlh;
}
figcaption::before {
  content: "❦ ";
}

hr {
  align-items: center;
  border: none;
  border-top: 1px solid var(--text-3);
  display: flex;
  height: 1px;
  justify-content: center;
  margin-block: 4rlh;
  overflow: visible;
  text-align: center;
}
hr::after {
  background-color: var(--surface-1);
  color: var(--text-2);
  content: "❧";
  padding-inline: 1rlh;
}

details {
  background-color: var(--surface-2);
  margin-block: 1rlh;
  padding: 1rlh;
}
details[open] summary {
  margin-block-end: 1rlh;
}

code, kbd, samp {
  font-family: var(--font-mono-stack);
  font-weight: var(--font-mono-weight);
  font-style: var(--font-mono-style);
  font-stretch: var(--font-mono-width);
}
code b, code strong, kbd b, kbd strong, samp b, samp strong {
  font-weight: var(--font-mono-bold);
}
code i, code em, kbd i, kbd em, samp i, samp em {
  font-style: var(--font-mono-italic);
}

/* <kbd> on its own represents input from the user, such pressing a button on
* the keyboard.
*/
kbd {
  border: 1px solid var(--text-3);
  border-radius: 4px;
  box-shadow: var(--text-2) 0 0.25rem 0 0;
  padding-inline: 0.5rem;
  text-transform: uppercase;
}

/* <samp> inside a <kbd> represents input based on text presented by the system,
* such as an on-screen button or menu.
*/
kbd:has(samp) {
  background-color: var(--surface-2);
  border-radius: 0.5lh;
  box-shadow: none;
  padding-inline: 0.5lh;
  text-wrap: nowrap;
}

/* <kbd> inside a <samp> represents user input that is echoed back */
samp > kbd {
  /* Reset the <kbd> styles, since this isn’t representing a single key on the
  * keyboard.
  */
  border: none;
  border-radius: none;
  box-shadow: none;
  padding: 0;
  text-transform: none;
  /* Blinking cursor effect */
}
samp > kbd:last-child::after {
  animation: 2s step-end infinite cursor-blink;
  background-color: var(--text-3);
  content: "";
  display: inline-block;
  height: 0.75em;
  margin-left: 0.25ch;
  margin-bottom: -0.125rem;
  width: 0.75ch;
}

sub, sup {
  font-size: var(--font-size--2);
  line-height: var(--line-height--2);
  line-height: 1;
}

[role=note]:has(small:only-child) {
  background-color: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 4px;
  margin-block: 1rlh;
  padding-block: 1rlh;
  padding-inline: 1.3181818182rem;
  text-align: center;
  text-wrap: balance;
}
[role=note]:has(small:only-child) small::after,
[role=note]:has(small:only-child) small::before {
  color: var(--text-2);
}
[role=note]:has(small:only-child) small::after {
  content: " ❩";
}
[role=note]:has(small:only-child) small::before {
  content: "❨ ";
}

[class*=language-] {
  line-height: 0.6666666667rlh;
  tab-size: 2;
}

[class=language-python] {
  tab-size: 4;
}

pre:has([class*=language-]) {
  background-color: var(--surface-2);
  border-radius: 4px;
  margin-inline: auto;
  max-inline-size: 88ch;
  padding: 1rlh;
  overflow-x: scroll;
}
pre:has([class*=language-]) .line {
  counter-increment: line-number;
}
pre:has([class*=language-]) .line::before {
  color: var(--text-3);
  content: counter(line-number);
  display: inline-block;
  min-inline-size: 2ch;
  padding-inline-end: 1rlh;
  text-align: end;
}

.footnote-ref {
  color: var(--text-2);
  display: inline-block;
  font-weight: 500;
  position: relative;
  text-align: center;
  transition: 300ms color ease;
}
.footnote-ref:hover {
  color: var(--text-3);
}
.footnote-ref:hover a {
  color: var(--text-1);
}
.footnote-ref::before {
  content: " " "{";
}
.footnote-ref::after {
  content: "}";
}
.footnote-ref a {
  color: inherit;
  text-decoration: none;
  transition: inherit;
}
.footnote-ref a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.footnotes h2, .footnotes li, .footnotes li::marker {
  color: var(--text-3);
}
.footnotes li {
  font-size: var(--font-size--1);
  line-height: var(--line-height--1);
}
.footnotes li a {
  color: inherit;
  text-decoration-color: inherit;
}
.footnotes li:target, .footnotes li:target::marker {
  color: revert-layer;
}
.footnotes li:target a, .footnotes li:target::marker a {
  color: revert-layer;
  text-decoration-color: revert-layer;
}