@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600&family=Literata:opsz,wght@7..72,300;7..72,400;7..72,500;7..72,600&display=swap');
:root{
  --md-text-font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --md-code-font:ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Literata",Georgia,serif;
  --p1-bg:#fbfbf8; --p1-bg-2:#f5f5f0; --p1-text:#0c0c0f; --p1-text-2:#3f4452; --p1-text-3:#6b7180; --p1-line:rgba(8,9,11,.1); --p1-accent:#65a30d; --p1-accent-deep:#3b6a00;
}
[data-md-color-scheme="p1"]{
  --md-default-bg-color:var(--p1-bg); --md-default-fg-color:var(--p1-text); --md-default-fg-color--light:var(--p1-text-2); --md-default-fg-color--lighter:var(--p1-text-3); --md-default-fg-color--lightest:var(--p1-line);
  --md-primary-fg-color:var(--p1-bg); --md-primary-fg-color--light:var(--p1-bg); --md-primary-fg-color--dark:var(--p1-bg-2); --md-primary-bg-color:var(--p1-text);
  --md-accent-fg-color:var(--p1-accent-deep); --md-typeset-a-color:var(--p1-accent-deep);
  --md-code-bg-color:#f1f1ea; --md-code-fg-color:#2b2f3a; --md-footer-bg-color:#10100f; --md-footer-bg-color--dark:#0b0b0a; --md-footer-fg-color:#f4f2eb; --md-footer-fg-color--light:#b8b6ae; --md-footer-fg-color--lighter:#898781;
  --md-admonition-fg-color:var(--p1-text); --md-typeset-table-color:var(--p1-line);
}
body{-webkit-font-smoothing:antialiased}
/* header like 1p.dev */
.md-header{background:var(--p1-bg);color:var(--p1-text);border-bottom:1px solid var(--p1-line);box-shadow:none}
.md-header__button.md-logo img{height:1.7rem;width:auto}
.md-header__title{font-family:var(--md-text-font);font-weight:500;font-size:.95rem;color:var(--p1-text-2)}
.md-header__title .md-ellipsis{color:var(--p1-text-2)}
.md-search__form{background:#fff;border:1px solid var(--p1-line);border-radius:4px;box-shadow:none}
.md-search__input{color:var(--p1-text)} .md-search__input::placeholder{color:var(--p1-text-3)}
.md-search__icon{color:var(--p1-text-3)}
.md-tabs{display:none}
/* sidebar: bigger, persistent */
.md-grid{max-width:80rem}
.md-sidebar--primary{width:16.5rem}
.md-sidebar--primary .md-sidebar__scrollwrap{padding-right:.5rem}
.md-nav--primary .md-nav__title{display:none}
.md-nav__item .md-nav__link{font-family:var(--md-text-font);font-size:.82rem;line-height:1.4;padding:.22rem 0;color:var(--p1-text-2)}
.md-nav__link:hover,.md-nav__link:focus{color:var(--p1-text)}
.md-nav__link--active,.md-nav__link--active:hover{color:var(--p1-text);font-weight:600}
.md-nav__item--section>.md-nav__link,.md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--p1-text-3);margin-top:1.2rem}
.md-nav__item--section:first-child>.md-nav__link{margin-top:.2rem}
.md-nav__list .md-nav__list{border-left:1px solid var(--p1-line);margin-left:.15rem;padding-left:.7rem}
.md-sidebar--secondary .md-nav__title{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p1-text-3);font-weight:600;box-shadow:none}
.md-sidebar--secondary .md-nav__link{font-size:.76rem;color:var(--p1-text-3)}
/* typography */
.md-typeset{font-size:.88rem;line-height:1.6;color:var(--p1-text)}
.md-typeset h1{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;font-size:2.4rem;line-height:1.12;color:var(--p1-text);margin:0 0 1.2rem}
.md-typeset h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;font-size:1.6rem;line-height:1.2;margin:2.4rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--p1-line)}
.md-typeset h3{font-family:var(--md-text-font);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;margin:1.8rem 0 .5rem}
.md-typeset h4{font-family:var(--md-text-font);font-weight:600;font-size:.9rem}
.md-typeset p,.md-typeset li{color:var(--p1-text-2)}
.md-typeset a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.md-typeset a:hover{color:var(--p1-accent)}
.md-typeset code{border-radius:3px;font-size:.82em;padding:.1em .35em}
.md-typeset pre>code{border-radius:4px;border:1px solid var(--p1-line)}
.md-typeset table:not([class]){border:1px solid var(--p1-line);border-radius:4px;font-size:.82rem}
.md-typeset table:not([class]) th{background:#eef3e2;font-weight:600;color:var(--p1-text)}
.md-typeset table:not([class]) tr:nth-child(even) td{background:#f5f5f0}
.md-typeset .admonition,.md-typeset details{border:1px solid var(--p1-line);border-left:3px solid var(--p1-accent);border-radius:4px;box-shadow:none;background:#fff;font-size:.84rem}
.md-typeset .admonition-title,.md-typeset summary{background:transparent;font-weight:600}
.md-typeset img{border-radius:4px;border:1px solid var(--p1-line)}
.md-content__inner{margin-top:1.5rem}
.md-footer-meta{background:#0b0b0a}
.md-footer__inner{padding:1.2rem .6rem}
.md-footer__title{font-family:var(--md-text-font)}
.md-copyright{font-size:.7rem;color:#898781}
@media screen and (max-width:76.1875em){.md-header{background:var(--p1-bg)} .md-nav--primary .md-nav__title{display:block;background:var(--p1-bg);color:var(--p1-text)}}

/* ---- Navigation type scale ----
   The docs body is 17px. Keep the rails visibly supporting it: left navigation
   at 14px, the right-hand contents at 13px, and their labels at 11px or below.
   These are px values so Material's changing root size cannot inflate the rails
   at wide viewports. */
@media screen and (min-width:1220px){
  .md-sidebar--primary .md-nav__item .md-nav__link{
    font-size:14px;
    line-height:1.35;
    padding:3px 0;
  }
  .md-sidebar--primary .md-nav__item--section>.md-nav__link,
  .md-sidebar--primary .md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link{
    font-size:11px;
    line-height:1.3;
    letter-spacing:.12em;
    margin-top:20px;
    padding:2px 0;
  }
  .md-sidebar--primary .md-nav__item--section:first-child>.md-nav__link{margin-top:4px}
}
.md-sidebar--secondary .md-nav__title{
  min-height:0;
  font-size:10.5px;
  line-height:1.25;
  letter-spacing:.12em;
  padding:0 0 5px;
}
.md-sidebar--secondary .md-nav__link{
  font-size:13px;
  line-height:1.35;
  padding:2px 0;
}

/* On the compact header, the drawer control leads and the logo follows it. */
@media screen and (max-width:1219px){
  .md-header__button[for=__drawer]{order:-1}
}

/* ---- Reading measure and column separation ----
   The content column had NO max-width, so it took every pixel between the two
   rails: 1317px of prose at 1920px, about 162 characters a line against the
   65-80 that reads comfortably. p1-footer.css sets .md-main__inner{max-width:
   none} with a comment that "the reading column keeps its measure", but nothing
   ever set that measure. This sets it.

   Two things worth knowing before editing these numbers:

   1. Material's own rule is
        .md-sidebar--primary:not([hidden])~.md-content>.md-content__inner{margin-left:1.2rem}
      at (0,4,0). A plain `.md-content__inner{margin:auto}` LOSES to it, and the
      column silently stays hard against the left rail while its width looks
      correct. The selectors below match that specificity deliberately.
   2. Sizes are in PIXELS. The root font-size is not fixed: Material sets
      125% (20px), rising to 137.5% (22px) at 100em/1600px and 150% at 125em.
      A rem here means different things at different widths.

   Breakpoint: 1220px, which is where Material's 76.25em actually lands. Its em
   media queries resolve against the 16px INITIAL font size, not the 20px root,
   so 76.25em is 1220px. Below it the primary nav becomes the drawer. */
@media screen and (min-width:1220px){
  /* both rails and the centred column inside one 1760px shell */
  .md-main__inner{max-width:80rem}
  /* 736px box - 48px padding each side = 640px of prose, about 77 characters */
  [dir=ltr] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner,
  [dir=ltr] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner,
  .md-content > .md-content__inner{
    max-width:736px;
    margin-left:auto;
    margin-right:auto;
    padding-left:48px;
    padding-right:48px;
  }
}
/* Nav is a drawer here but the TOC is still on screen, so the column would
   otherwise stretch to ~116 characters. */
@media screen and (min-width:960px) and (max-width:1219px){
  .md-content > .md-content__inner{
    max-width:736px;
    margin-left:auto;
    margin-right:auto;
    padding-left:32px;
    padding-right:32px;
  }
}

/* ---- Page gutter, and room for the nav ----
   The three-column block sat flush against both viewport edges (nav at x=0,
   TOC touching the right edge) while the header carried an 80px margin, which
   is the mismatch that read as squashed. `.md-main__inner` is the element to
   size: `.md-main` is always full width, so measuring that one suggests the
   grid cannot be constrained when it can.

   The gutter, the two rails and the 736px reading measure all draw on the same
   width, so this is budgeted per band rather than set once. The reading measure
   is fixed; the gutter and the rails give way around it, and at the narrow end
   the space comes off the TOC (which has no wrapping labels) instead.

   THE TRAP that makes widening the nav look broken: Material ships
     @supports selector(::-webkit-scrollbar){
       [dir=ltr] .md-sidebar__inner{ padding-right: calc(100% - 11.5rem) }
     }
   as a scrollbar gutter. That padding is a percentage of the rail, so it GROWS
   exactly as fast as the rail does and the links never get wider - the nav can
   go 275px -> 320px with every wrapped label still wrapping. Reset it first,
   then the width does something. */
@media screen and (min-width:1220px){
  .md-sidebar--primary .md-sidebar__inner{ padding-right:.6rem; }
}
/* wide: full 80px gutter, matching the header, and a nav with real room */
@media screen and (min-width:1600px){
  .md-main__inner{ width:min(100% - 160px, 80rem); margin-left:auto; margin-right:auto; }
  .md-sidebar--primary{ width:340px; }
}
@media screen and (min-width:1400px) and (max-width:1599px){
  .md-main__inner{ width:min(100% - 96px, 80rem); margin-left:auto; margin-right:auto; }
  .md-sidebar--primary{ width:300px; }
}
/* narrow desktop: keep a visible gutter by taking it from the TOC, never from
   the prose. Below 1220px the nav is a drawer and none of this applies. */
@media screen and (min-width:1220px) and (max-width:1399px){
  .md-main__inner{ width:min(100% - 48px, 80rem); margin-left:auto; margin-right:auto; }
  .md-sidebar--primary{ width:270px; }
  .md-sidebar--secondary{ width:200px; }
}

/* ---- One vertical line: header, content, footer ----
   The header carried its own 80px only at the very widest sizes and sat flush
   at 1440 (Material gives .md-header__inner a .2rem padding and no width), so
   the three regions disagreed. Give the header and the footer the SAME width
   expression as .md-main__inner above, band for band, and they share one edge
   at every width. `padding-inline:0` removes Material's own .2rem, which would
   otherwise inset the logo a few pixels past the line. */
@media screen and (min-width:1600px){
  .md-header__inner{ width:min(100% - 160px, 80rem); margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
}
@media screen and (min-width:1400px) and (max-width:1599px){
  .md-header__inner{ width:min(100% - 96px, 80rem); margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
}
@media screen and (min-width:1220px) and (max-width:1399px){
  .md-header__inner{ width:min(100% - 48px, 80rem); margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
}