Skip to main content
Github repo

Theme config

Theme mode
Color palette
Grays
Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
Get CSS
All
Components
Guides
API
Recent
↑↓ Navigate
←→ Category
↵ Select
esc Close

Components

Typography

Styles for headings, body text, and other text content. Use util classes anywhere or wrap content in .rich-text.

Full support Supported since v143. Full support Supported since v146. Partial support Missing: box-decoration-break.

Class-based

Utils that you can plop down wherever.

Variants

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Large

Body

Overline

Caption

<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>
<h5 class="h5">Heading 5</h5>
<h6 class="h6">Heading 6</h6>
<p class="p large">Body Large</p>
<p class="p">Body</p>
<p class="overline">Overline</p>
<p class="caption">Caption</p>

Heading group

Zero or more p elements

Followed by one h* element

Followed by zero or more p elements

<div class="hgroup">
  <p class="overline">Zero or more p elements</p>
  <h2 class="h2">Followed by one h* element</h2>
  <p class="p">Followed by zero or more p elements</p>
</div>

Blockquote

"Occupy your mind, don't stay home. Talk to all your friends, but don't look at your phone”
— Marika Hackman, No Caffeine
<blockquote class="blockquote">
  "Occupy your mind, don't stay home. Talk to all your friends, but don't look
  at your phone”
  <footer>— Marika Hackman, <cite>No Caffeine</cite></footer>
</blockquote>

Code block

.card {
  background: var(--surface-elevated);
  border-radius: var(--radius-3);
  padding: var(--size-4);
}
<pre class="code-block"><code>.card {
  background: var(--surface-elevated);
  border-radius: var(--radius-3);
  padding: var(--size-4);
}</code></pre>

Inline text elements

Result Element Class
Abbr. <abbr> .abbr
Definition <dfn> .dfn
Bold <strong>, <b> —
Italic <i>, <em> —
Citation <cite> .cite
Ctrl + S <kbd> .kbd
Highlight <mark> .mark
Strikethrough <s> .s
Small <small> .small
Text Sub <sub> .sub
Text Sup <sup> .sup
Underline <u> .u
Deleted <del> .del
Inserted <ins> .ins
variable <var> .var
sample output <samp> .samp

Classless

Wrap your code in .rich-text to add typographic styles to its children. It's extra handy when you can't control the contents yourself, like printing text from a CMS. 

<article class="rich-text">
  <!-- -->
</article>

Classless showcase

Let's put everything together and see how all elements look in a classless, rich-text context.

Typography showcase

Fixie beard tumeric: What the kombucha tells us

Ugh, raw denim four loko bitters cold-pressed whatever retro tousled tilde pabst.

Kitsch tbh pug banjo distillery cred listicle typewriter snackwave knausgaard tousled. Offal chicharrones humblebrag wolf affogato whatever swag four loko vaporware poutine roof party. Raclette drinking vinegar chartreuse gochujang kogi heirloom ugh snackwave banh mi cray cliche locavore.

Gluten-free ennui air plant franzen tattooed poutine scenester tote bag microdosing affogato kinfolk iceland vegan. Celiac literally:

Cornhole actually h1 tumblr tacos mumblecore twee. Crucifix pour-over leggings heirloom chartreuse cloud bread trust fund lyft keytar.
— Flexitarian single-origin, somewhere off the L train

Locavore ennui adaptogen literally palo santo flannel p +1 hashtag meggings sartorial disrupt. Mlkshk post-ironic biodiesel praxis craft beer snackwave bitters swag hexagon tattooed tousled.

Mumblecore tbh snackwave pork belly

Mlkshk master cleanse vexillologist keffiyeh selvage hella wolf thundercats godard asymmetrical tattooed pabst. Tbh vaporware pickled cardigan tousled trust fund coloring book fam shaman, unordered lists, ordered lists, code blocks, block quotes, and even air plant.

Microdosing literally taxidermy flannel pork belly:

  1. Artisan mass-produced roof party whatever pickled gluten-free.
  2. Hashtag literally small batch ugh kogi leggings snackwave.
  3. Chambray vegan pug ennui cornhole bitters lumbersexual:
    • Bitters glazed oat milk.
    • Vegan enamel pin cortado.

Authentic tacos mixtape squid meggings tote bag.

