/* Blog post. A port of 05 Blog Post.dc.html: its inline styles as classes, its <helmet> rules as written.
   Breakpoints: tablet <= 1023px, phone <= 640px. Shared tokens and components live in site.css. */

.bp-sec{position:relative;border-top:1px solid #e3ecf4;padding-block:clamp(48px,6vw,80px) clamp(64px,7vw,96px)}
.bp-intro{display:flex;flex-direction:column;gap:20px;max-width:880px}
.bp-back{align-self:flex-start;font:500 14px/1 var(--font);color:#0872b0}
.bp-h1{margin:12px 0 0;font:440 clamp(30px,4vw,40px)/1.2 var(--font);letter-spacing:-.02em;color:#0b2239;text-wrap:pretty}
.bp-lede{margin:0;font:440 18px/1.55 var(--font);color:#4d5f75;text-wrap:pretty}

/* Post and side column share a wrapping row; the side column sticks only while both fit (620 + 88 + 260). */
.bp-row{display:flex;flex-wrap:wrap;gap:56px 88px;align-items:flex-start;margin-top:48px;padding-top:48px;border-top:1px solid #e3ecf4;container-type:inline-size}
.bp-main{flex:999 1 620px;min-width:0;max-width:760px;display:flex;flex-direction:column}
.bp-body{min-width:0}
.bp-aside{flex:1 1 260px;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:36px;top:24px}
@container (min-width:968px){.bp-aside{position:sticky;max-height:calc(100vh / var(--zoom) - 48px);overflow:auto}}

.bp-more{display:flex;flex-direction:column;margin-top:56px}
.bp-more-h{margin:0;padding-bottom:16px;border-bottom:1px solid #e3ecf4;font:500 20px/1.3 var(--font);color:#0b2239}
.bp-ri{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-bottom:1px solid #eef3f8;color:inherit}
.bp-ri:hover{color:inherit;background:#fafcfe}
.bp-rt{font:500 17px/1.35 var(--font);color:#0b2239;text-wrap:pretty}
.bp-rd{font:440 13px/1.4 var(--font);color:#647489}

.bp-toc{display:flex;flex-direction:column}
.bp-toc-h{padding:0 0 10px 12px;font:500 14px/1 var(--font);color:#0b2239}
.bp-toc a{padding:7px 12px;border-left:2px solid #e3ecf4;font:440 14px/20px var(--font);color:#4d5f75}
.bp-toc a:hover{color:#0b2239;border-left-color:#b7d9f0}
.bp-toc a[aria-current="true"]{border-left-color:#0872b0;font-weight:500;color:#0b2239}
.bp-facts{margin:0;display:flex;flex-direction:column;gap:16px;font:440 14px/1.4 var(--font)}
.bp-facts>div{display:flex;flex-direction:column;gap:4px}
.bp-facts dt{color:#647489}
.bp-facts dd{margin:0;color:#0b2239}
.bp-run{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid #e3ecf4;border-radius:8px}
.bp-run-h{font:500 16px/1.35 var(--font);color:#0b2239}
.bp-run-p{font:440 14px/1.5 var(--font);color:#4d5f75}
.bp-run-a{display:inline-flex;align-items:center;justify-content:center;height:40px;margin-top:4px;border-radius:4px;background:var(--grad);color:#fff;font:550 14px/1 var(--font)}
.bp-run-a:hover{color:#fff;background:var(--grad-hover)}

/* Post body (the design's .pz) */
.pz{font:440 17px/1.7 var(--font);color:#33475e}
.pz h2{margin:48px 0 14px;font:500 24px/1.3 var(--font);letter-spacing:-.01em;color:#0b2239;scroll-margin-top:24px}
.pz>h2:first-child{margin-top:0}
.pz p{margin:0 0 20px;text-wrap:pretty}
.pz strong{font-weight:600;color:#0b2239}
.pz a{color:#0872b0;text-decoration:underline;text-decoration-color:#b7d9f0;text-underline-offset:3px}
.pz a:hover{text-decoration-color:#0872b0}
.pz code{font:400 .84em/1 var(--mono);background:#eef4fa;color:#0b2239;padding:2px 5px;border-radius:3px;overflow-wrap:break-word}
.pz pre{margin:0 0 24px;padding:20px 22px;max-height:480px;overflow:auto;border:1px solid #e3ecf4;border-radius:6px;background:#f5f9fd;font:400 13.5px/1.6 var(--mono);color:#0b2239}
.pz pre code{display:block;padding:0;background:none;font:400 13.5px/1.6 var(--mono);color:#0b2239;white-space:pre}
.pz pre.output-block{background:#fff;border-style:dashed}
.pz .output-label{margin:0 0 8px;font:500 13px/1 var(--font);color:#647489}
.pz th{text-align:left;vertical-align:bottom}
.pz td{vertical-align:top}
.pz img{display:block;width:100%;height:auto;border:1px solid #e3ecf4}
.pz .hljs-keyword,.pz .hljs-built_in,.pz .hljs-literal{color:#5a41c2}
.pz .hljs-string{color:#0f7a5a}
.pz .hljs-number{color:#b4540a}
.pz .hljs-comment{color:#647489}
.pz .hljs-title,.pz .hljs-function{color:#0872b0}

/* The post bodies were written for the old dark page and carry inline colours, borders and spacing.
   The design's values win over them here; inline text-align (numeric columns) is kept. */
.pz ol,.pz ul{margin:0 0 24px !important;padding:0 0 0 22px !important;font-size:inherit !important;line-height:inherit !important;color:inherit !important}
.pz li{margin:0 0 10px !important;padding-left:4px}
.pz p[style*="color"]{color:#647489 !important}
.pz a[style]{color:#0872b0 !important}
.pz code[style]{background:#eef4fa !important;color:#0b2239 !important;padding:2px 5px !important;border-radius:3px !important}
.pz pre[style]{padding:20px 22px !important;border-radius:6px !important;background:#f5f9fd !important;color:#0b2239 !important;font-size:13.5px !important;line-height:1.6 !important}
.pz div{overflow-x:auto;margin:0 0 24px !important}
.pz table{width:100%;border-collapse:collapse;font:440 15px/1.45 var(--font) !important;color:#33475e !important}
.pz tr{border:0 !important}
.pz th{padding:10px 12px 10px 0 !important;border-bottom:1px solid #dde6ef !important;font-weight:500 !important;color:#0b2239 !important}
.pz td{padding:10px 12px 10px 0 !important;border-bottom:1px solid #eef3f8 !important;color:#33475e !important}
.pz img{margin:8px 0 28px !important;border-radius:6px !important}

/* Keyboard focus */
.bp-sec a:focus-visible{outline:2px solid #0872b0;outline-offset:2px}
.bp-aside a:focus-visible,.bp-ri:focus-visible{outline-offset:-2px}
.pz pre:focus-visible,.pz div:focus-visible{outline:2px solid #0872b0;outline-offset:-2px}

@media (max-width:1023px){
.bp-toc{display:none}
.bp-aside{flex-basis:100%}
}
@media (max-width:640px){
.bp-sec{padding-block:32px 56px}
.bp-h1{font-size:26px;line-height:1.25}
.bp-lede{font-size:16px}
.bp-row{margin-top:32px;padding-top:32px;gap:48px}
.bp-rt{font-size:16px}
.pz{font-size:16px;line-height:1.65}
.pz h2{margin:40px 0 12px;font-size:21px}
.pz pre,.pz pre[style]{padding:14px 16px !important;margin-inline:-16px;border-radius:0 !important;border-inline:0;font-size:12.5px !important}
.pz pre code{font-size:12.5px}
.pz table{font-size:14px !important}
.pz div{margin-inline:-16px !important;padding-inline:16px}
}