/* ucli-kit prose.css, version 4 ("Plain"). Astro sites only: the reset that replaces Tailwind's
   preflight, element defaults, and the page-level layouts of the home and install pages.
   The docs never load this file (Material has its own element styles). */

*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--u-rule); }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--u-paper); color: var(--u-ink); font: var(--u-fs-body)/1.6 var(--u-font-sans); overflow-wrap: break-word; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--u-ink); outline-offset: 2px; }
code, pre { font-family: var(--u-font-mono); }
code { font-size: .9em; }
:not(pre) > code { white-space: nowrap; }
h1, h2, h3, h4, h5, h6 { line-height: 1.15; margin: 0; font-size: inherit; font-weight: 700; }
button, input { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Home hero and install body */
.u-hero { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 56px; padding: 72px 0 64px; align-items: end; }
.u-lede { font-size: var(--u-fs-lede); line-height: 1.5; color: var(--u-ink-2); max-width: 36em; margin: 20px 0 0; }
.u-ibody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 64px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--u-rule); }
.u-ibody > :first-child { grid-row: span 2; }
.u-ilist { margin: 0; padding: 0; list-style: none; counter-reset: i; }
.u-ilist li { counter-increment: i; position: relative; padding: 12px 0 12px 32px; border-top: 1px solid var(--u-rule); }
.u-ilist li::before { content: counter(i); position: absolute; left: 0; font-family: var(--u-font-mono); color: var(--u-ink-2); }
@media (max-width: 900px) {
  .u-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 0; }
  .u-ibody { grid-template-columns: minmax(0, 1fr); }
  .u-ibody > :first-child { grid-row: auto; }
}
@media (max-width: 720px) { .u-hero { padding: 36px 0 40px; } }