:root {

    --measure: 42rem;
    --bg: #faf9f7; --fg: #27272c; --muted: #67676f;
    --rule: #e6e4df; --link: #9c2f35; --card: #f2f0eb; --code: #96602c;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #1a1a1d; --fg: #d5d5da; --muted: #93939c;
      --rule: #2f2f34; --link: #e59aa0; --card: #222226; --code: #d0937a;
    }
  }
  :root[data-theme="dark"] {
    --bg: #1a1a1d; --fg: #d5d5da; --muted: #93939c;
    --rule: #2f2f34; --link: #e59aa0; --card: #222226; --code: #d0937a;
  }
  :root[data-theme="light"] {
    --bg: #faf9f7; --fg: #27272c; --muted: #67676f;
    --rule: #e6e4df; --link: #9c2f35; --card: #f2f0eb; --code: #96602c;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);

    font: 19px/1.65 Charter, "Bitstream Charter", Cambria, Georgia, serif;
    padding: 4rem 1.25rem 6rem;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  main { max-width: var(--measure); margin: 0 auto; }

  h1 {
    font-size: 1.85rem; line-height: 1.2; margin: 0 0 .4rem;
    letter-spacing: -.015em;
  }
  .aka {
    font-size: .8rem; color: var(--muted); margin: 0 0 2rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .lede { font-size: 1.2rem; margin: 0 0 2.5rem; }

  h2 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--muted); font-weight: 600; margin: 2.75rem 0 1rem;
    padding-bottom: .4rem; border-bottom: 1px solid var(--rule);
    font-family: ui-sans-serif, system-ui, sans-serif;
  }

  .item { margin: 0 0 1.4rem; }
  .item b { font-weight: 600; }
  .item p { margin: 0; }

  ul { list-style: none; padding: 0; margin: 0; }
  ul li { margin: 0 0 1rem; }

  a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
  a:hover { border-bottom-color: currentColor; }

  .note { color: var(--muted); font-size: .95rem; }

  footer {
    margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: .9rem;
  }
  footer a { margin-right: 1.25rem; display: inline-block; }

body { padding-top: 2.25rem; }