Chartreuse humblebrag palo santo

Lumbersexual praxis distillery cold-pressed tilde keffiyeh cred vinyl plaid ascot narwhal brooklyn.

Raclette actually marfa air plant gluten-free knausgaard:

Lush green hills surround dark blue lakes under cloudy sky
Taxidermy tousled heirloom letterpress mixtape hashtag. Yr pabst cliche mlkshk vaporware affogato poutine scenester tote bag jianbing.

Thundercats hexagon wolf enamel pin craft beer:

  • Selvage cardigan asymmetrical snackwave pug.
  • Bitters gluten-free mixtape tumeric tote bag scenester.
  • Humblebrag cloud bread kogi raw denim pabst affogato.

Crucifix lumbersexual roof party skateboard.

Tumblr tbh disrupt keffiyeh?

Vaporware praxis enamel pin, too.

Tilde four loko banh mi lyft flexitarian sartorial neutra literally pug hashtag taxidermy affogato knausgaard distillery humblebrag.

When a cold brew comes after a pour-over …

Squid thundercats mumblecore celiac typewriter ugh mlkshk cornhole locavore chartreuse. Microdosing shaman keffiyeh selvage.

  • Heirloom leggings snackwave tattooed.

    Crucifix vegan ennui knausgaard tousled disrupt mixtape sartorial asymmetrical bitters.

    Skateboard letterpress cold-pressed palo santo trust fund vexillologist roof party microdosing flannel cloud bread tote bag poutine affogato.

  • Pickled tumeric raw denim squid.

    Neutra gluten-free narwhal kogi pabst air plant coloring book lyft tbh hashtag praxis lumbersexual.

  • Humblebrag chartreuse YOLO pug.

    Mixtape actually wolf godard four loko ugh distillery marfa vaporware cliche celiac. I'm going to press Enter now.

Taxidermy sriracha selvage everyday carry raclette tousled.

Mlkshk jianbing tbh snackwave.

Thundercats pabst enamel pin or heirloom crucifix banh mi leggings vexillologist cardigan scenester tilde locavore asymmetrical.

Flexitarian brew.config.js kogi hashtag vaporware, set steepHours to taste:

module.exports = {
  grind: 'coarse',
  origin: 'single-origin',
  roast: {
    level: 'light',
  },
  steepHours: 18,
  plugins: ['oat-milk', 'pour-over'],
}

Narwhal YOLO authentic letterpress affogato. The terminal said Error: cold brew timeout.

Pork belly hella keffiyeh description lists

Tbh literally roof party four loko snackwave vexillologist cold-pressed tilde heirloom knausgaard. Ugh pabst actually dreamcatcher…okay? Scenester marfa banh mi lumbersexual.

Why do fixies have no brakes?
Chartreuse tumblr raw denim crucifix pabst enamel pin. Quas cupiditate laboriosam fugiat tote bag mlkshk.
What do you call a vegan who codes?
Gluten-free javascript. Lorem ipsum dolor sit amet consectetur distillery elit. Culpa, voluptas kogi quia excepturi, quibusdam natus exercitationem adaptogen tempore labore.
Why can't mumblecore go to the farmers market?
Because it sold out. Lorem ipsum dolor sit amet, consectetur snackwave elit. Ipsam, quas voluptatibus ex culpa ipsum, affogato blanditiis humblebrag ullamco magnam suscipit deserunt pug natus.

There are other elements we need to style

Hella mixtape tracksuit tattooed, like this palo santo chartreuse knausgaard. Tilde vaporware actually leggings gochujang, feels more williamsburg. Not financial advice.

Narwhal thundercats air plant locavore bitters @opui/typography tote bag godard. H2O and footnotes1.

Sometimes I even use code in headings

Microdosing crucifix ennui pabst marfa lyft tbh. This "wrap the cornhole in backticks" typewriter flannel snackwave humblebrag four loko.

Kogi raclette scenester pickled enamel pin felix-bohlin/ui distillery praxis selvage.

We haven't used an h4 yet

But now we have.

And here comes an h5

Rarely needed, but it exists and should look intentional, not like broken body copy.

And finally an h6

The last heading level. If you find yourself using this, consider restructuring your content instead.

We still need to think about stacked headings though.

Let's make sure we don't screw that up with h4 elements, either.

