.typography {
    color: #0a0a0a; /* Tailwind neutral.950 */
    font-size: 1.25rem; /* Tailwind fontSize.xl */
    line-height: 1.75rem; /* Tailwind fontSize.xl[1].lineHeight */
  }
  
  /* Custom Shiki colors as CSS variables */
  .typography {
    --shiki-color-text: #ffffff;
    --shiki-color-background: #0a0a0a;
    --shiki-token-constant: #d4d4d4;
    --shiki-token-string: #a3a3a3;
    --shiki-token-comment: #737373;
    --shiki-token-keyword: #a3a3a3;
    --shiki-token-parameter: #a3a3a3;
    --shiki-token-function: #d4d4d4;
    --shiki-token-string-expression: #d4d4d4;
    --shiki-token-punctuation: #a3a3a3;
  }
  
  /* General child element spacing */
  .typography > * {
    margin-top: 1.5rem; /* Tailwind spacing.6 */
    margin-bottom: 1.5rem; /* Tailwind spacing.6 */
  }
  
  /* Headings */
  .typography h2 {
    font-weight: 600; /* Tailwind fontWeight.semibold */
    font-family: "Mona Sans", sans-serif; /* Tailwind fontFamily.display */
    font-size: 1.5rem; /* Tailwind fontSize.2xl */
    line-height: 2rem; /* Tailwind fontSize.2xl[1].lineHeight */
    margin-top: 4rem; /* Tailwind spacing.16 */
  }
  
  .typography h3 {
    font-weight: 600; /* Tailwind fontWeight.semibold */
    font-family: "Mona Sans", sans-serif; /* Tailwind fontFamily.display */
    font-size: 1.25rem; /* Tailwind fontSize.xl */
    line-height: 1.75rem; /* Tailwind fontSize.xl[1].lineHeight */
    margin-top: 2.5rem; /* Tailwind spacing.10 */
  }
  
  .typography h2 + h3 {
    margin-top: 0;
  }
  
  /* Lists */
  .typography ul,
  .typography ol {
    padding-left: 1.5rem; /* Tailwind spacing.6 */
  }
  
  .typography ul {
    list-style-type: disc;
  }
  
  .typography ol {
    list-style-type: decimal;
  }
  
  .typography li {
    padding-left: 0.75rem; /* Tailwind spacing.3 */
    margin-top: 1.5rem; /* Tailwind spacing.6 */
  }
  
  .typography li::marker {
    color: #737373; /* Tailwind neutral.500 */
  }
  
  .typography li > * {
    margin-top: 1rem; /* Tailwind spacing.4 */
  }
  
  /* Tables */
  .typography table {
    width: 100%;
    text-align: left;
    font-size: 1rem; /* Tailwind fontSize.base */
    line-height: 1.75rem; /* Tailwind fontSize.base[1].lineHeight */
  }
  
  .typography th {
    font-weight: 600; /* Tailwind fontWeight.semibold */
  }
  
  .typography thead th {
    padding-bottom: 1.5rem; /* Tailwind spacing.6 */
    border-bottom: 1px solid #0a0a0a; /* Tailwind neutral.950 */
  }
  
  .typography td {
    vertical-align: top;
    padding-top: 1.5rem; /* Tailwind spacing.6 */
    padding-bottom: 1.5rem; /* Tailwind spacing.6 */
    border-bottom: 1px solid rgba(10, 10, 10, 0.1); /* Tailwind neutral.950 / 0.1 */
  }
  
  .typography td:not(:last-child),
  .typography th:not(:last-child) {
    padding-right: 1.5rem; /* Tailwind spacing.6 */
  }
  
  /* Code blocks */
  .typography pre {
    display: flex;
    background-color: #0a0a0a; /* Tailwind neutral.950 */
    border-radius: 2.5rem; /* Tailwind borderRadius.4xl */
    overflow-x: auto;
    margin-top: 2.5rem; /* Tailwind spacing.10 */
    margin-bottom: 2.5rem; /* Tailwind spacing.10 */
    margin-left: calc(-1 * 1.5rem); /* Tailwind spacing.6 */
    margin-right: calc(-1 * 1.5rem); /* Tailwind spacing.6 */
  }
  
  .typography pre code {
    flex: none;
    padding: 2rem 1.5rem; /* Tailwind spacing.10 and padding.6 */
    font-size: 1rem; /* Tailwind fontSize.base */
    line-height: 2rem; /* Tailwind lineHeight.8 */
    color: #ffffff; /* Tailwind white */
  }
  
  /* Inline elements */
  .typography a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-skip-ink: none;
    font-weight: 600; /* Tailwind fontWeight.semibold */
  }
  
  .typography strong {
    font-weight: 600; /* Tailwind fontWeight.semibold */
  }
  
  .typography code:not(pre code) {
    font-size: calc(18 / 20 * 1em);
    font-weight: 600; /* Tailwind fontWeight.semibold */
  }
  
  .typography h2 code,
  .typography h3 code {
    font-weight: 700; /* Tailwind fontWeight.bold */
  }
  
  /* Figures */
  .typography figure {
    margin-top: 8rem; /* Tailwind spacing.32 */
    margin-bottom: 8rem; /* Tailwind spacing.32 */
  }
  
  /* Horizontal rules */
  .typography hr {
    border-color: rgba(10, 10, 10, 0.1); /* Tailwind neutral.950 / 0.1 */
    margin-top: 6rem; /* Tailwind spacing.24 */
    margin-bottom: 6rem; /* Tailwind spacing.24 */
  }