.site-nav {
  max-width: var(--measure); margin: 0 auto 3rem; display: flex;
  align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.site-nav .brand {
  display: flex; align-items: center;
  color: var(--fg); border-bottom: 0;
}

.site-nav .brand .mark { height: 1.3rem; width: auto; display: block; }
.site-nav .brand:hover { opacity: .65; border-bottom: 0; }
.site-nav .nav-links { font-size: .85rem; }
.site-nav .nav-links a { margin-left: 1.1rem; color: var(--muted); }
.site-nav .nav-links a:first-child { margin-left: 0; }
.site-nav .nav-links a[aria-current="page"] { color: var(--fg); }

footer { max-width: var(--measure); margin-left: auto; margin-right: auto; }

.home-header h1 { margin-bottom: .75rem; }
.home-header .lede { margin-bottom: 3rem; }

.post-list > li { margin: 0 0 2.25rem; }
.post-link {
  font-size: 1.3rem; font-weight: 600; color: var(--fg);
  line-height: 1.35; display: inline-block;
}
.post-link:hover { color: var(--link); border-bottom-color: transparent; }

.post-meta {
  margin: .3rem 0 0; font-size: .8rem; color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.post-meta .sep { margin: 0 .5rem; }
.post-meta .tag {
  margin-right: .45rem; padding: .05rem .4rem;
  background: var(--card); border-radius: 3px; font-size: .74rem;
}
.post-excerpt { margin: .5rem 0 0; color: var(--muted); font-size: .96rem; }

.tryit {
  margin: 1.5rem 0; padding: .2rem .9rem; border-radius: 4px;
  border: 1px solid var(--rule); background: var(--card);
}
.tryit > summary {
  cursor: pointer; padding: .6rem 0; list-style: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .85rem; font-weight: 600; color: var(--fg);
}
.tryit > summary::-webkit-details-marker { display: none; }

.tryit > summary::before {
  content: "\25B8"; display: inline-block; width: 1rem;
  color: var(--muted); transition: transform .15s ease;
}
.tryit[open] > summary::before { transform: rotate(90deg); }
.tryit > summary:hover { color: var(--link); }
.tryit > *:not(summary) { font-size: 1.02rem; }
.tryit > p:last-child { margin-bottom: .9rem; }

.runbox {
  margin: 0 0 2rem; padding: .7rem .9rem; border-radius: 4px;
  border-left: 2px solid var(--link); background: var(--card);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem; line-height: 1.6; color: var(--muted);
}
.runbox b { color: var(--fg); font-weight: 600; }
.runbox code { font-size: .95em; }

.part-nav {
  margin: 0 0 2.5rem; padding: .7rem .9rem;
  background: var(--card); border-radius: 4px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem; line-height: 1.75; color: var(--muted);
}
.part-nav strong { color: var(--fg); font-weight: 600; }
.part-nav a { color: var(--muted); }
.part-nav a:hover { color: var(--link); }
hr + .part-nav { margin-bottom: 0; }

.post-header { margin-bottom: 2.75rem; }
.post-header .kicker {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--link); font-weight: 600; margin: 0 0 .6rem;
}

.post-header h1 {
  font-size: 2.9rem; line-height: 1.12; margin: 0 0 .55rem;
  letter-spacing: -.025em;
}

.post-header .deck {
  font-size: 1.2rem; line-height: 1.5; color: var(--muted);
  margin: 0 0 1.1rem; max-width: 34rem;
}
.post-header .dateline {
  margin: 0; padding: .5rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}

.post-header::after {
  content: ""; display: block; height: 3px; width: 4.5rem;
  background: var(--link); margin-top: 1.25rem;
}

.post h2 {
  font-size: 1.15rem; text-transform: none; letter-spacing: -.005em;
  color: var(--fg); font-weight: 600; border-bottom: none;
  padding-bottom: 0; margin: 2.5rem 0 .75rem;
  font-family: inherit;
}
.post h3 {
  font-size: 1rem; font-weight: 600; margin: 2rem 0 .5rem;
}
.post p { margin: 0 0 1.3rem; }

.post p.lead::first-letter {
  float: left; font-size: 3.1em; line-height: .82; font-weight: 700;
  margin: .06em .08em 0 0; color: var(--link);
}
.post ul, .post ol { list-style: revert; padding-left: 1.4rem; margin: 0 0 1.15rem; }
.post ul li, .post ol li { margin: 0 0 .4rem; }

.post blockquote {
  margin: 1.5rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 2px solid var(--rule); color: var(--muted);
}
.post blockquote p:last-child { margin-bottom: 0; }

.post code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em; background: var(--card); color: var(--code);
  padding: .1em .35em; border-radius: 3px;
}

.post a > code, .post pre code, .post h1 code, .post h2 code, .post h3 code { color: inherit; }

.post figure.highlight { margin: 0 0 1.15rem; }
.post figure.highlight > pre { margin: 0; }

.post pre {
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: .9rem 1rem; overflow-x: auto; margin: 0 0 1.15rem;
  font-size: .95rem; line-height: 1.55;
}
.post pre code { background: none; padding: 0; font-size: inherit; }

.post img { max-width: 100%; height: auto; }
.post table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.15rem;
  font-size: .92rem; display: block; overflow-x: auto;
}
.post th, .post td {
  text-align: left; padding: .45rem .7rem;
  border-bottom: 1px solid var(--rule);
}
.post th { font-weight: 600; }

.post hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.post-nav {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem;
}
.post-nav .next { margin-left: auto; text-align: right; }

#theme-toggle {
  margin-left: 1.1rem; padding: .12rem .5rem;
  font: inherit; font-size: .78rem; line-height: 1.5;
  color: var(--muted); background: var(--card);
  border: 1px solid var(--rule); border-radius: 4px;
  cursor: pointer; vertical-align: baseline;
}
#theme-toggle:hover { color: var(--fg); border-color: var(--muted); }
#theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

