/* ferrisite-static/public/css/styles.fc658c858fb7004a0aa0a88c7ae62441c2f1dc94a5e18581c348a7918974f2778eb11eea54067b312dc2d8209b10b9032514aa2077d235752a77c0103cec569a.css */
html{--info-icon: url('https://www.grahambrooks.com/icons/info.svg');--sun-icon: url('https://www.grahambrooks.com/icons/sun.svg');--moon-icon: url('https://www.grahambrooks.com/icons/moon.svg');--next-icon: url('https://www.grahambrooks.com/icons/next.svg')}html{--color-mode: "light";--light: #fff;--dark:  rgb(28,28,30);--haze: #f2f5f7;--bubble: rgb(36,36,38);--accent: var(--haze);--bg: var(--light);--code-bg: var(--accent);--overlay: var(--light);--text: #141010;--font: 'Metropolis', sans-serif;--border-color: #eee;--inline-color: darkgoldenrod;--theme: rgb(52,199,89);--ease: ease;--scroll-thumb: rgba(0,0,0,.06);--search-border-color: transparent;--next-icon-path: url(../images/icons/double-arrow.svg);--never-icon-path: url(../images/sitting.svg)}html[data-mode="dark"]{--color-mode: "dark";--theme: rgb(48,209,88);--bg: var(--dark);--text: #eee;--text-light: #fff;--accent: var(--bubble);--overlay: var(--bubble);--border-color: transparent;--scroll-thumb: rgba(255,255,255,.06);--search-bg: var(--accent);--search-border-color: var(--accent)}html[data-mode="dark"] *{box-shadow:none !important}html[data-mode="dark"] .color_choice::after{background-image:var(--moon-icon)}@media (prefers-color-scheme: dark){html[data-mode="auto"]{--color-mode: "dark";--theme: rgb(48,209,88);--bg: var(--dark);--text: #eee;--text-light: #fff;--accent: var(--bubble);--overlay: var(--bubble);--border-color: transparent;--scroll-thumb: rgba(255,255,255,.06);--search-bg: var(--accent);--search-border-color: var(--accent)}html[data-mode="auto"] *{box-shadow:none !important}}blockquote+.highlight_wrap{margin-top:2.25rem}*{box-sizing:border-box;margin:0;padding:0;scrollbar-color:var(--scroll-thumb) transparent;scrollbar-width:thin}::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:.25rem}body,html{scroll-behavior:smooth;scroll-padding-top:1rem;font-kerning:normal;-webkit-text-size-adjust:100%;font-size:18px}@keyframes flash{0%{opacity:0}75%{opacity:0}100%{opacity:1}}body{font-family:var(--font);background-color:var(--bg);color:var(--text);line-height:1.5;margin:0 auto;position:relative;font-kerning:normal;display:flex;min-width:0;flex-direction:column;justify-content:space-between;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch;max-width:1440px;animation:0.67s flash ease-in}@media screen and (min-width: 1640px){body{max-width:1600px}}a{text-decoration:none;color:inherit}p{padding:0.75rem 0}p:empty{display:none}li,li p{padding:0.25rem 0}blockquote{opacity:0.8;padding:1rem;position:relative;quotes:"“" "”" "‘" "’";margin:0.75rem 0;display:flex;flex-flow:row wrap;background-repeat:no-repeat;background-size:5rem;background-position:50% 50%;position:relative;background-color:var(--accent);border-radius:0.25rem;overflow:hidden}blockquote::before{content:"";padding:2px;position:absolute;top:0;bottom:0;left:0;background:var(--theme)}blockquote p{padding-left:0.5rem !important;font-size:1.1rem !important;width:100%;font-style:italic}h1,h2,h3,h4,h5{font-family:inherit;font-weight:500;padding:0.33rem 0;color:inherit;line-height:1.35}h1{font-size:200%}h2{font-size:175%}h3{font-size:150%}h4{font-size:125%}h5{font-size:120%}h6{font-size:100%}img,svg,figure{max-width:100%;vertical-align:middle}img{height:auto;margin:1rem auto;padding:0}main{flex:1}@media screen and (min-width: 42rem){main{padding-bottom:45px}}ol,ul{list-style:none}b,strong{font-weight:500}hr{border:none;padding:1px;background:var(--border-color);margin:1rem 0}.aside{overflow-y:auto;background:var(--bg);border-radius:0.25rem;align-self:start;max-height:80vh;position:sticky;z-index:9999;top:0;padding:1rem 0}@media screen and (min-width: 42rem){.aside{padding:1rem 1.5rem;top:2.5rem;margin-top:1rem;padding-top:0}}.aside_inner{height:0;overflow:hidden}@media screen and (min-width: 42rem){.aside_inner{height:initial}}.aside.show .aside_inner{height:initial;overflow:visible}.aside_toggle{padding:0.5rem 1.5rem;border-radius:0.5rem;background:var(--accent);transform:translateY(-1rem);display:flex;justify-content:space-between}@media screen and (min-width: 42rem){.aside_toggle{display:none}}.aside h3{position:relative}.aside ul{padding:0;list-style:none}th,td{padding:0.5rem;font-weight:400 !important}th:not(:first-child),td:not(:first-child){padding-left:1.5rem}thead{background:var(--theme);color:var(--light);font-weight:400;text-align:left}tbody tr:nth-child(even){background-color:var(--accent) !important;box-shadow:0 1rem 0.75rem -0.75rem rgba(0,0,0,0.07)}table{margin:1.5rem 0;width:100%}.main{flex:1}@media screen and (max-width: 667px){.main>.grid-auto{grid-gap:0}}.page-home h1{font-weight:300}.content ul,.content ol{padding-left:1.1rem}.content ul{list-style:initial}.content ol{list-style:decimal}.content a:not(.button){color:var(--theme)}::placeholder{font-size:1rem}svg.icon_sort{fill:var(--light);height:0.7rem;width:0.7rem;display:inline-block;margin-left:auto;vertical-align:middle}canvas{margin:2.5rem auto 0 auto;max-width:450px !important;max-height:450px !important}footer{min-height:150px}del{opacity:0.5}#toTop{background:transparent;outline:0.5rem solid transparent;height:2rem;width:2rem;cursor:pointer;padding:0.5rem;display:flex;align-items:center;justify-content:center;position:fixed;right:0;bottom:2.25rem;transform:rotate(45deg) translate(5rem);opacity:0;transition:opacity 0.5s var(--ease),transform 0.25s var(--ease);z-index:5}#toTop.active{right:1.5rem;opacity:1;transform:rotate(45deg) translate(0)}#toTop::after,#toTop::before{position:absolute;display:block;width:1rem;height:1rem;content:"";border-left:1px solid var(--text);border-top:1px solid var(--text)}#toTop::after{width:0.67rem;height:0.67rem;transform:translate(0.1rem, 0.1rem)}#searchpage{padding-top:5rem}.nav{display:grid;grid-gap:1rem;padding:0 1.5rem !important;align-items:center;background-color:var(--bg)}@media screen and (min-width: 992px){.nav{grid-template-columns:10rem 1fr}}.nav_brand{position:relative}.nav_brand picture,.nav_brand img{max-width:10rem}.nav_header{position:absolute;top:0;left:0;width:100%;background-color:var(--bg);z-index:999999}.nav_toggle{position:absolute;top:0;bottom:0;width:3rem;display:flex;align-items:center;justify-content:flex-end;text-align:center;right:0;color:var(--text)}@media screen and (min-width: 992px){.nav_toggle{display:none}}.nav_body{display:flex;flex-direction:column;background:var(--accent);position:fixed;left:0;top:0;bottom:0;height:100vh;transition:transform 0.25s var(--ease);transform:translateX(-101vw)}@media screen and (min-width: 992px){.nav_body{transform:translateX(0);position:relative;height:initial;justify-content:flex-end;background:transparent;flex-direction:row}}.nav.show .nav_body{transform:translateX(0);box-shadow:0 1rem 4rem rgba(0,0,0,0.1);background:var(--bg);overflow-y:auto}.nav.show .nav_body li:first-child{margin:1.5rem 1rem 0.5rem 1rem}.nav-link{display:inline-flex;padding:0.5rem 1rem}.nav-item{display:grid;align-items:center}@media screen and (min-width: 992px){.nav-item .search{margin-right:1.5rem}}.nav_repo picture,.nav_repo img{max-width:1.25rem}.section_title{font-size:1.25rem}.section_link{font-size:1rem;font-weight:400}.sidebar-link{display:grid;padding:0.2rem 0}.toc{border-left:2px solid var(--theme);padding:0 1rem;height:0;overflow:hidden;filter:opacity(0.87)}.toc_item{font-size:0.9rem}.toc_active{height:initial}.search{flex:1;display:flex;justify-content:flex-end;position:relative}.search_field{padding:0.5rem 1.5rem 0.5rem 2.5rem;border-radius:1.5rem;width:13.5rem;outline:none;border:1px solid var(--search-border-color);background:transparent;color:var(--text);box-shadow:0 1rem 4rem rgba(0,0,0,0.17);font-size:1rem}.search_field:hover,.search_field:focus{background:var(--search-bg)}.search_label{width:1rem;height:1rem;position:absolute;left:0.33rem;top:0.25rem;opacity:0.33}.search_label svg{width:100%;height:100%;fill:var(--text)}.search_result{padding:0.5rem 1rem;display:block}.search_result:not(.passive):hover{background-color:var(--theme);color:var(--light)}.search_result.passive{display:grid}.search_results{width:13.5rem;background-color:var(--overlay);border-radius:0 0 0.25rem 0.25rem;box-shadow:0 1rem 4rem rgba(0,0,0,0.17);position:absolute;top:125%;display:grid;overflow:hidden;z-index:5}.search_results:empty{display:none}.search_title{padding:0.5rem 1rem 0.5rem 1rem;background:var(--theme);color:var(--light);font-size:0.9rem;opacity:0.87;text-transform:uppercase}.button{background-color:var(--theme);color:var(--light);border-radius:0.25rem;display:inline-block;padding:0.75rem 1.25rem;text-align:center}.button:hover{opacity:0.84}.button+.button{background-color:var(--haze);color:var(--dark)}.button_grid{display:grid;max-width:15rem;grid-gap:1rem;grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr))}@media screen and (min-width: 557px){.button_grid{max-width:25rem}}.video{overflow:hidden;padding-bottom:56.25%;position:relative;height:0;margin:1.5rem 0;border-radius:0.6rem;background-color:var(--bg);box-shadow:0 1rem 2rem rgba(0,0,0,0.17)}.video iframe{left:0;top:0;height:100%;width:100%;border:none;position:absolute;transform:scale(1.02)}.icon{width:1.1rem;height:1.1rem;display:inline-flex;justify-content:center;align-items:center;margin:0 0.5rem}.link{opacity:0;position:relative}.link_owner:hover .link{opacity:1}.link_yank{opacity:1}.link_yanked{position:absolute;right:-2.2rem;top:-2rem;background-color:var(--theme);color:var(--light);width:7rem;padding:0.25rem 0.5rem;font-size:0.9rem;border-radius:1rem;text-align:center}.link_yanked::after{position:absolute;top:1rem;content:"";border-color:var(--theme) transparent;border-style:solid;border-width:1rem 1rem 0 1rem;height:0;width:0;transform-origin:50% 50%;transform:rotate(145deg);right:0.45rem}.gallery{width:100%;column-count:3;column-gap:1rem}@media screen and (max-width: 667px){.gallery{column-count:2}}.gallery_item{background-color:transparent;margin:0 0 1rem}.gallery_image{margin:0 auto}.pager{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;margin:2rem 0;max-width:100vw;overflow:hidden}.pager svg{filter:opacity(0.75);width:1.25rem;height:1rem;transform-origin:50% 50%}.pager_lean{justify-content:flex-end}.pager_label{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pager_link{padding:0.5rem 1rem;border-radius:0.25rem;width:12.5rem;max-width:40vw;position:relative;display:flex;align-items:center;text-align:center;justify-content:center}.pager_link::before,.pager_link::after{background-image:var(--next-icon);height:0.8rem;width:0.8rem;background-size:100%;background-repeat:no-repeat;transform-origin:50% 50%}.pager_item{display:flex;flex-direction:column;flex:1;max-width:48%}.pager_item.prev{align-items:flex-start}.pager_item.next{align-items:flex-end}.pager_item.next::after{content:""}.pager_item.prev .pager_link::before{content:"";transform:rotate(180deg);margin-right:0.67rem}.pager_item.next .pager_link::after{content:"";margin-left:0.67rem}.pager_item.next .pager_link{grid-template-columns:1fr 1.5rem}.pager_meta{margin:0.5rem 0}.color_mode{margin-left:1rem}.color_choice{outline:none;border:none;-webkit-appearance:none;height:1rem;position:relative;width:1rem;border-radius:1rem;cursor:pointer;z-index:2;right:0;filter:contrast(0.8)}.color_choice::after{content:"";top:0.1rem;bottom:0;left:0;position:absolute;height:1.3rem;background:var(--accent);width:1.3rem;border-radius:0.4rem;z-index:3;background-image:var(--sun-icon);background-size:60%;background-repeat:no-repeat;background-position:center}.color_icon{height:1rem;width:1rem;margin:0;z-index:4;position:absolute;transform:translateY(-50%);transition:transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);right:3.5rem}.tip{padding:1.5rem 1rem 1.5rem 1.5rem;margin:1.5rem 0;border-left:0.2rem solid var(--theme);position:relative;background:var(--accent)}.tip blockquote{padding:0;margin:0;border:none}.tip blockquote::before{display:none}.tip p:first-child,.tip p~p{padding-top:0}.tip p:last-child{padding-bottom:0}.tip_warning{--theme: var(--inline-color)}.tip_warning::before{transform:rotate(180deg)}.tip::before{content:"";position:absolute;left:-0.85rem;top:1.5rem;z-index:3;padding:0.75rem;transform-origin:50% 50%;border-radius:50%;background-color:var(--theme);background-image:var(--info-icon);background-size:12%;background-position:50% 50%;background-repeat:no-repeat}.tabs{display:flex;flex-wrap:wrap;margin:2rem 0 2rem 0;position:relative}.tabs.tabs-left{justify-content:flex-start}.tabs.tabs-left label.tab-label{margin-right:0.5rem}.tabs.tabs-left .tab-content{border-radius:0px 6px 6px 6px}.tabs.tabs-right{justify-content:flex-end}.tabs.tabs-right label.tab-label{margin-left:0.5rem}.tabs.tabs-right .tab-content{border-radius:6px 6px 6px 6px}.tabs input.tab-input{display:none}.tabs label.tab-label{background-color:var(--accent) transparent;border-color:var(--theme);border-radius:6px 6px 0px 0px;border-style:solid;border-bottom-style:hidden;border-width:2px;cursor:pointer;display:inline-block;order:1;padding:0.3rem 0.6rem;position:relative;top:2px;user-select:none}.tabs input.tab-input:checked+label.tab-label{background-color:var(--accent);border-color:var(--theme)}.tabs .tab-content{background-color:var(--accent);border-color:var(--theme);border-style:solid;border-width:2px;display:none;order:2;padding:1rem;width:100%}html[data-mode="dark"] .mermaid{--theme: darkgoldenrod;background-color:transparent !important;margin-bottom:2.5rem}html[data-mode="dark"] .mermaid svg{margin:0 auto;display:block}.post{margin:0 auto;width:100%}.post p,.post h1,.post h2,.post h3,.post h4,.post h5,.post h6,.post blockquote,.post ol,.post ul,.post .highlight_wrap,.post hr{max-width:840px !important;margin-left:auto;margin-right:auto}@media screen and (min-width: 1025px){.post img:not(.icon){display:block;width:100vw;max-width:1024px;margin-left:auto;margin-right:auto}}.post h2,.post h3,.post h4{margin:0.5rem auto;text-align:left;padding:5px 0 0 0}.post p{padding-bottom:0.5rem;padding-top:0.5rem;font-size:1.05rem}.posts{display:flex;justify-content:space-between;flex-flow:row wrap;width:100%;align-items:stretch}.posts:not(.aside){padding:0 30px}.post ol{padding:1rem 1.25rem}.post_body img{width:100%;max-width:100%}.post_inner a{color:var(--theme);transition:all 0.3s}.post_inner a:hover{opacity:0.8;text-decoration:underline}.post_inner img:not(.icon){margin-bottom:2rem;box-shadow:0 1.5rem 1rem -1rem rgba(0,0,0,0.25)}.post_inner img:not(.icon)~h1,.post_inner img:not(.icon)~h2,.post_inner img:not(.icon)~h3,.post_inner img:not(.icon)~h4{margin-top:0;padding-top:0}.post .icon{margin-top:0;margin-bottom:0}.post_date{color:var(--theme)}.post_copy{opacity:0;transition:opacity 0.3s ease-out}.post_item{box-shadow:0 0 3rem rgba(0,0,0,0.17);margin:1.25rem 0;border-radius:10px;overflow:hidden;width:100%}.post_item:hover{box-shadow:0 0 5rem rgba(0,0,0,0.255)}@media screen and (min-width: 667px){.post_item{width:47%}}.post_item:hover .post_copy{opacity:1}.post_link{padding:2.5px 0;font-size:1.25em;margin:2.5px 0;text-align:left}.post_meta{overflow:hidden;opacity:0.8;font-size:0.84rem;font-weight:500;display:inline-grid;grid-template-columns:auto 1fr;background-color:var(--light);padding:0;align-items:center;border-radius:0.3rem;color:var(--dark);text-transform:capitalize}.post_meta a:hover{color:var(--theme);text-decoration:underline;opacity:0.9}.post_extra{display:flex;justify-content:flex-end}.post_tag{font-size:0.75rem !important;font-weight:500;background:var(--theme);color:var(--light);padding:0.25rem 0.67rem !important;text-transform:uppercase;display:inline-flex;border-radius:5px}.post_title{margin:1.75rem 0 1rem}.post_time{background:var(--theme);display:inline-grid;padding:0.2rem 0.75rem;color:var(--light)}.post_thumbnail{width:100%;margin:0}.post_nav{padding:3rem 1.5rem;display:grid;margin:2.25rem auto 1rem;text-align:center;color:var(--theme);text-transform:uppercase}.post_nav,.post_nav span{position:relative;z-index:3}.post_nav::before{content:"";position:absolute;background:var(--accent);top:0;left:0;bottom:0;right:0;z-index:1;border-radius:1rem}.post_next{display:inline-grid;margin:0 auto;width:10rem;grid-template-columns:1fr 1.33rem}.post_next::after{content:"";background-image:var(--next-icon-path);background-repeat:repeat no-repeat;background-size:0.8rem;background-position:center right}.excerpt{padding:0 10px 1.5rem 10px;position:relative;z-index:1}.excerpt_meta{display:flex;justify-content:space-between;align-items:center;transform:translateY(-2.5rem);position:relative;z-index:5}.archive_item{display:grid;padding:1.5rem 0}.archive_title{margin:0}.article{box-shadow:0 0.5rem 2rem rgba(0,0,0,0.12);overflow:hidden;border-radius:0.5rem}.article_title{margin:0}.article_excerpt{transition:height 0.5s, opacity 0.5s}.article_excerpt:not(.visible){height:0;opacity:0}.article_excerpt,.article_meta{transform-origin:bottom}.article_meta{padding:10px 1.25rem 1.25rem;color:var(--text);position:relative;z-index:2;transition:margin-top 0.5s;background:var(--bg)}.article_meta.center_y{transform-origin:center;transition:transform 0.5s;display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 42rem){.article_meta.center_y{left:-2rem}}.article_thumb{display:grid;position:relative;z-index:0;overflow:hidden;height:15rem;background-size:cover;background-position:50% 50%}@media screen and (min-width: 35rem){.article_thumb{height:22.5rem}}.article_thumb img{transition:transform 0.5s, opacity 0.5s}.article_thumb::after{content:'';position:absolute;top:0;left:0;width:100%;bottom:0;z-index:1;background:var(--bg);opacity:0;transition:opacity 0.1s ease-out}.article_showcase .article_thumb{height:15rem}.article_showcase .article_meta{padding-top:1.5rem}.article:hover .article_thumb img{transform:scale(1.1)}.article:hover .article_thumb::after{transition:opacity 0.1s ease-out;opacity:0.5}.article:hover .article_excerpt:not(.visible){height:75px;opacity:1}.article:hover .article_meta:not(.center_y){margin-top:-75px}@media screen and (min-width: 769px){.article:hover .article_meta.center_y{transform:translateX(-3rem)}}.article:hover{box-shadow:0 1.5rem 6rem rgba(0,0,0,0.17)}.article:hover a{color:initial !important}.article_hidden{display:none}.wrap{max-width:1240px}@media screen and (min-width: 1640px){.wrap{max-width:1600px}}.wrap,.wrap{width:100%;padding:0 25px;margin:0 auto}.pt-1{padding-top:1.5rem}.pb-1{padding-bottom:1.5rem}.mt-1{margin-top:1.5rem}.mb-1{margin-bottom:1.5rem}.pt-2{padding-top:3rem}.pb-2{padding-bottom:3rem}.mt-2{margin-top:3rem}.mb-2{margin-bottom:3rem}.pt-3{padding-top:4.5rem}.pb-3{padding-bottom:4.5rem}.mt-3{margin-top:4.5rem}.mb-3{margin-bottom:4.5rem}.pt-4{padding-top:6rem}.pb-4{padding-bottom:6rem}.mt-4{margin-top:6rem}.mb-4{margin-bottom:6rem}.pt-5{padding-top:7.5rem}.pb-5{padding-bottom:7.5rem}.mt-5{margin-top:7.5rem}.mb-5{margin-bottom:7.5rem}.pt-6{padding-top:9rem}.pb-6{padding-bottom:9rem}.mt-6{margin-top:9rem}.mb-6{margin-bottom:9rem}.pt-7{padding-top:10.5rem}.pb-7{padding-bottom:10.5rem}.mt-7{margin-top:10.5rem}.mb-7{margin-bottom:10.5rem}.pt-8{padding-top:12rem}.pb-8{padding-bottom:12rem}.mt-8{margin-top:12rem}.mb-8{margin-bottom:12rem}.grid-2,.grid-3,.grid-4,.grid-auto,.grid-reverse{display:grid;grid-template-columns:1fr}[class*='grid-']{grid-gap:2rem}@media screen and (min-width: 42rem){.grid-auto{grid-template-columns:2fr 5fr}.grid-reverse{grid-template-columns:3fr 1fr}.grid-2{grid-template-columns:repeat(2, 1fr)}.grid-3{grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr))}.grid-4{grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr))}}.active{color:var(--theme)}.is{background:var(--theme);color:var(--light)}.toggle svg{fill:var(--text);display:inline-block;transform-origin:50% 50%;transform:scale(1.2);cursor:pointer;margin:0}.scrollable{width:100%;overflow-x:hidden;max-width:calc(100vw - 48px)}@media screen and (min-width: 768px){.scrollable{max-width:100%}}.scrollable:hover{overflow-x:auto}.chart{display:grid;grid-gap:1.5rem;min-width:0;max-width:98vw !important;max-height:98vw !important}.link{display:inline-flex;align-items:center;width:2.5rem;margin:0 0.25rem 0 0;padding:0 0.25rem;opacity:0;transform:translate(-0.33rem, 0.33rem);transition:opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)}.link svg,.link img{width:1.5rem;height:1.5rem;fill:var(--theme)}.link_owner:hover .link{opacity:1}.copy{cursor:pointer}.standardize-input{appearance:none;-webkit-appearance:none}@keyframes pulse{0%{opacity:1}75%{opacity:0.1}100%{opacity:1}}code{font-size:15px;font-weight:400;overflow-y:hidden;display:block;font-family:'Monaco', monospace;word-break:break-all}code.noClass{color:var(--inline-color);display:inline;line-break:anywhere}.windows .highlight{overflow-x:hidden}.windows .highlight:hover{overflow-x:auto}.highlight{display:grid;width:100%;border-radius:0 0.2rem 0.2rem 0;overflow-x:auto;position:relative}.highlight_wrap{display:grid;background:var(--code-bg) !important;border-radius:0.5rem;position:relative;padding:0 1rem;margin:1.5rem auto 1rem auto}.highlight_wrap .highlight_wrap{margin:0;padding:0}.highlight_wrap+.highlight_wrap{margin-top:2.25rem}.highlight_wrap:hover>div{opacity:1}.highlight_wrap .lang{position:absolute;top:0;right:0;text-align:right;width:7.5rem;padding:0.5rem 1rem;font-style:italic;text-transform:uppercase;font-size:67%;opacity:0.5;color:var(--text)}.highlight_wrap:hover .lang{opacity:0.1}.highlight .highlight{margin:0}.highlight pre{color:var(--text) !important;border-radius:4px;font-family:'Monaco', monospace;padding-top:1.5rem;padding-bottom:2rem}.highlight table{display:grid;max-width:100%;margin-bottom:0;background:transparent}.highlight td,.highlight th{padding:0}.highlight .lntd{width:100%;border:none}.highlight .lntd:first-child,.highlight .lntd:first-child pre{width:2.5rem !important;padding-left:0;padding-right:0;color:rgba(255,255,255,0.5);user-select:none}.highlight .lntd:first-child pre{width:100%;display:flex;min-width:0;align-items:center;flex-direction:column}.err{color:#a61717}.hl{width:100%;background:var(--inline-color)}.ln,.lnt{margin-right:0.75rem;padding:0;transition:opacity 0.3s var(--ease)}.ln,.ln span,.lnt,.lnt span{color:var(--text);opacity:0.5;user-select:none}.k,.kc,.kd,.kn,.kp,.kr,.kt,.nt{color:#6ab825;font-weight:500}.kn,.kp{font-weight:400}.nb,.no,.nv{color:#24909d}.nc,.nf,.nn{color:#447fcf}.s,.sa,.sb,.sc,.dl,.sd,.s2,.se,.sh,.si,.sx,.sr,.s1,.ss{color:#ed9d13}.m,.mb,.mf,.mh,.mi,.il,.mo{color:#3677a9}.ow{color:#6ab825;font-weight:500}.c,.ch,.cm,.c1{color:#999;font-style:italic}.cs{color:#e50808;background-color:#520000;font-weight:500}.cp,.cpf{color:#cd2828;font-weight:500}.gd,.gr{color:#d22323}.ge{font-style:italic}.gh,.gu,.nd,.na,.ne{color:#ffa500;font-weight:500}.gi{color:#589819}.go{color:#ccc}.gp{color:#aaa}.gs{font-weight:500}.gt{color:#d22323}.w{color:#666}.hljs-string{color:#6ab825}.hljs-attr{color:#ed9d13}.p .hljs-attr{color:var(--light)}.pre_wrap{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.pre_nolines.ln{display:none}.panel_box{display:inline-flex;perspective:300px;grid-gap:1rem;transition:opacity 0.3s var(--easing);background:var(--code-bg);padding:0.5rem 1.5rem;border-radius:2rem;align-items:center;position:absolute;right:0rem;top:-2.1rem;opacity:0;min-width:0}.panel_icon{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0.1rem;transform-origin:50% 50%;margin:0;min-width:0}.panel_icon.active{animation:pulse 0.1s linear}.panel_icon svg{fill:var(--text);width:1.5rem;height:1.5rem}.panel_hide{display:none}.panel_from{position:absolute;color:var(--theme);bottom:0;font-size:1.5rem;font-weight:500;padding:0.5rem 0;cursor:pointer;letter-spacing:0.1px;z-index:19}.panel_expanded .panel_from{display:none}.shell{position:relative}.shell::before{content:"$";position:relative;margin-right:0.36rem}.line-flex{display:flex;min-width:0}@font-face{font-family:'Metropolis';font-style:normal;font-weight:400;src:local("Metropolis Regular"),local("Metropolis-Regular"),url("../fonts/Metropolis-Regular.woff2") format("woff2"),url("../fonts/Metropolis-Regular.woff") format("woff");font-display:swap}@font-face{font-family:'Metropolis';font-style:normal;font-weight:300;src:local("Metropolis Light"),local("Metropolis-Light"),url("../fonts/Metropolis-Light.woff2") format("woff2"),url("../fonts/Metropolis-Light.woff") format("woff");font-display:swap}@font-face{font-family:'Metropolis';font-style:italic;font-weight:300;src:local("Metropolis Light Italic"),local("Metropolis-LightItalic"),url("../fonts/Metropolis-LightItalic.woff2") format("woff2"),url("../fonts/Metropolis-LightItalic.woff") format("woff");font-display:swap}@font-face{font-family:'Metropolis';font-style:normal;font-weight:500;src:local("Metropolis Medium"),local("Metropolis-Medium"),url("../fonts/Metropolis-Medium.woff2") format("woff2"),url("../fonts/Metropolis-Medium.woff") format("woff");font-display:swap}@font-face{font-family:'Metropolis';font-style:italic;font-weight:500;src:local("Metropolis Medium Italic"),local("Metropolis-MediumItalic"),url("../fonts/Metropolis-MediumItalic.woff2") format("woff2"),url("../fonts/Metropolis-MediumItalic.woff") format("woff");font-display:swap}@font-face{font-family:'Cookie';font-style:normal;font-weight:400;src:local("Cookie-Regular"),url("../fonts/cookie-v10-latin-regular.woff2") format("woff2"),url("../fonts/cookie-v10-latin-regular.woff") format("woff");font-display:swap}@keyframes chartjs-render-animation{0%{opacity:.99}100%{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}html[data-mode="dark"] .mermaid{--theme: darkgoldenrod;background-color:transparent !important;margin-bottom:2.5rem}html[data-mode="dark"] .mermaid svg{margin:0 auto;display:block}

/*# sourceMappingURL=styles.css.map */
/* static/css/theme-typography.css */
/*
 * Project-wide typography and dark mode overrides.
 *
 * Loaded after the Compose theme's compiled styles via params.customCSS in
 * hugo.yaml, so it wins on the cascade without touching the theme submodule.
 */

html {
  --font: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Lora', Georgia, serif;
}

body,
.post,
.post_inner,
.content,
input,
button,
textarea,
select {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

/* Slight readability bump for long-form prose. */
body, html {
  font-size: 14px;
}

.post p,
.post li,
.content p,
.content li {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Restore list markers inside post bodies. The Compose theme resets
   `ol, ul { list-style: none }` globally and only re-enables markers
   inside `.content`, so markdown bullets in `.post .post_inner` render
   as plain text without this override. */
.post .post_inner ul,
.post .post_inner ol {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.25rem;
}
.post .post_inner ul {
  list-style: disc;
}
.post .post_inner ol {
  list-style: decimal;
}
.post .post_inner ul ul {
  list-style: circle;
}
.post .post_inner ul ul ul {
  list-style: square;
}
.post .post_inner li {
  padding: 0.15rem 0;
}

.post h1, .post h2, .post h3, .post h4, .post h5, .post h6 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Modern dark mode: warmer, lower-contrast surfaces, brighter text,
   distinct accent. Overrides _variables.sass darkmode mixin. */
html[data-mode="dark"],
html[data-mode="auto"] {
  --dark: #15171c;
  --bubble: #1f232b;
}

html[data-mode="dark"] {
  --bg: #15171c;
  --text: #e6e1d6;
  --text-light: #f5f1e8;
  --accent: #1f232b;
  --overlay: #1f232b;
  --border-color: #2a2f3a;
  --code-bg: #1a1d24;
  --theme: #7fb3ff;
  --inline-color: #e3b341;
  --scroll-thumb: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  html[data-mode="auto"] {
    --bg: #15171c;
    --text: #e6e1d6;
    --text-light: #f5f1e8;
    --accent: #1f232b;
    --overlay: #1f232b;
    --border-color: #2a2f3a;
    --code-bg: #1a1d24;
    --theme: #7fb3ff;
    --inline-color: #e3b341;
    --scroll-thumb: rgba(255, 255, 255, 0.08);
  }
}

html[data-mode="dark"] body,
html[data-mode="dark"] .nav_header,
html[data-mode="dark"] .post_meta {
  background-color: var(--bg);
  color: var(--text);
}

html[data-mode="dark"] blockquote {
  background-color: var(--accent);
  color: var(--text);
}

html[data-mode="dark"] code,
html[data-mode="dark"] pre {
  background-color: var(--code-bg);
}

html[data-mode="dark"] a {
  color: var(--theme);
}

html[data-mode="dark"] .post_tag,
html[data-mode="dark"] thead {
  color: #15171c;
}

/*
 * Button color overrides.
 *
 * The Compose theme paints `.button` with --theme (#34c759) on white
 * text — about 2.2:1 contrast, well under WCAG AA. Define dedicated
 * --button-bg / --button-fg tokens so the brand --theme can stay light
 * for accents/links while the filled button uses an AA-safe pairing
 * (~5:1 in light mode, ~12:1 in dark mode).
 */
html {
  --button-bg: #1f7d3b;
  --button-fg: #ffffff;
  --button-bg-hover: #166534;
}
html[data-mode="dark"] {
  --button-bg: #7fb3ff;
  --button-fg: #15171c;
  --button-bg-hover: #a8c8ff;
}
@media (prefers-color-scheme: dark) {
  html[data-mode="auto"] {
    --button-bg: #7fb3ff;
    --button-fg: #15171c;
    --button-bg-hover: #a8c8ff;
  }
}
.button {
  background-color: var(--button-bg);
  color: var(--button-fg);
}
.button:hover {
  background-color: var(--button-bg-hover);
  opacity: 1;
}

/*
 * The `html[data-mode="dark"] a { color: var(--theme) }` rule below
 * has specificity (0,1,2) and would otherwise repaint the button label
 * with --theme — the same color as --button-bg in dark mode, making
 * the text invisible. Match its specificity so the button keeps its
 * own foreground in both explicit dark mode and auto+system-dark.
 */
html[data-mode="dark"] a.button,
html[data-mode="auto"] a.button {
  color: var(--button-fg);
}
html[data-mode="dark"] a.button:hover,
html[data-mode="auto"] a.button:hover {
  color: var(--button-fg);
}
html[data-mode="dark"] a.button.outline,
html[data-mode="auto"] a.button.outline {
  color: var(--text);
}
html[data-mode="dark"] a.button.outline:hover,
html[data-mode="auto"] a.button.outline:hover {
  color: var(--bg);
}

/*
 * Icon-only nav links (e.g. the GitHub menu item).
 *
 * Slightly enlarges the Font Awesome glyph relative to the text-label
 * nav items and keeps it vertically centered with them. Inherits color
 * from the surrounding link so dark-mode and hover states track the
 * theme without extra rules.
 */
.nav-link_icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1;
}
.nav-link_icon > i {
  color: currentColor;
}
.nav-link_icon > svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  fill: currentColor;
}

/*
 * Outline button variant.
 *
 * The Compose theme has no `.outline` modifier — without this rule the
 * `outline` class falls through to the filled style. Render it as a
 * true outline: transparent fill, --text-colored label and border, so
 * contrast tracks the body text palette (>14:1 in both modes).
 */
.button.outline,
.button + .button.outline {
  background-color: transparent;
  color: var(--text);
  border: 1.5px solid var(--text);
}
.button.outline:hover {
  background-color: var(--text);
  color: var(--bg);
  opacity: 1;
}
/* static/css/chroma.css */
/* Chroma syntax highlighting — light/dark per data-mode. Generated. */

/* Light mode (default). Generated from chroma --style=github. */
/* Background */ .bg { background-color:#f7f7f7; }
/* PreWrapper */ .chroma { background-color:#f7f7f7;-webkit-text-size-adjust:none; }
/* Error */ .chroma .err { color:#f6f8fa;background-color:#82071e }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#dedede }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#cf222e }
/* KeywordConstant */ .chroma .kc { color:#cf222e }
/* KeywordDeclaration */ .chroma .kd { color:#cf222e }
/* KeywordNamespace */ .chroma .kn { color:#cf222e }
/* KeywordPseudo */ .chroma .kp { color:#cf222e }
/* KeywordReserved */ .chroma .kr { color:#cf222e }
/* KeywordType */ .chroma .kt { color:#cf222e }
/* NameAttribute */ .chroma .na { color:#1f2328 }
/* NameClass */ .chroma .nc { color:#1f2328 }
/* NameConstant */ .chroma .no { color:#0550ae }
/* NameDecorator */ .chroma .nd { color:#0550ae }
/* NameEntity */ .chroma .ni { color:#6639ba }
/* NameLabel */ .chroma .nl { color:#900;font-weight:bold }
/* NameNamespace */ .chroma .nn { color:#24292e }
/* NameOther */ .chroma .nx { color:#1f2328 }
/* NameTag */ .chroma .nt { color:#0550ae }
/* NameBuiltin */ .chroma .nb { color:#6639ba }
/* NameBuiltinPseudo */ .chroma .bp { color:#6a737d }
/* NameVariable */ .chroma .nv { color:#953800 }
/* NameVariableClass */ .chroma .vc { color:#953800 }
/* NameVariableGlobal */ .chroma .vg { color:#953800 }
/* NameVariableInstance */ .chroma .vi { color:#953800 }
/* NameVariableMagic */ .chroma .vm { color:#953800 }
/* NameFunction */ .chroma .nf { color:#6639ba }
/* NameFunctionMagic */ .chroma .fm { color:#6639ba }
/* LiteralString */ .chroma .s { color:#0a3069 }
/* LiteralStringAffix */ .chroma .sa { color:#0a3069 }
/* LiteralStringBacktick */ .chroma .sb { color:#0a3069 }
/* LiteralStringChar */ .chroma .sc { color:#0a3069 }
/* LiteralStringDelimiter */ .chroma .dl { color:#0a3069 }
/* LiteralStringDoc */ .chroma .sd { color:#0a3069 }
/* LiteralStringDouble */ .chroma .s2 { color:#0a3069 }
/* LiteralStringEscape */ .chroma .se { color:#0a3069 }
/* LiteralStringHeredoc */ .chroma .sh { color:#0a3069 }
/* LiteralStringInterpol */ .chroma .si { color:#0a3069 }
/* LiteralStringOther */ .chroma .sx { color:#0a3069 }
/* LiteralStringRegex */ .chroma .sr { color:#0a3069 }
/* LiteralStringSingle */ .chroma .s1 { color:#0a3069 }
/* LiteralStringSymbol */ .chroma .ss { color:#032f62 }
/* LiteralNumber */ .chroma .m { color:#0550ae }
/* LiteralNumberBin */ .chroma .mb { color:#0550ae }
/* LiteralNumberFloat */ .chroma .mf { color:#0550ae }
/* LiteralNumberHex */ .chroma .mh { color:#0550ae }
/* LiteralNumberInteger */ .chroma .mi { color:#0550ae }
/* LiteralNumberIntegerLong */ .chroma .il { color:#0550ae }
/* LiteralNumberOct */ .chroma .mo { color:#0550ae }
/* Operator */ .chroma .o { color:#0550ae }
/* OperatorWord */ .chroma .ow { color:#0550ae }
/* Punctuation */ .chroma .p { color:#1f2328 }
/* Comment */ .chroma .c { color:#57606a }
/* CommentHashbang */ .chroma .ch { color:#57606a }
/* CommentMultiline */ .chroma .cm { color:#57606a }
/* CommentSingle */ .chroma .c1 { color:#57606a }
/* CommentSpecial */ .chroma .cs { color:#57606a }
/* CommentPreproc */ .chroma .cp { color:#57606a }
/* CommentPreprocFile */ .chroma .cpf { color:#57606a }
/* GenericDeleted */ .chroma .gd { color:#82071e;background-color:#ffebe9 }
/* GenericEmph */ .chroma .ge { color:#1f2328 }
/* GenericInserted */ .chroma .gi { color:#116329;background-color:#dafbe1 }
/* GenericOutput */ .chroma .go { color:#1f2328 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace */ .chroma .w { color:#fff }

/* Dark mode (explicit). Generated from chroma --style=monokai. */
/* Background */ html[data-mode="dark"] .bg { color:#f8f8f2;background-color:#272822; }
/* PreWrapper */ html[data-mode="dark"] .chroma { color:#f8f8f2;background-color:#272822;-webkit-text-size-adjust:none; }
/* Error */ html[data-mode="dark"] .chroma .err { color:#960050;background-color:#1e0010 }
/* LineLink */ html[data-mode="dark"] .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ html[data-mode="dark"] .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ html[data-mode="dark"] .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ html[data-mode="dark"] .chroma .hl { background-color:#3c3d38 }
/* LineNumbersTable */ html[data-mode="dark"] .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ html[data-mode="dark"] .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ html[data-mode="dark"] .chroma .line { display:flex; }
/* Keyword */ html[data-mode="dark"] .chroma .k { color:#66d9ef }
/* KeywordConstant */ html[data-mode="dark"] .chroma .kc { color:#66d9ef }
/* KeywordDeclaration */ html[data-mode="dark"] .chroma .kd { color:#66d9ef }
/* KeywordNamespace */ html[data-mode="dark"] .chroma .kn { color:#f92672 }
/* KeywordPseudo */ html[data-mode="dark"] .chroma .kp { color:#66d9ef }
/* KeywordReserved */ html[data-mode="dark"] .chroma .kr { color:#66d9ef }
/* KeywordType */ html[data-mode="dark"] .chroma .kt { color:#66d9ef }
/* NameAttribute */ html[data-mode="dark"] .chroma .na { color:#a6e22e }
/* NameClass */ html[data-mode="dark"] .chroma .nc { color:#a6e22e }
/* NameConstant */ html[data-mode="dark"] .chroma .no { color:#66d9ef }
/* NameDecorator */ html[data-mode="dark"] .chroma .nd { color:#a6e22e }
/* NameException */ html[data-mode="dark"] .chroma .ne { color:#a6e22e }
/* NameOther */ html[data-mode="dark"] .chroma .nx { color:#a6e22e }
/* NameTag */ html[data-mode="dark"] .chroma .nt { color:#f92672 }
/* NameFunction */ html[data-mode="dark"] .chroma .nf { color:#a6e22e }
/* NameFunctionMagic */ html[data-mode="dark"] .chroma .fm { color:#a6e22e }
/* Literal */ html[data-mode="dark"] .chroma .l { color:#ae81ff }
/* LiteralDate */ html[data-mode="dark"] .chroma .ld { color:#e6db74 }
/* LiteralString */ html[data-mode="dark"] .chroma .s { color:#e6db74 }
/* LiteralStringAffix */ html[data-mode="dark"] .chroma .sa { color:#e6db74 }
/* LiteralStringBacktick */ html[data-mode="dark"] .chroma .sb { color:#e6db74 }
/* LiteralStringChar */ html[data-mode="dark"] .chroma .sc { color:#e6db74 }
/* LiteralStringDelimiter */ html[data-mode="dark"] .chroma .dl { color:#e6db74 }
/* LiteralStringDoc */ html[data-mode="dark"] .chroma .sd { color:#e6db74 }
/* LiteralStringDouble */ html[data-mode="dark"] .chroma .s2 { color:#e6db74 }
/* LiteralStringEscape */ html[data-mode="dark"] .chroma .se { color:#ae81ff }
/* LiteralStringHeredoc */ html[data-mode="dark"] .chroma .sh { color:#e6db74 }
/* LiteralStringInterpol */ html[data-mode="dark"] .chroma .si { color:#e6db74 }
/* LiteralStringOther */ html[data-mode="dark"] .chroma .sx { color:#e6db74 }
/* LiteralStringRegex */ html[data-mode="dark"] .chroma .sr { color:#e6db74 }
/* LiteralStringSingle */ html[data-mode="dark"] .chroma .s1 { color:#e6db74 }
/* LiteralStringSymbol */ html[data-mode="dark"] .chroma .ss { color:#e6db74 }
/* LiteralNumber */ html[data-mode="dark"] .chroma .m { color:#ae81ff }
/* LiteralNumberBin */ html[data-mode="dark"] .chroma .mb { color:#ae81ff }
/* LiteralNumberFloat */ html[data-mode="dark"] .chroma .mf { color:#ae81ff }
/* LiteralNumberHex */ html[data-mode="dark"] .chroma .mh { color:#ae81ff }
/* LiteralNumberInteger */ html[data-mode="dark"] .chroma .mi { color:#ae81ff }
/* LiteralNumberIntegerLong */ html[data-mode="dark"] .chroma .il { color:#ae81ff }
/* LiteralNumberOct */ html[data-mode="dark"] .chroma .mo { color:#ae81ff }
/* Operator */ html[data-mode="dark"] .chroma .o { color:#f92672 }
/* OperatorWord */ html[data-mode="dark"] .chroma .ow { color:#f92672 }
/* Comment */ html[data-mode="dark"] .chroma .c { color:#75715e }
/* CommentHashbang */ html[data-mode="dark"] .chroma .ch { color:#75715e }
/* CommentMultiline */ html[data-mode="dark"] .chroma .cm { color:#75715e }
/* CommentSingle */ html[data-mode="dark"] .chroma .c1 { color:#75715e }
/* CommentSpecial */ html[data-mode="dark"] .chroma .cs { color:#75715e }
/* CommentPreproc */ html[data-mode="dark"] .chroma .cp { color:#75715e }
/* CommentPreprocFile */ html[data-mode="dark"] .chroma .cpf { color:#75715e }
/* GenericDeleted */ html[data-mode="dark"] .chroma .gd { color:#f92672 }
/* GenericEmph */ html[data-mode="dark"] .chroma .ge { font-style:italic }
/* GenericInserted */ html[data-mode="dark"] .chroma .gi { color:#a6e22e }
/* GenericStrong */ html[data-mode="dark"] .chroma .gs { font-weight:bold }
/* GenericSubheading */ html[data-mode="dark"] .chroma .gu { color:#75715e }

/* Dark mode (auto + prefers-color-scheme: dark). */
@media (prefers-color-scheme: dark) {
  /* Background */ html[data-mode="auto"] .bg { color:#f8f8f2;background-color:#272822; }
  /* PreWrapper */ html[data-mode="auto"] .chroma { color:#f8f8f2;background-color:#272822;-webkit-text-size-adjust:none; }
  /* Error */ html[data-mode="auto"] .chroma .err { color:#960050;background-color:#1e0010 }
  /* LineLink */ html[data-mode="auto"] .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
  /* LineTableTD */ html[data-mode="auto"] .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
  /* LineTable */ html[data-mode="auto"] .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
  /* LineHighlight */ html[data-mode="auto"] .chroma .hl { background-color:#3c3d38 }
  /* LineNumbersTable */ html[data-mode="auto"] .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
  /* LineNumbers */ html[data-mode="auto"] .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
  /* Line */ html[data-mode="auto"] .chroma .line { display:flex; }
  /* Keyword */ html[data-mode="auto"] .chroma .k { color:#66d9ef }
  /* KeywordConstant */ html[data-mode="auto"] .chroma .kc { color:#66d9ef }
  /* KeywordDeclaration */ html[data-mode="auto"] .chroma .kd { color:#66d9ef }
  /* KeywordNamespace */ html[data-mode="auto"] .chroma .kn { color:#f92672 }
  /* KeywordPseudo */ html[data-mode="auto"] .chroma .kp { color:#66d9ef }
  /* KeywordReserved */ html[data-mode="auto"] .chroma .kr { color:#66d9ef }
  /* KeywordType */ html[data-mode="auto"] .chroma .kt { color:#66d9ef }
  /* NameAttribute */ html[data-mode="auto"] .chroma .na { color:#a6e22e }
  /* NameClass */ html[data-mode="auto"] .chroma .nc { color:#a6e22e }
  /* NameConstant */ html[data-mode="auto"] .chroma .no { color:#66d9ef }
  /* NameDecorator */ html[data-mode="auto"] .chroma .nd { color:#a6e22e }
  /* NameException */ html[data-mode="auto"] .chroma .ne { color:#a6e22e }
  /* NameOther */ html[data-mode="auto"] .chroma .nx { color:#a6e22e }
  /* NameTag */ html[data-mode="auto"] .chroma .nt { color:#f92672 }
  /* NameFunction */ html[data-mode="auto"] .chroma .nf { color:#a6e22e }
  /* NameFunctionMagic */ html[data-mode="auto"] .chroma .fm { color:#a6e22e }
  /* Literal */ html[data-mode="auto"] .chroma .l { color:#ae81ff }
  /* LiteralDate */ html[data-mode="auto"] .chroma .ld { color:#e6db74 }
  /* LiteralString */ html[data-mode="auto"] .chroma .s { color:#e6db74 }
  /* LiteralStringAffix */ html[data-mode="auto"] .chroma .sa { color:#e6db74 }
  /* LiteralStringBacktick */ html[data-mode="auto"] .chroma .sb { color:#e6db74 }
  /* LiteralStringChar */ html[data-mode="auto"] .chroma .sc { color:#e6db74 }
  /* LiteralStringDelimiter */ html[data-mode="auto"] .chroma .dl { color:#e6db74 }
  /* LiteralStringDoc */ html[data-mode="auto"] .chroma .sd { color:#e6db74 }
  /* LiteralStringDouble */ html[data-mode="auto"] .chroma .s2 { color:#e6db74 }
  /* LiteralStringEscape */ html[data-mode="auto"] .chroma .se { color:#ae81ff }
  /* LiteralStringHeredoc */ html[data-mode="auto"] .chroma .sh { color:#e6db74 }
  /* LiteralStringInterpol */ html[data-mode="auto"] .chroma .si { color:#e6db74 }
  /* LiteralStringOther */ html[data-mode="auto"] .chroma .sx { color:#e6db74 }
  /* LiteralStringRegex */ html[data-mode="auto"] .chroma .sr { color:#e6db74 }
  /* LiteralStringSingle */ html[data-mode="auto"] .chroma .s1 { color:#e6db74 }
  /* LiteralStringSymbol */ html[data-mode="auto"] .chroma .ss { color:#e6db74 }
  /* LiteralNumber */ html[data-mode="auto"] .chroma .m { color:#ae81ff }
  /* LiteralNumberBin */ html[data-mode="auto"] .chroma .mb { color:#ae81ff }
  /* LiteralNumberFloat */ html[data-mode="auto"] .chroma .mf { color:#ae81ff }
  /* LiteralNumberHex */ html[data-mode="auto"] .chroma .mh { color:#ae81ff }
  /* LiteralNumberInteger */ html[data-mode="auto"] .chroma .mi { color:#ae81ff }
  /* LiteralNumberIntegerLong */ html[data-mode="auto"] .chroma .il { color:#ae81ff }
  /* LiteralNumberOct */ html[data-mode="auto"] .chroma .mo { color:#ae81ff }
  /* Operator */ html[data-mode="auto"] .chroma .o { color:#f92672 }
  /* OperatorWord */ html[data-mode="auto"] .chroma .ow { color:#f92672 }
  /* Comment */ html[data-mode="auto"] .chroma .c { color:#75715e }
  /* CommentHashbang */ html[data-mode="auto"] .chroma .ch { color:#75715e }
  /* CommentMultiline */ html[data-mode="auto"] .chroma .cm { color:#75715e }
  /* CommentSingle */ html[data-mode="auto"] .chroma .c1 { color:#75715e }
  /* CommentSpecial */ html[data-mode="auto"] .chroma .cs { color:#75715e }
  /* CommentPreproc */ html[data-mode="auto"] .chroma .cp { color:#75715e }
  /* CommentPreprocFile */ html[data-mode="auto"] .chroma .cpf { color:#75715e }
  /* GenericDeleted */ html[data-mode="auto"] .chroma .gd { color:#f92672 }
  /* GenericEmph */ html[data-mode="auto"] .chroma .ge { font-style:italic }
  /* GenericInserted */ html[data-mode="auto"] .chroma .gi { color:#a6e22e }
  /* GenericStrong */ html[data-mode="auto"] .chroma .gs { font-weight:bold }
  /* GenericSubheading */ html[data-mode="auto"] .chroma .gu { color:#75715e }
}
/* static/css/post-list.css */
.post-list-wrap {
  padding-top: 10rem;
}

.post-list {
  max-width: 840px;
  margin: 0 auto;
}

.post-list-item {
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  padding: 1.25rem 0;
}

.post-list-item:last-child {
  border-bottom: none;
}

.post-list-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-list-item a:hover .post-list-title {
  color: var(--theme);
}

.post-list-date {
  font-size: 0.85rem;
  color: var(--theme);
  font-weight: 500;
}

.post-list-title {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.4;
  transition: color 0.2s;
}

.post-list-summary {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.75;
}

.post-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.post-list-tag {
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--accent, rgba(0, 0, 0, 0.05));
  color: var(--text);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  opacity: 0.7;
}

/* Tag / category term pages (layouts/term.html) reuse the .post-list markup
   above; these rules cover the heading that sits over it. */
/* .nav_header is position:fixed, so term pages need their own clearance —
   baseof's .main.wrap.pt-4 alone leaves the h1 underneath it. */
.term-list-wrap {
  padding-top: 9rem;
}

.term-header {
  max-width: 840px;
  margin: 0 auto 1.5rem;
}

.term-title {
  margin: 0;
  text-transform: capitalize;
}

.term-meta {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.7;
}

.term-meta a {
  color: var(--theme);
}

/* `.content ul { list-style: initial }` in the theme outspecifies a bare
   `.pagination`, so term pages (which render inside .content, unlike /post/)
   showed bullet markers between the page numbers. Match that specificity. */
.pagination,
.content ul.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 0;
  list-style: none;
  max-width: 840px;
  margin: 0 auto;
}

.pagination .page-item .page-link {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}

.pagination .page-item.active .page-link {
  background: var(--theme);
  color: var(--light, #fff);
}

.pagination .page-item .page-link:hover {
  background: var(--accent, rgba(0, 0, 0, 0.05));
}
/* static/css/post-fixes.css */
.post .tip {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Keep heading/paragraph rhythm stable when global root font-size changes.
 * This avoids the first paragraph appearing visually clipped under headings.
 */
.post .post_title {
  line-height: 1.35;
  padding-top: 0.2rem;
  margin-bottom: 1.25rem;
}

/*
 * Single post pages use <div class="wrap mt post"> while .nav_header is
 * absolutely positioned; add an explicit offset so top content is not hidden
 * behind the header.
 */
.wrap.mt.post {
  padding-top: 9.5rem;
}

@media (min-width: 992px) {
  .wrap.mt.post {
    padding-top: 10.5rem;
  }
}

.post .post_inner > :is(h1, h2, h3, h4, h5, h6) + p,
.post .post_title + .post_body .post_inner > p:first-child {
  margin-top: 0.35rem;
  padding-top: 0;
}

/*
 * Tables in posts.
 *
 * The Compose theme's .post rule constrains paragraphs, headings, lists,
 * blockquotes, code blocks, and hr to max-width: 840px !important inside
 * .post, but omits <table>. The global `table { width: 100% }` then lets
 * markdown tables stretch to fill the wider .post_inner column (up to
 * ~1024px on desktop), so they visibly break out of the prose.
 *
 * The table render hook (layouts/_default/_markup/render-table.html)
 * wraps every markdown table in <div class="post_table_wrap">; we anchor
 * the 840px constraint on that wrapper and let overflow-x scroll wide
 * tables on narrow viewports. The <table> stays as a normal table-layout
 * element so columns size from cell content, which display: block breaks.
 */
.post .post_table_wrap {
  max-width: 840px !important;
  margin: 1.5rem auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post .post_table_wrap > table {
  margin: 0;
  width: 100%;
  /* Keep cell widths tied to content so short columns stay narrow. */
  table-layout: auto;
}

/*
 * On narrow viewports we want long cell contents to wrap rather than
 * forcing horizontal scroll for every table; reserve scroll for tables
 * that genuinely can't fit.
 */
@media (max-width: 600px) {
  .post .post_table_wrap > table {
    font-size: 0.92rem;
  }
  .post .post_table_wrap > table th,
  .post .post_table_wrap > table td {
    word-break: break-word;
  }
}

/*
 * Inline SVGs (rendered by layouts/_default/_markup/render-image.html
 * for local .svg images). Inlining is what lets `fill: currentColor`
 * inside the SVG resolve to the page text color in both light and dark
 * mode. The wrapper acts as a figure: centered, prose-column width,
 * with an explicit text color so currentColor is well-defined.
 */
.post .inline-svg {
  display: block;
  max-width: 840px;
  margin: 1.5rem auto;
  color: var(--text);
}
.post .inline-svg > svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* static/css/newsletter.css */
/* Newsletter capture + recent-posts list */
.newsletter { margin: 2rem 0; }
.newsletter__title { margin: 0 0 .25rem; font-size: 1.25rem; }
.newsletter__blurb { margin: 0 0 .75rem; opacity: .8; font-size: .95rem; }
.newsletter__row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.newsletter__label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.newsletter__input {
  flex: 1 1 16rem; min-width: 0; padding: .55rem .7rem;
  border: 1px solid rgba(128,128,128,.4); border-radius: 6px;
  background: transparent; color: inherit; font: inherit;
}
.newsletter__input:focus { outline: 2px solid rgba(43,108,176,.5); outline-offset: 1px; }
.newsletter__button {
  padding: .55rem 1.1rem; border: 0; border-radius: 6px; cursor: pointer;
  background: #2b6cb0; color: #fff; font: inherit; white-space: nowrap;
}
.newsletter__button:hover { background: #245c98; }
html.dark .newsletter__button, html[data-mode="dark"] .newsletter__button { background: #7fb3ff; color: #0d1117; }
html.dark .newsletter__button:hover, html[data-mode="dark"] .newsletter__button:hover { background: #6aa2f0; }

.recent-posts { list-style: none; padding: 0; margin: .5rem 0 1.25rem; }
.recent-posts li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid rgba(128,128,128,.18); }
.recent-posts__link { text-decoration: none; }
.recent-posts__link:hover { text-decoration: underline; }
.recent-posts__date { opacity: .6; font-size: .85rem; white-space: nowrap; }
/* static/css/site-additions.css */
/*
 * Styles for the pieces added on top of the Compose theme: the header name,
 * the post reading measure, post furniture (byline, contents, series, project
 * box, prev/next), and the /projects/, /series/ and /releases/ pages.
 * Loaded last via params.customCSS so it wins ties with earlier sheets.
 */

:root {
  /* Prose column. ~75 characters of Lora at the post font size; the theme's
     840px gave ~110, which is past comfortable reading width. Images, code
     blocks and tables keep the wider 840px column. */
  --measure: 46rem;
}

/* ---------- Header: name next to the photo ---------- */

@media screen and (min-width: 992px) {
  .nav {
    grid-template-columns: auto 1fr;
  }
}

.nav_brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--text);
}

.nav_brand picture,
.nav_brand img {
  max-height: 72px;
  width: auto;
}

.nav_brand_text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.nav_brand_name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}

.nav_brand_site {
  font-size: 0.9rem;
  color: var(--theme);
}

/* ---------- Post reading measure and size ---------- */

.post .post_inner > p,
.post .post_inner > ul,
.post .post_inner > ol,
.post .post_inner > blockquote,
.post .post_inner > h2,
.post .post_inner > h3,
.post .post_inner > h4,
.post .post_inner > h5,
.post .post_inner > h6,
.post .post_inner > hr,
.post > div > .post_date,
.post > div > .post_title,
.post .post_series_pointer,
.post .post_toc,
.post .post_project,
.post .post_series,
.post .post_prev_next {
  max-width: var(--measure) !important;
  margin-left: auto;
  margin-right: auto;
}

.post .post_inner p,
.post .post_inner li {
  font-size: 1.2rem;
  line-height: 1.7;
}

/* ---------- Byline ---------- */

.post .post_date {
  display: block;
}

.post_byline {
  color: var(--text);
  opacity: 0.7;
}

.post_series_pointer {
  font-size: 1rem;
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}

.post_series_pointer a,
.post_series a,
.post_project a,
.post_prev_next a {
  color: var(--theme);
}

/* ---------- Table of contents ---------- */

.post_toc {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  padding: 0.75rem 1.25rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.post_toc summary {
  cursor: pointer;
  font-weight: 600;
}

.post .post_toc nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0;
  max-width: none;
}

.post .post_toc nav ul ul {
  padding-left: 1.1rem;
  margin-top: 0.15rem;
}

.post .post_toc li {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0.15rem 0;
}

.post .post_toc a {
  color: var(--text);
  text-decoration: none;
}

.post .post_toc a:hover {
  color: var(--theme);
}

/* ---------- Project "Try it" box and series list ---------- */

.post_project,
.post_series {
  border-left: 3px solid var(--theme);
  background: var(--accent, rgba(0, 0, 0, 0.04));
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.post_project p,
.post_series p {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 1rem;
}

.post_project_title,
.post_series_title {
  font-weight: 600;
}

/* Install commands. Not <pre><code>: the theme's code-block script labels
   language-less code blocks "NOT SET". */
.install-cmds code {
  display: block;
  white-space: pre;
  font-size: 0.9rem;
  background: none;
  padding: 0;
  color: var(--text);
}

.post_project .install-cmds,
.project-install .install-cmds {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  background: var(--code-bg, rgba(0, 0, 0, 0.05));
  border-radius: 4px;
  font-size: 0.9rem;
}

.post_project_links {
  font-size: 0.95rem !important;
}

.post .post_series ol {
  list-style: decimal;
  margin: 0;
  padding: 0 0 0 1.25rem;
  max-width: none;
}

.post .post_series li {
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- Previous / next ---------- */

.post_prev_next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

.post_prev_next a {
  display: block;
  text-decoration: none;
  line-height: 1.4;
}

.post_prev_next a span {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.65;
  margin-bottom: 0.2rem;
}

.post_next {
  text-align: right;
}

@media (max-width: 600px) {
  .post_prev_next {
    grid-template-columns: 1fr;
  }
  .post_next {
    text-align: left;
  }
}

/* ---------- /post/ intro note ---------- */

.post-list-note {
  max-width: 840px;
  margin: 0 auto 0.5rem;
  font-size: 0.95rem;
  opacity: 0.8;
}

.post-list-note a {
  color: var(--theme);
}

/* ---------- /projects/, /series/, /releases/ ---------- */

.project-hub {
  padding-top: 9rem;
  max-width: 840px;
  margin: 0 auto;
}

.project-hub .term-title,
.project-page .term-title {
  text-transform: none;
}

.project-hub-lede {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0.5rem 0;
}

.term-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  opacity: 0.75;
}

.term-kicker a {
  color: var(--theme);
}

.project-group {
  margin-top: 2.25rem;
}

.project-group-title {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.project-group-title a {
  color: inherit;
  text-decoration: none;
}

.project-group-title a:hover {
  color: var(--theme);
}

.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.project-card {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
}

.project-card-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.project-card-title a {
  color: var(--theme);
  text-decoration: none;
}

.project-card-summary {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
  flex-grow: 1;
}

.project-card-meta {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

.project-card-meta a {
  color: var(--theme);
}

.project-install {
  margin-top: 1rem;
}

.project-install-label {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.project-install .install-cmds {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  background: var(--code-bg, rgba(0, 0, 0, 0.05));
  border-radius: 4px;
  font-size: 0.9rem;
}

.project-section-title {
  max-width: 840px;
  margin: 2rem auto 0.25rem;
  font-size: 1.2rem;
}

.series-desc {
  margin: 0 0 0.5rem;
  line-height: 1.6;
}

.content ol.series-parts {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0;
}

.series-parts li {
  margin: 0.2rem 0;
  line-height: 1.5;
}

.series-parts a {
  color: var(--theme);
}

/* ---------- Home page series cards ---------- */

.home-series a {
  color: var(--theme);
}

/* ---------- Plain pages (About, Subscribe, Search) ---------- */

/* These render through single.html's non-post branch inside baseof's
   .main.wrap, which doesn't clear the header and runs full width. */
.page-single {
  padding-top: 7rem;
  max-width: var(--measure);
  margin: 0 auto;
}

.page-single p,
.page-single li {
  font-size: 1.15rem;
  line-height: 1.7;
}

/* ---------- Figures and code inside the narrower prose column ---------- */

/* A paragraph holding only an image (or an inlined SVG) is a figure, not
   prose. Without this it keeps the 46rem text measure, and the theme's
   centred, up-to-1024px image is anchored to that paragraph's left edge and
   overflows to the right. */
.post .post_inner > p:has(> img:only-child),
.post .post_inner > p:has(> .inline-svg:only-child) {
  max-width: none !important;
}

/* Code blocks line up with the text column (Hugo: .highlight, wrapped in
   .highlight_wrap by the theme's script; ferrisite: pre.highlight). */
.post .post_inner > .highlight,
.post .post_inner > .highlight_wrap,
.post .post_inner > pre {
  max-width: var(--measure) !important;
  margin-left: auto;
  margin-right: auto;
}

/* The theme sets word-break: break-all on code, and line-break: anywhere on
   inline code (its script adds .noClass), which splits inline code mid-word
   ("inc revie / w"). Wrap only where a token can't fit. */
.post .post_inner :not(pre) > code,
.post .post_inner :not(pre) > code.noClass {
  word-break: normal;
  line-break: auto;
  overflow-wrap: anywhere;
}

/* ---------- AsciiDoc articles ---------- */

/* adoc nests blocks in <section> (and the preamble in #preamble) instead of
   emitting them as direct children of .post_inner, so the prose measure
   rules above don't reach them. */
.post .post_inner :is(section, #preamble) > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6, hr, .title, .highlight, .highlight_wrap, pre) {
  max-width: var(--measure) !important;
  margin-left: auto;
  margin-right: auto;
}

/* Block titles (`.Title` above a diagram or listing) read as captions. */
.post .post_inner .title {
  max-width: var(--measure);
  margin: 1.75rem auto 0.25rem;
  font-size: 0.95rem;
  font-style: italic;
  opacity: 0.85;
}

/* ---------- Code blocks: one surface ---------- */

/* The vendored Chroma stylesheet paints <pre> in Monokai (#272822) while the
   theme paints the panel and <code> in --code-bg, so every block showed olive
   bars in the pre's padding above and below the code. */
.post .highlight pre.chroma {
  background-color: transparent !important;
}

/* ---------- Diagrams and figures ---------- */

/* ferrisite's build-time diagrams are figures, like images: centred, at their
   own size up to the image width, so a wide diagram isn't shrunk to the text
   measure (an 842px flowchart's labels became 9px). Their background comes
   from [markup.diagram_light/dark] in ferrisite.toml, which match --code-bg. */
.post .post_inner .diagram {
  max-width: 1024px;
  margin: 2rem auto;
}
.post .post_inner .diagram svg {
  display: block;
  margin: 0 auto;
  border-radius: 6px;
}

/* AsciiDoc emits images as <p><img> inside <section>, out of reach of the
   image-only paragraph rule above. Show them at their own size (the theme
   stretched a 417px drawing to 1024px), centred, never wider than the column. */
.post .post_inner :is(section, #preamble) > p:has(> img:only-child),
.post .post_inner .imageblock {
  max-width: var(--measure) !important;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.post .post_inner :is(section, #preamble) > p > img:only-child:not([width]),
.post .post_inner .imageblock img:not([width]) {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
}

/* SVG drawings referenced with <img> (not inlined) can't follow currentColor,
   and most were exported black on transparent, which vanishes in dark mode.
   Give them a light card. */
html[data-mode="dark"] .post .post_inner img[src$=".svg"] {
  background: #f2f5f7;
  border-radius: 6px;
  padding: 0.75rem;
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .post .post_inner img[src$=".svg"] {
    background: #f2f5f7;
    border-radius: 6px;
    padding: 0.75rem;
  }
}

/* ---------- AsciiDoc admonitions ---------- */

/* adoc emits <div class="admonitionblock note|tip|important|warning|caution">.
   The theme's .tip notice happened to style tips; give every kind the same
   box, in the text column. Warnings and cautions take the theme's warning
   colour, as its .tip_warning does. */
.post .post_inner .admonitionblock {
  position: relative;
  max-width: var(--measure) !important;
  margin: 1.5rem auto;
  padding: 1.25rem 1rem 1.25rem 1.5rem;
  border-left: 0.2rem solid var(--theme);
  background: var(--accent);
}
.post .post_inner .admonitionblock:is(.warning, .caution) {
  --theme: var(--inline-color);
}
.post .post_inner .admonitionblock::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 1.25rem;
  padding: 0.75rem;
  border-radius: 50%;
  background-color: var(--theme);
  background-image: var(--info-icon);
  background-size: 12%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.post .post_inner .admonitionblock > .label {
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
.post .post_inner .admonitionblock .content > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ---- Accessibility fixes from the 2026-11-01 Lighthouse audit ---- */

/* Skip link: first in the tab order, shown only when focused. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--theme);
  border-radius: 0.25rem;
}
.skip-link:focus {
  top: 1rem;
}
/* The skip target takes focus programmatically; no ring on the whole page. */
#main-content:focus {
  outline: none;
}

/* Light-mode accent: the theme's green (#34c759) is 2.2:1 on white, too faint
   for link text. #1f7a3a is 5.4:1. Dark mode keeps #7fb3ff (8.4:1). */
/* Inline code in light mode: the theme's darkgoldenrod (#b8860b) is 3.3:1 on
   white; #8a6100 is 5.5:1. Dark mode keeps #e3b341. */
html[data-mode="light"] {
  --theme: #1f7a3a;
  --inline-color: #8a6100;
}
@media not all and (prefers-color-scheme: dark) {
  html:not([data-mode="dark"]) {
    --theme: #1f7a3a;
    --inline-color: #8a6100;
  }
}

/* Links inside running text are underlined, so they don't rely on colour
   alone (link-in-text-block): at any depth, so a link inside <strong> counts
   too. Classed links (buttons, tags, heading anchors, post lists) and the
   table of contents, which is navigation rather than text, keep their own
   styling. */
#main-content :is(p, li, td, dd, blockquote) a:not([class]):not(:is(.post_toc, nav) a) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
/* A bare URL as link text can't break, and pushed one article to 489px on a
   390px phone. */
#main-content :is(p, li, td, dd, blockquote) a {
  overflow-wrap: anywhere;
}

/* The language label on code blocks: the theme sets 67% size at half
   opacity (about 9px, 4.2:1). */
.highlight_wrap .lang {
  font-size: 0.75rem;
  opacity: 1;
  color: #5c6470;
}
html[data-mode="dark"] .highlight_wrap .lang {
  color: #a9b1bd;
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .highlight_wrap .lang {
    color: #a9b1bd;
  }
}