/* typography class copied from https://commit.tailwindui.com/ */

.typography {
    --typography-body: #4b5563;
    --typography-headings: #111827;
    --typography-quotes: #6b7280;
    --typography-quotes-border: #e5e7eb;
    --typography-links: #0ea5e9;
    --typography-link-hover: #0284c7;
    --typography-link-underline: rgba(56,189,248,.4);
    --typography-link-hover-underline: rgba(2,132,199,.4);
    --typography-pre: #d1d5db;
    --typography-pre-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
    --typography-bold: #111827;
    --typography-kbd: #4b5563;
    --typography-kbd-border: #e5e7eb;
    --typography-kbd-bg: #f9fafb;
    --typography-code: #111827;
    --typography-hr: rgba(17,24,39,.05);
    --typography-th-borders: rgba(17,24,39,.2);
    --typography-td-borders: rgba(17,24,39,.05);
    --shiki-color-text: #fff;
    --shiki-token-constant: #6ee7b7;
    --shiki-token-string: #6ee7b7;
    --shiki-token-comment: #6b7280;
    --shiki-token-keyword: #7dd3fc;
    --shiki-token-parameter: #f9a8d4;
    --shiki-token-function: #c4b5fd;
    --shiki-token-string-expression: #6ee7b7;
    --shiki-token-punctuation: #e5e7eb
}

.dark .typography {
    --typography-body: #d1d5db;
    --typography-headings: #fff;
    --typography-quotes: #9ca3af;
    --typography-quotes-border: #1f2937;
    --typography-links: #38bdf8;
    --typography-link-hover: #fff;
    --typography-link-underline: rgba(56,189,248,.4);
    --typography-link-hover-underline: hsla(0,0%,100%,.4);
    --typography-pre: #9ca3af;
    --typography-pre-shadow: inset 0 0 0 1px hsla(0,0%,100%,.1);
    --typography-bold: #fff;
    --typography-kbd: #fff;
    --typography-kbd-border: #1f2937;
    --typography-kbd-bg: #111827;
    --typography-code: #fff;
    --typography-hr: hsla(0,0%,100%,.1);
    --typography-th-borders: hsla(0,0%,100%,.1);
    --typography-td-borders: hsla(0,0%,100%,.05)
}

.typography {
    color: var(--typography-body);
    font-size: .875rem;
    line-height: 1.5rem
}

.typography h2 {
    font-size: 1.25rem;
    line-height: 2rem
}

.typography h2,.typography h3 {
    font-family: Mona Sans,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;
    color: var(--typography-headings);
    font-weight: 600
}

.typography h3 {
    font-size: 1rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    -moz-column-gap: .75rem;
    column-gap: .75rem
}

.typography h3>svg {
    flex: none;
    width: 1rem;
    height: 1rem
}

.typography h4 {
    color: var(--typography-headings);
    font-family: Mona Sans,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: 600;
    font-size: .875rem;
    line-height: 1.5rem
}

.typography blockquote {
    border-left: 3px solid var(--typography-quotes-border);
    padding-left: 1.5rem;
    color: var(--typography-quotes)
}

.typography a:not(h2 a) {
    font-weight: 600;
    color: var(--typography-links);
    text-decoration: underline;
    -webkit-text-decoration-color: var(--typography-link-underline);
    text-decoration-color: var(--typography-link-underline);
    text-underline-offset: 2px;
    transition-property: color,-webkit-text-decoration-color;
    transition-property: color,text-decoration-color;
    transition-property: color,text-decoration-color,-webkit-text-decoration-color;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

.typography a:not(h2 a):hover {
    color: var(--typography-link-hover);
    -webkit-text-decoration-color: var(--typography-link-hover-underline);
    text-decoration-color: var(--typography-link-hover-underline)
}

.typography strong {
    font-weight: 600
}

.typography strong:not(a strong) {
    color: var(--typography-bold)
}

.typography kbd {
    display: inline-block;
    border-radius: .25rem;
    background-color: var(--typography-kbd-bg);
    padding: 0 .375rem;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--typography-kbd);
    box-shadow: inset 0 0 0 1px var(--typography-kbd-border)
}

.typography code,.typography kbd {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}

.typography code:not(a code,pre code) {
    color: var(--typography-code)
}

.typography code:not(pre code) {
    font-size: calc(12 / 14 * 1em);
    line-height: 1;
    font-weight: 700
}

.typography code:not(pre code):after,.typography code:not(pre code):before {
    content: "`"
}

.typography pre {
    display: flex;
    background-color: #111827;
    border-radius: .5rem;
    overflow-x: auto;
    box-shadow: var(--typography-pre-shadow)
}

.typography pre code {
    flex: none;
    padding: 1.5rem;
    font-size: .8125rem;
    line-height: 1.5rem;
    color: var(--typography-pre)
}

.typography hr {
    border-color: var(--typography-hr)
}

.typography ol,.typography ul {
    padding-left: 1.375rem
}

.typography ul {
    list-style-type: disc
}

.typography ol {
    list-style-type: decimal
}

.typography li {
    padding-left: .625rem
}

.typography li::marker {
    color: #9ca3af
}

.typography ol>li::marker {
    font-size: .75rem;
    font-weight: 600
}

.typography table {
    width: 100%;
    text-align: left
}

.typography thead {
    border-bottom: 1px solid var(--typography-th-borders)
}

.typography thead th {
    font-weight: 600;
    padding-top: 0;
    padding-bottom: calc(.5rem - 1px);
    color: var(--typography-headings)
}

.typography tbody tr {
    border-bottom: 1px solid var(--typography-td-borders)
}

.typography tbody td {
    padding-top: calc(.5rem - 1px);
    padding-bottom: .5rem
}

.typography :is(th,td):first-child {
    padding-left: 0;
    padding-right: .5rem
}

.typography :is(th,td):last-child {
    padding-left: .5rem;
    padding-right: 0
}

.typography :is(th,td):not(:first-child,:last-child) {
    padding-left: .5rem;
    padding-right: .5rem
}

.typography>* {
    margin-top: 1.5rem
}

.typography :is(h2,h3,h4,blockquote,pre,table) {
    margin-top: 2rem
}

.typography hr {
    margin-top: calc(4rem - 1px)
}

.typography li {
    margin-top: 1rem
}

.typography li>:is(p,ol,ul) {
    margin-top: 1rem
}

.typography :is(h2,h3,h4)+* {
    margin-top: 1rem
}

.typography :is(blockquote,pre,table)+* {
    margin-top: 2rem
}

.typography hr+* {
    margin-top: 4rem
}

.typography li>:first-child,.typography>:first-child {
    margin-top: 0
}

.typography .anchor {
    vertical-align: bottom;
    display: none;
}