:root{
    --paper:#F7F7EE; --ink:#1E1E1E; --muted:#566573; --rule:#D3DADF;
    --link:#430009; --header:#FF2C37; --bronze:#A8754A; --silver:#8C979F; --gold:#B8962E;
    color-scheme:light dark;
      }
@media (prefers-color-scheme:dark){
    :root{--paper:#161C22;--ink:#E3E8EC;--muted:#9AA7B2;--rule:#2E3943;--link:#8FB3F0;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
font:17px/1.6 "IBM Plex Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;}
.wrap{max-width:44rem;margin:0 auto;padding:3rem 1.5rem 4rem}
header.site{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem 1.5rem;
border-bottom:1px solid var(--rule);padding-bottom:1rem;margin-bottom:2.5rem}
.brand{font-weight:600;font-size:1.05rem;color:var(--ink);text-decoration:none}
.brand span{color:var(--muted);font-weight:400}
nav a{margin-left:1.25rem;color:var(--muted);text-decoration:none}
nav a:first-child{margin-left:0}
nav a:hover,nav a[aria-current]{color:var(--ink)}
h1{font-size:2.1rem;line-height:1.2;font-weight:600;margin:0 0 1rem;letter-spacing:-.01em;color:var(--header)}
h2{font-size:1.25rem;font-weight:600;margin:2.5rem 0 .5rem;color:var(--header)}
h3{font-size:1.05rem;font-weight:600;margin:1.5rem 0 .25rem}
p,li{max-width:68ch}
ul{padding-left:1.25rem}
li{margin:.3rem 0}
a{color:var(--link);text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:2px}
.lede{font-size:1.15rem;color:var(--muted)}
.meta{color:var(--muted);font-size:.95rem}
code{font-size:.9em;background:var(--rule);padding:.05em .3em;border-radius:3px;overflow-wrap:anywhere}
/* layered warehouse diagram */
.strata{margin:2rem 0;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.strata div{padding:.85rem 1rem;border-top:1px solid var(--rule);border-left:6px solid}
.strata div:first-child{border-top:0}
.strata .src{border-left-color:var(--muted)}
.strata .b{border-left-color:var(--bronze)}
.strata .s{border-left-color:var(--silver)}
.strata .g{border-left-color:var(--gold)}
.strata strong{display:block}
.strata small{color:var(--muted);font-size:.92rem}
footer.site{margin-top:3.5rem;padding-top:1rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.92rem}
footer.site a{color:var(--muted)}