@media (max-width: 34rem) {

  body { padding: 1.5rem 1.05rem 4rem; font-size: 18px; }

  .site-nav {
    margin-bottom: 2.25rem; gap: .5rem .75rem;
  }
  .site-nav .nav-links { margin-left: -.05rem; }
  .site-nav .nav-links a:first-child { margin-left: 0; }
  #theme-toggle { margin-left: .9rem; }

  h1 { font-size: 1.6rem; }
  .post-header h1 { font-size: 1.8rem; }
  .lede { font-size: 1.02rem; }
  .home-header .lede { margin-bottom: 2.25rem; }
  .post-list > li { margin-bottom: 1.9rem; }
  .post-link { font-size: 1.08rem; }

  .post pre { padding: .75rem .8rem; font-size: .85rem; }
  .post blockquote { padding-left: .9rem; }

  .post-nav { flex-direction: column; gap: .75rem; }
  .post-nav .next { margin-left: 0; text-align: left; }

  footer a { margin-right: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.diagram {
  margin: 1.75rem 0; padding: 1rem;
  background: #f6f5f1; border: 1px solid var(--rule); border-radius: 6px;
  overflow-x: auto; text-align: center;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .diagram { background: #e9e7e1; }
}
:root[data-theme="dark"] .diagram { background: #e9e7e1; }
.diagram svg { max-width: 100%; height: auto; display: inline-block; }

.diagram figcaption, .post figcaption {
  margin: .8rem auto 0; max-width: 34rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem; line-height: 1.5; color: #5c5b57; text-align: left;
}
.post figure { margin: 1.75rem 0; }
@media (max-width: 34rem) {
  .diagram { padding: .6rem; margin: 1.25rem -.35rem; }
}

.page-status { margin: 0 0 2.5rem; color: var(--muted); font-size: .98rem; }
.page-status-meta {
  display: block; margin-top: .5rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem; line-height: 1.6;
}

.post { position: relative; }

.gloss {
  margin: 0 0 .6rem; padding-left: .75rem;
  border-left: 3px solid var(--link);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem; line-height: 1.5; font-weight: 500;
  color: var(--fg);
}

@media (min-width: 72rem) {
  .post {
    --rail: 11.25rem;
    --rail-gap: 1.5rem;
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    column-gap: var(--rail-gap);
    align-items: start;
    width: calc(var(--rail) + var(--rail-gap) + var(--measure));
    margin-left: calc(-1 * (var(--rail) + var(--rail-gap)));
  }

  .post > * { grid-column: 2; min-width: 0; }

  .post > .gloss {
    grid-column: 1;
    margin: .3rem 0 0;
  }
}

.gloss-mark { display: none; }
@media (max-width: 71.99rem) {
  .gloss.popin { display: none; }
  .gloss.popin.open { display: block; }
  .gloss-mark {
    display: inline-block; margin-right: .5em; padding: 0 .4em;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--link); background: transparent;
    border: 1px solid currentColor; border-radius: 3px;
    cursor: pointer; vertical-align: .12em; line-height: 1.7; font-weight: 600;
  }
  .gloss-mark:hover, .gloss-mark[aria-expanded="true"] {
    color: var(--bg); background: var(--link); border-color: var(--link);
  }
}

.steps { margin: 1.75rem 0; }
.steps-frames {
  padding: 1rem; background: #f6f5f1; border: 1px solid var(--rule);
  border-radius: 6px; overflow-x: auto; text-align: center;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .steps-frames { background: #e9e7e1; }
}
:root[data-theme="dark"] .steps-frames { background: #e9e7e1; }
.steps-frames > svg { max-width: 100%; height: auto; }
.steps.steps-live .steps-frames { border-radius: 6px 6px 0 0; }
.steps.steps-live .steps-frames > svg { display: none; }
.steps.steps-live .steps-frames > svg.shown { display: inline-block; }

.steps-bar { display: none; }
.steps.steps-live .steps-bar {
  display: flex; align-items: center; justify-content: center; gap: 1.7rem;
  position: relative; height: 2rem; background: #16161a;
  border-radius: 0 0 6px 6px;
}
.steps-bar button {
  background: none; border: 0; padding: 0; width: 1.5rem; height: 1.5rem;
  color: #9a9aa2; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.steps-bar button:hover { color: #e8e8ec; }
.steps-bar button:focus-visible { outline: 2px solid #e59aa0; outline-offset: 2px; }
.steps-bar button svg { width: 1rem; height: 1rem; fill: currentColor; }
.steps-count {
  position: absolute; right: .9rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem; font-weight: 500; color: #fff;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 34rem) {
  .steps { margin: 1.25rem -.35rem; }
  .steps-frames { padding: .6rem; }
}

.post a > code {
  background: transparent; padding: 0;
  border-bottom: 1px solid currentColor;
}
.post a:has(> code) {
  background: var(--card); padding: .1em .4em; border-radius: 3px;
  border-bottom: none;
}
.post a:has(> code):hover { background: var(--rule); }

.post a:has(> code)::before {
  content: "↗\FE0E";
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .8em; opacity: .7; margin-right: .3em;
}

.toc {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem; line-height: 1.45;
}
.toc-title {
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 .35rem; }
.toc li.sub { padding-left: .9rem; font-size: .95em; }
.toc a {
  color: var(--muted); display: block;
  border-left: 2px solid transparent; padding-left: .6rem;
}
.toc a:hover { color: var(--fg); border-bottom: none; }
.toc a.active {
  color: var(--fg); border-left-color: var(--link); font-weight: 600;
}

@media (min-width: 72rem) {
  .toc {
    position: fixed; top: 5.5rem; bottom: 3rem;
    left: calc(50% + (var(--measure) / 2) + 1.5rem); width: 13rem;
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  }
}
@media (max-width: 71.99rem) {

  .toc {
    margin: .5rem 0 2.5rem; padding: .9rem 1rem;
    background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
    max-height: 60vh; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  }
  .toc a { border-left: none; padding-left: 0; }
  .toc a.active { border-left: none; }
}

:root {
  --tok-key: #8a4b9b; --tok-str: #45703a; --tok-fn: #3f6ea8;
  --tok-type: #8c6a24; --tok-num: #96602c; --tok-op: #35696f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tok-key: #b48ead; --tok-str: #a3be8c; --tok-fn: #8fadcd;
    --tok-type: #e0c68d; --tok-num: #d0937a; --tok-op: #8ec0cc;
  }
}
:root[data-theme="dark"] {
  --tok-key: #b48ead; --tok-str: #a3be8c; --tok-fn: #8fadcd;
  --tok-type: #e0c68d; --tok-num: #d0937a; --tok-op: #8ec0cc;
}
:root[data-theme="light"] {
  --tok-key: #8a4b9b; --tok-str: #45703a; --tok-fn: #3f6ea8;
  --tok-type: #8c6a24; --tok-num: #96602c; --tok-op: #35696f;
}

.post .highlight .k, .post .highlight .kd, .post .highlight .kn,
.post .highlight .kp, .post .highlight .kr, .post .highlight .kt { color: var(--tok-key); }
.post .highlight .s, .post .highlight .s1, .post .highlight .s2,
.post .highlight .se, .post .highlight .sb { color: var(--tok-str); }
.post .highlight .c, .post .highlight .c1, .post .highlight .cm,
.post .highlight .cs { color: var(--muted); font-style: italic; }
.post .highlight .nf, .post .highlight .nx { color: var(--tok-fn); }
.post .highlight .nc, .post .highlight .nb, .post .highlight .bp { color: var(--tok-type); }
.post .highlight .mi, .post .highlight .mf, .post .highlight .m { color: var(--tok-num); }
.post .highlight .o, .post .highlight .ow { color: var(--tok-op); }
.post .highlight .p { color: inherit; }

.post h2 {
  font-size: 1.45rem; font-weight: 700; margin-top: 3.25rem;
  padding-top: 1.1rem; border-top: none; position: relative;
}
.post h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.25rem; height: 2px; background: var(--link); opacity: .5;
  border-radius: 1px;
}
.post h2:first-of-type { margin-top: 2rem; }
.post h3 { font-size: 1.22rem; font-weight: 650; margin: 2.25rem 0 .6rem; }

.post h4 {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .92rem; font-weight: 650; letter-spacing: -.005em;
  margin: 2rem 0 .5rem; color: var(--fg);
}
.post h5, .post h6 {
  font-size: .78rem; font-weight: 600; margin: 1.5rem 0 .45rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.code-wrap { position: relative; }
.code-wrap .copy {
  position: absolute; top: .45rem; right: .45rem;
  padding: .15rem .5rem; font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.code-wrap:hover .copy, .code-wrap .copy:focus-visible { opacity: 1; }
.code-wrap .copy:hover { color: var(--fg); border-color: var(--muted); }