Phew, with any luck we have styled the headings above this text and they look pretty good.

Vegan poutine letterpress tacos coloring book flannel hexagon tousled heirloom cloud bread. Shoreditch tbh mlkshk wolf. 

<article class="rich-text">
  <hgroup>
    <p>Typography showcase</p>
    <h1>Fixie beard tumeric: What the kombucha tells us</h1>
    <p>Ugh, raw denim four loko bitters cold-pressed whatever retro tousled tilde pabst.</p>
  </hgroup>
  <p>
    Kitsch tbh pug banjo distillery cred listicle typewriter snackwave knausgaard
    tousled. Offal chicharrones humblebrag wolf affogato whatever swag four loko
    vaporware poutine roof party. Raclette <em>drinking vinegar</em> chartreuse
    gochujang kogi heirloom ugh snackwave banh mi cray cliche locavore.
  </p>
  <p>
    Gluten-free ennui air plant franzen tattooed poutine scenester tote bag
    microdosing affogato kinfolk iceland vegan. Celiac literally:
  </p>
  <blockquote>
    Cornhole actually <code>h1</code> tumblr tacos mumblecore twee.
    Crucifix pour-over leggings heirloom chartreuse cloud bread trust fund lyft keytar.
    <footer>— <cite>Flexitarian single-origin, somewhere off the L train</cite></footer>
  </blockquote>
  <p>
    Locavore ennui adaptogen literally palo santo flannel <code>p</code> +1 hashtag
    meggings sartorial disrupt. Mlkshk <em>post-ironic</em> biodiesel praxis craft beer
    snackwave bitters swag hexagon tattooed tousled.
  </p>


  <hr />


  <h2>Mumblecore tbh snackwave pork belly</h2>
  <p>
    Mlkshk master cleanse vexillologist keffiyeh selvage hella wolf thundercats
    godard asymmetrical tattooed pabst. Tbh <strong>vaporware pickled</strong> cardigan
    tousled trust fund coloring book fam shaman, unordered lists, ordered
    lists, code blocks, block quotes, <em>and even air plant</em>.
  </p>
  <p>Microdosing literally taxidermy flannel pork belly:</p>
  <ol>
    <li><s>Artisan</s> mass-produced roof party whatever pickled gluten-free.</li>
    <li>Hashtag literally small batch ugh kogi leggings snackwave.</li>
    <li>Chambray vegan pug ennui cornhole bitters lumbersexual:
      <ul>
        <li>Bitters glazed oat milk.</li>
        <li>Vegan enamel pin cortado.</li>
      </ul>
    </li>
  </ol>
  <p>Authentic tacos mixtape squid meggings tote bag.</p>
  <h3>Chartreuse humblebrag palo santo</h3>
  <p>
    Lumbersexual praxis distillery cold-pressed tilde keffiyeh
    cred vinyl plaid ascot narwhal brooklyn.
  </p>
  <p>Raclette actually marfa air plant gluten-free knausgaard:</p>
  <figure>
    <img
      src="https://images.unsplash.com/photo-1774268184985-f1af67b38179?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Lush green hills surround dark blue lakes under cloudy sky" />
    <figcaption>
      Taxidermy tousled heirloom letterpress mixtape hashtag. Yr
      pabst cliche mlkshk vaporware affogato poutine scenester tote bag jianbing.
    </figcaption>
  </figure>
  <p>Thundercats hexagon wolf enamel pin craft beer:</p>
  <ul>
    <li>Selvage cardigan asymmetrical snackwave pug.</li>
    <li>Bitters gluten-free mixtape tumeric tote bag scenester.</li>
    <li>Humblebrag cloud bread kogi raw denim pabst affogato.</li>
  </ul>
  <p>Crucifix lumbersexual roof party skateboard.</p>


  <h2>Tumblr tbh disrupt keffiyeh?</h2>
  <h3>Vaporware praxis enamel pin, too.</h3>
  <p>
    Tilde four loko banh mi lyft flexitarian sartorial neutra literally
    pug hashtag taxidermy affogato knausgaard distillery humblebrag.
  </p>
  <h3>When a cold brew comes after a pour-over …</h3>
  <p>
    Squid thundercats mumblecore celiac typewriter ugh mlkshk
    cornhole locavore chartreuse. Microdosing shaman keffiyeh selvage.
  </p>
  <ul>
    <li>
      <strong>Heirloom leggings snackwave tattooed.</strong>
      <p>Crucifix vegan ennui knausgaard tousled disrupt mixtape sartorial asymmetrical bitters.</p>
      <p>
        Skateboard letterpress cold-pressed palo santo trust fund vexillologist
        roof party microdosing flannel cloud bread tote bag poutine affogato.
      </p>
    </li>
    <li>
      <strong>Pickled tumeric raw denim squid.</strong>
      <p>
        Neutra gluten-free narwhal kogi pabst air plant coloring book
        lyft tbh hashtag praxis lumbersexual.
      </p>
    </li>
    <li>
      <strong>Humblebrag chartreuse YOLO pug.</strong>
      <p>
        Mixtape actually wolf godard four loko ugh distillery marfa
        vaporware cliche celiac. I'm going to press <kbd>Enter</kbd> now.
      </p>
    </li>
  </ul>
  <p>Taxidermy sriracha selvage everyday carry raclette tousled.</p>


  <h2>Mlkshk jianbing tbh snackwave.</h2>
  <p>
    Thundercats <a href="https://highlightjs.org/" class="link">pabst enamel pin</a>
    or <a href="https://prismjs.com/" class="link">heirloom crucifix</a> banh mi leggings
    vexillologist cardigan <em>scenester</em> tilde locavore asymmetrical.
  </p>
  <p>Flexitarian <code>brew.config.js</code> kogi hashtag vaporware, set <var>steepHours</var> to taste:</p>
  <pre><code>module.exports = {
  grind: 'coarse',
  origin: 'single-origin',
  roast: {
    level: 'light',
  },
  steepHours: 18,
  plugins: ['oat-milk', 'pour-over'],
}</code></pre>
  <p>Narwhal <abbr title="You Only Live Once">YOLO</abbr> authentic letterpress affogato. The terminal said <samp>Error:
      cold brew timeout</samp>.</p>


  <h2>Pork belly hella keffiyeh description lists</h2>
  <p>
    Tbh literally roof party four loko snackwave vexillologist
    cold-pressed tilde heirloom knausgaard. Ugh pabst actually
    dreamcatcher&hellip;okay? Scenester marfa banh mi lumbersexual.
  </p>
  <dl>
    <dt>Why do fixies have no brakes?</dt>
    <dd>Chartreuse tumblr raw denim crucifix pabst enamel pin. Quas cupiditate laboriosam fugiat tote bag mlkshk.</dd>
    <dt>What do you call a vegan who codes?</dt>
    <dd>Gluten-free javascript. Lorem ipsum dolor sit amet consectetur distillery elit. Culpa, voluptas kogi quia
      excepturi, quibusdam natus exercitationem adaptogen tempore labore.</dd>
    <dt>Why can't mumblecore go to the farmers market?</dt>
    <dd>Because it sold out. Lorem ipsum dolor sit amet, consectetur snackwave elit. Ipsam, quas voluptatibus ex culpa
      ipsum, affogato blanditiis humblebrag ullamco magnam suscipit deserunt pug natus.</dd>
  </dl>


  <h2>There are other elements we need to style</h2>
  <p>
    Hella <del>mixtape</del> <ins>tracksuit</ins> tattooed, like <a href="https://open-props.style" class="link">this
      palo santo chartreuse knausgaard</a>.
    <u>Tilde vaporware</u> actually leggings gochujang, feels more <mark>williamsburg</mark>.
    <small>Not financial advice.</small>
  </p>
  <p>
    Narwhal <dfn title="A type of fictional cat">thundercats</dfn> air plant <code><span></code> locavore bitters
    <code>@opui/typography</code> tote bag godard. H<sub>2</sub>O and footnotes<sup>1</sup>.
  </p>


  <h3>Sometimes I even use <code>code</code> in headings</h3>
  <p>
    Microdosing crucifix ennui pabst marfa lyft tbh.
    This <em>"wrap the cornhole in backticks"</em>
    typewriter flannel snackwave humblebrag four loko.
  </p>
  <p>
    Kogi raclette scenester pickled enamel pin
    <a href="https://github.com/felix-bohlin/ui" class="link"><code>felix-bohlin/ui</code></a>
    distillery praxis selvage.
  </p>


  <h4>We haven't used an <code>h4</code> yet</h4>
  <p>But now we have.</p>


  <h5>And here comes an <code>h5</code></h5>
  <p>Rarely needed, but it exists and should look intentional, not like broken body copy.</p>


  <h6>And finally an <code>h6</code></h6>
  <p>The last heading level. If you find yourself using this, consider restructuring your content instead.</p>


  <h3>We still need to think about stacked headings though.</h3>
  <h4>Let's make sure we don't screw that up with <code>h4</code> elements, either.</h4>
  <p>Phew, with any luck we have styled the headings above this text and they look pretty good.</p>
  <p>
    Vegan poutine letterpress tacos coloring book flannel hexagon
    tousled heirloom cloud bread. Shoreditch tbh mlkshk wolf.
  </p>
</article>

Browser support

Full support Supported since v143. Full support Supported since v146. Partial support Missing: box-decoration-break.

See also the full browser support guide.

Installation

@layer components.root {


  :where(.p) {
    text-wrap: pretty;


    &.small {
      font-size: var(--font-size-1);
    }


    &.large {
      font-size: var(--font-size-3);
    }
  }


  :where(.h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--text-primary);
    font-weight: 700;
    text-wrap: pretty;
  }


  :where(.h1) {
    font-size: var(--font-size-h1, var(--font-size-7));
    letter-spacing: -0.02em;
    line-height: 1.15;
  }


  :where(.h2) {
    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
    letter-spacing: -0.02em;
    line-height: 1.2;
  }


  :where(.h3) {
    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
    letter-spacing: -0.01em;
    line-height: 1.167;
  }


  :where(.h4) {
    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
    letter-spacing: -0.01em;
    line-height: 1.235;
  }


  :where(.h5) {
    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
    line-height: 1.334;
  }


  :where(.h6) {
    font-size: var(--font-size-h6, var(--font-size-1, 1rem));
    line-height: 1;
  }


  /** Overline */
  :where(.overline) {
    color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
        oklch(from var(--text-muted) calc(l * 0.75) c h));
    font-size: var(--font-size-0);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }


  :where(.hgroup) {
    &>p {
      margin: 0;
    }


    &> :where(h1, h2, h3, h4, h5, h6) {
      margin-block: 0 0.4em;
    }


    /* First p element (overline) */
    &>p:first-of-type:first-child {
      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
          oklch(from var(--text-muted) calc(l * 0.75) c h));
      font-size: var(--font-size-0);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }


    /* Body paragraphs after the heading */
    &>p:not(:first-of-type:first-child) {
      color: oklch(from currentColor l c h / 75%);
      font-size: var(--font-size-3);
      line-height: 1.6;
    }


    &>p+p {
      margin-block-start: 0.75em;
    }
  }


  /** Caption */
  :where(.caption) {
    color: var(--text-muted);
    font-size: var(--font-size-0);
    line-height: 1.6;
  }






  /* Inline text elements — class utilities (work anywhere) */
  :where(.u, .abbr, .dfn) {
    text-decoration: underline;
    text-underline-offset: 1px;


    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }


  :where(.abbr, .dfn) {
    font-style: normal;
    text-decoration: var(--color-9) underline dotted;


    &[title] {
      cursor: help;
      text-underline-offset: 1px;
    }


    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }


  :where(.sup) {
    font-size: 0.5em;
    vertical-align: super;
  }


  :where(p, span).small {
    font-size: max(0.5em, var(--font-size-0, 0.75rem));
  }


  :where(.cite) {
    font-style: italic;
  }


  /* Code */
  :where(.kbd) {
    font-family: var(--font-mono);
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    border-radius: var(--radius-2);
    border-width: var(--border-size-1);
    color: var(--text-muted-contrast);
    padding: 0.1ex 0.3ex;
    word-break: break-word;
  }


  :where(.mark) {
    border-radius: var(--radius-2);
    box-decoration-break: clone;
    padding: .1ex .3ex;
    vertical-align: baseline;
  }


  :where(.s) {
    text-decoration: line-through;
  }


  :where(.sub) {
    font-size: 0.75em;
    vertical-align: sub;
  }


  :where(.del) {
    color: var(--color-9);
    text-decoration: line-through;
  }


  :where(.ins) {
    color: var(--color-9);
    text-decoration: underline;
    text-underline-offset: 1px;
  }


  :where(.var) {
    font-family: var(--font-mono);
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    border-radius: var(--radius-2);
    border-width: var(--border-size-1);
    color: var(--text-muted-contrast);
    padding: 0.1ex 0.3ex;
    word-break: break-word;
  }


  :where(.samp) {
    font-family: var(--font-mono);
  }


  /* Blockquote */
  :where(.blockquote) {
    border-inline-start: var(--border-size-3) solid currentColor;
    padding-block: var(--size-3);
    padding-inline: var(--size-4);


    :first-child {
      margin-block-start: 0;
    }


    :last-child {
      margin-block-end: 0;
    }


    footer {
      color: var(--text-muted);
      margin-block-start: var(--size-3);
    }
  }


  /* Code block */
  :where(pre.code-block) {
    background-color: var(--color-15);
    border-radius: var(--border-radius);
    color: var(--color-1);
    font-family: var(--font-mono);
    font-size: var(--font-size-05);
    max-inline-size: 100%;
    overflow-x: auto;
    padding-block: var(--size-3);
    padding-inline: var(--size-4);
    scrollbar-width: thin;
    white-space: pre;


    >code {
      background: none;
      border-radius: 0;
      color: inherit;
      font-size: inherit;
      padding: 0;
      word-break: normal;
      writing-mode: inherit;
    }
  }


}


/* Rich text */
@layer components.extended {
  @scope (.rich-text) to (.not-rich-text) {
    a {
      color: var(--primary);
      cursor: pointer;
      font-size: inherit;
      font-weight: 700;
      line-height: inherit;
      text-decoration: underline;
      text-decoration-color: var(--primary);
      text-underline-offset: 2px;


      &[href] {


        &:hover,
        &:focus-visible {
          color: var(--primary-light);
        }
      }
    }


    /* Blockquote */
    blockquote {
      border-inline-start: var(--border-size-3) solid currentColor;
      font-size: inherit;
      line-height: inherit;
      padding-block: var(--size-3);
      padding-inline: var(--size-4);


      :first-child {
        margin-block-start: 0;
      }


      :last-child {
        margin-block-end: 0;
      }


      footer {
        color: var(--text-muted);
        margin-block-start: var(--size-3);
      }
    }


    /* Code */
    pre {
      border-radius: var(--border-radius);
      font-size: var(--font-size-05);
      margin-block: var(--size-6);
      max-inline-size: max-content;
      min-inline-size: 0;
      padding-block: var(--size-3);
      padding-inline: var(--size-4);
      white-space: pre;
    }


    pre:has(> code) {
      background-color: var(--color-15);
      border-radius: var(--border-radius);
      color: var(--color-1);
      max-inline-size: 100%;
      overflow-x: auto;
      scrollbar-width: thin;


      >code {
        background: none;
        border-radius: 0;
        color: inherit;
        font-size: inherit;
        padding: 0;
        word-break: normal;
        writing-mode: inherit;
      }
    }




    /* Text */
    p {
      font-size: inherit;
      line-height: inherit;
      margin-block: 1.25em;
      text-wrap: pretty;
    }


    :is(h1, h2, h3, h4, h5, h6) {
      color: var(--text-primary);
      font-weight: 700;
      text-wrap: pretty;


      &+*:not(&) {
        margin-block-start: 0;
      }
    }


    h1 {
      font-size: var(--font-size-h1, var(--font-size-7));
      letter-spacing: -0.02em;
      line-height: 1.1111111;
      margin-block: 0 0.8888889em;
    }


    h2 {
      font-size: var(--font-size-h2, var(--font-size-5, 2rem));
      letter-spacing: -0.02em;
      line-height: 1.3333333;
      margin-block: 2em 1em;
    }


    h3 {
      font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
      letter-spacing: -0.01em;
      line-height: 1.6;
      margin-block: 1.6em 0.6em;
    }


    h4 {
      font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
      letter-spacing: -0.01em;
      line-height: 1.5;
      margin-block: 1.5em 0.5em;
    }


    h5 {
      font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
      line-height: 1;
      margin-block: 0 var(--size-1);
    }


    h6 {
      font-size: var(--font-size-h6, var(--font-size-1, 1rem));
      line-height: 1;
      margin-block: 0 var(--size-1);
    }


    /** Overline */
    :is(.overline, hgroup p:first-of-type:first-child) {
      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
          oklch(from var(--text-muted) calc(l * 0.75) c h));
      font-size: var(--font-size-0);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }


    hgroup {
      &>p {
        margin: 0;
      }


      &> :where(h1, h2, h3, h4, h5, h6) {
        margin-block: 0 0.4em;
      }


      &+* {
        margin-block-start: 3em;
      }


      /* Body paragraphs after the heading */
      &>p:not(:first-of-type:first-child) {
        color: oklch(from currentColor l c h / 75%);
        font-size: var(--font-size-3);
        line-height: 1.6;
      }


      &>p+p {
        margin-block-start: 0.75em;
      }
    }


    /* Lists */
    ul:not([class]) {
      list-style-type: disc;
    }


    ol:not([class]) {
      list-style-type: decimal;
    }


    :where(ul, ol):not([class]) {
      display: grid;
      font-size: inherit;
      gap: 0.5em;
      line-height: inherit;
      margin-block-end: 1.25em;
      margin-block-start: 1.25em;
      padding-inline-start: 1.625em;


      li {
        padding-inline-start: 0.375em;
      }
    }


    /* Nested lists */
    :where(ul ul),
    :where(ul ol),
    :where(ol ul),
    :where(ol ol) {
      margin-block-end: 0.75em;
      margin-block-start: 0.75em;
    }


    /* Description lists */
    :where(dl) {
      font-size: inherit;
      line-height: inherit;
      margin-block-end: 1.25em;
      margin-block-start: 1.25em;


      dt {
        font-weight: 700;
        margin-block-start: 1.25em;
      }


      dd {
        margin-block-start: 0.5em;
        padding-inline-start: 1.625em;
      }
    }


    /* Figures */
    figure {
      display: grid;
      gap: var(--size-2);
      margin-block: var(--size-7);
      place-items: center;


      &>* {
        margin-block: 0;
      }


      & figcaption {
        font-size: var(--font-size-0);
        text-wrap: pretty;
      }
    }


    /* Remove top margin from first child */
    &> :first-child {
      margin-block-start: 0;
    }


    /* Remove bottom margin from last child */
    &> :last-child {
      margin-block-end: 0;
    }


    /* Horizontal rules */
    hr {
      &+* {
        margin-block-start: 0;
      }
    }


    /* Inline text elements */
    :where(ins, u, abbr, dfn) {
      text-decoration: underline;
      text-underline-offset: 1px;


      @supports (-moz-appearance: none) {
        text-underline-offset: 2px;
      }
    }


    :where(abbr, dfn) {
      font-style: normal;
      text-decoration: var(--color-9) underline dotted;


      &[title] {
        cursor: help;
        text-underline-offset: 1px;
      }


      @supports (-moz-appearance: none) {
        text-underline-offset: 2px;
      }
    }


    sup {
      font-size: 0.5em;
      vertical-align: super;
    }


    :where(del, ins) {
      color: var(--color-9);
    }


    small {
      font-size: max(0.5em, var(--font-size-0, 0.75rem));
    }


    cite {
      font-style: italic;
    }


    /* Code */
    :where(code, kbd, samp, pre) {
      font-family: var(--font-mono);
    }


    code {
      background-color: oklch(0 0 0 / 18%);
      border-radius: var(--border-size-3);
      font-size: 0.9em;
      padding: 0.1ex 0.3ex;
    }


    :where(kbd, var) {
      background-color: var(--text-muted);
      border-color: var(--text-muted);
      border-radius: var(--radius-2);
      border-width: var(--border-size-1);
      color: var(--text-muted-contrast);
      padding: 0.1ex 0.3ex;
    }


    :not(pre) code,
    kbd {
      word-break: break-word;
    }


    :not(pre) code {
      border-radius: var(--border-radius, var(--radius-2));
      padding: 0.5ex;
      writing-mode: lr;
    }


    mark {
      border-radius: var(--radius-2);
      box-decoration-break: clone;
      padding: .1ex .3ex;
      vertical-align: baseline;
    }


    s {
      text-decoration: line-through;
    }


    sub {
      font-size: 0.75em;
      vertical-align: sub;
    }
  }
}