main{display:grid;margin:0 auto;grid-template-columns:minmax(300px, 800px) 1fr}main :where(img,video){display:block;max-width:100%;height:auto;margin:0;margin-inline:auto;margin-block-end:var(--spacing-xl)}main a>img{margin-inline:auto}h1{margin-block-end:var(--spacing-xs)}.cover{width:100%;height:auto;aspect-ratio:2/1}.tags{padding:0;margin:0;margin-block-end:var(--spacing-xl);list-style-type:none}.tags li{display:inline;list-style-image:none;padding:0;margin:0;margin-inline-end:var(--spacing-s)}.tags a{padding:.2em .5em;border-radius:4px;font-size:var(--font-size-s)}.tags a:first-of-type{padding-inline-start:0}.tags a:hover,.tags a:focus{text-decoration:none;background-color:var(--color-background-offset-dark)}.metadata{display:grid;align-items:center;border-radius:8px;grid-template-columns:repeat(2, 1fr);justify-items:start;margin-block-end:var(--spacing-m)}.metadata div{display:flex;width:100%;align-items:flex-start;justify-items:center;line-height:var(--line-height-base)}.metadata svg{height:1.5em;padding-right:6px}@media screen and (max-width: 800px){.second-column{display:none}}pre>code,pre{background:#272935}pre{padding:var(--spacing-m) var(--spacing-l);border-radius:8px;color:var(--color-text);margin-block-end:var(--spacing-xl)}pre[data-language]{position:relative;padding:0 var(--spacing-m) var(--spacing-xl) var(--spacing-m);border-radius:8px;border-top:none;color:var(--color-text);margin-block-end:var(--spacing-xl)}pre[data-language] header{position:sticky;top:0;left:0;display:grid;width:100%;font-family:var(--font-family);grid-template-columns:min-content 1fr;margin-block-end:var(--spacing-l)}pre[data-language] header span{padding:var(--spacing-xs) var(--spacing-m);border-radius:8px 8px 0 0;border-block-end:1px solid var(--color-primary);font-weight:var(--fw-bold);padding-block-start:var(--spacing-m)}pre[data-language] button{align-self:end;padding:.5rem;border:none;border:1px solid var(--color-border);border-radius:8px;margin:.25rem 0;color:var(--color-text);cursor:pointer;font-size:var(--font-size-s);justify-self:end}code[class*=language-]{border-radius:8px;margin:var(--spacing-m) 0;font-family:var(--font-family-monospace)}pre::-webkit-scrollbar{width:2px;height:2px}pre::-webkit-scrollbar-track{background:none}.callout{background-color:var(--color-background-offset-light);box-shadow:0 0 2px 1px var(--color-border);margin-block-end:var(--spacing-xl);border-radius:8px;padding:var(--spacing-l)}.callout .icon{width:clamp(2rem,6vw,3rem);aspect-ratio:1}.callout p:last-of-type{margin-block-end:0}.terminal{position:relative;overflow-x:auto;border-radius:8px;background:#242424;color:#e2e2e2;font-size:.95em;margin-block-end:var(--spacing-l);padding-block-end:var(--spacing-m)}.terminal .titlebar{position:sticky;top:0;left:0;display:grid;grid-template-columns:1fr min-content;width:100%;margin-block-end:var(--spacing-m);height:2rem;background-color:#ccc}.terminal .titlebar span{justify-self:center;align-self:center;color:#272626;text-shadow:0 0 2px rgba(0,0,0,.2)}.terminal .titlebar svg{height:1.75rem;padding:.1rem 0}.terminal p{margin-block-end:var(--spacing-m);padding:0 var(--spacing-s);line-height:var(--line-height-tight);font-family:var(--font-family-monospace)}.terminal p code{background-color:rgba(0,0,0,0)}.terminal p:first-of-type::before{display:inline;color:#f77d91;content:"➜ ";padding:0;font-family:var(--font-family)}.terminal p:last-child{margin:0}.terminal p br{display:block;content:" ";width:100%;margin-block-end:var(--spacing-s)}.terminal code{font-size:inherit}.filelist{--guide-width: 1px;--guide-color: var(--color-text-offset-dark1);padding:var(--spacing-l) 0 var(--spacing-m) 0;background-color:var(--color-background-offset-dark)}.filelist ul{margin:0;padding-inline-start:var(--spacing-m)}.filelist>ul{margin:0;padding-inline-start:var(--spacing-l)}.filelist li{position:relative;margin:0;list-style-image:none;list-style-type:none;padding-inline-start:.75em}.filelist li::before{position:absolute;top:.8em;left:0;width:.6em;height:var(--guide-width);background-color:var(--guide-color);content:""}.filelist li::after{position:absolute;top:0;bottom:0;left:0;width:var(--guide-width);height:100%;background-color:var(--guide-color);content:""}.filelist li:last-child::after{height:.8em}.post-embed{display:grid;gap:var(--spacing-s);background-color:var(--color-background-offset-dark);border:1px solid var(--color-border);border-radius:8px;margin-block-end:var(--spacing-xl);padding:var(--spacing-l) var(--spacing-m)}.post-embed h3{font-size:var(--font-size-l);margin:0}.post-embed time{font-size:var(--font-size-s);color:var(--color-text-offset-dark1)}.post-embed p{margin:0;margin-block-start:var(--spacing-s)}.blog-series-instance-embed{--series-padding: 1rem;--animation-timing: 600ms;overflow:hidden;width:100%;padding:var(--series-padding) var(--series-padding) 0 var(--series-padding);margin-block-end:var(--spacing-xl);border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-background-offset-dark)}.blog-series-instance-embed header{display:grid;grid-template-columns:1fr min-content;width:100%;min-height:var(--font-size-2xl);padding-bottom:var(--spacing-l);line-height:var(--line-height-base)}.blog-series-instance-embed header h2{grid-row:1;grid-column:span -1;font-size:var(--font-size-s);margin-block-end:var(--spacing-m);text-transform:uppercase}.blog-series-instance-embed header h3{grid-row:2}.blog-series-instance-embed header h3 a::after{content:""}.blog-series-instance-embed header h3 span{font-size:var(--font-size-s);font-weight:var(--font-weight-normal)}.blog-series-instance-embed header button{--size: clamp(1.5rem, 3.5vw, 2.25rem);width:var(--size);height:var(--size);grid-row:1/span 2;grid-column:2;justify-self:end;align-self:center;border:none;border-radius:8px;margin:0;margin-inline-start:1rem;padding:0;background-color:rgba(0,0,0,0);cursor:pointer}.blog-series-instance-embed header button svg{height:var(--size);border:1px solid var(--color-border);border-radius:50%;margin:0;background-color:var(--color-background);transform:rotate(180deg);transition:transform var(--animation-timing) ease-in}.blog-series-instance-embed h2,.blog-series-instance-embed h3{position:relative;border-radius:8px 8px 0 0;margin:0;color:var(--color-primary);font-size:var(--font-size-base)}.blog-series-instance-embed button[aria-expanded=true] svg{transform:rotate(-90deg)}.blog-series-instance-embed button[aria-expanded=false] svg{transform:rotate(0)}.blog-series-instance-embed .content{display:grid;overflow:hidden;grid-template-rows:1fr;transition:all var(--animation-timing) ease-out}.blog-series-instance-embed .content[aria-hidden=true]{grid-template-rows:0fr}.blog-series-instance-embed ol{min-height:0;padding:0;margin:0;color:var(--color-text-offset-dark1);counter-reset:series}.blog-series-instance-embed li{position:relative;display:grid;padding:.25rem;margin:0;gap:.5rem;grid-template-columns:min-content 1fr;justify-items:start;line-height:var(--line-height-base);margin-block-end:1rem;padding-inline-start:1rem}.blog-series-instance-embed li:first-of-type{border-block-start:1px solid var(--color-primary);padding-block-start:var(--spacing-l)}.blog-series-instance-embed li::before{min-width:2rem;padding:0 .3rem;color:var(--color-text-offset-dark1);content:counters(series, "") "";counter-increment:series;grid-column:1;grid-row:1}.blog-series-instance-embed li[data-selected=true]::after{--dot-size: 0.65em;width:var(--dot-size);height:var(--dot-size);background-color:var(--color-text-offset-dark1);clip-path:polygon(0 0%, 0% 100%, 100% 50%);content:"";grid-column:1;grid-row:1;margin-block-start:.4em;margin-inline-start:-1em}.blog-series-instance-embed a{align-self:center;color:var(--color-text-offset-dark1);text-decoration:none}.blog-series-instance-embed a:hover{color:var(--color-secondary)}.comp-imgcompare{--thumb-size: clamp(1rem, 5vw, 2rem);--divider-width: 0.1rem;--divider-color: hsl(0, 0%, 100%);--thumb-icon-svg: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg" fill="none"><rect width="60" height="60" rx="50%" ry="50%" fill="white" stroke-width="2" stroke="black"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');--thumb-background-image: var(--thumb-icon-svg), linear-gradient( to right, transparent calc(50% - var(--divider-width)), var(--divider-color) calc(50% - var(--divider-width)) calc(50% + var(--divider-width)), transparent calc(50% + var(--divider-width)) 100% );--thumb-background-size: var(--thumb-size) var(--thumb-size), 100%;--thumb-background-position: center center, left top;--thumb-drop-shadow: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));margin-block-end:var(--spacing-xl);display:grid;overflow:hidden}.comp-imgcompare input{grid-column:1;grid-row:1;z-index:30;cursor:col-resize;margin:0 calc(var(--thumb-size)/-2);width:calc(100% + var(--thumb-size));height:100%;appearance:none;-webkit-appearance:none;background:none;border:none}.comp-imgcompare input::-moz-range-thumb{background:none;border:none;background-image:var(--thumb-background-image);background-size:var(--thumb-background-size);background-position:var(--thumb-background-position);background-repeat:no-repeat;width:var(--thumb-size);height:100%;filter:var(--thumb-drop-shadow)}.comp-imgcompare input::-webkit-slider-thumb{-webkit-appearance:none;background:none;border:none;background-image:var(--thumb-background-image);background-size:var(--thumb-background-size);background-position:var(--thumb-background-position);background-repeat:no-repeat;width:var(--thumb-size);height:100%;filter:var(--thumb-drop-shadow)}.comp-imgcompare input::-webkit-slider-runnable-track{width:100%;height:100%}.comp-imgcompare input:focus::-moz-range-thumb{filter:drop-shadow(4px 0 0px var(--outline-color)) drop-shadow(-4px 0 0px var(--outline-color))}.comp-imgcompare input:focus::-webkit-slider-thumb{filter:drop-shadow(4px 0 0px var(--outline-color)) drop-shadow(-4px 0 0px var(--outline-color))}.comp-imgcompare img{grid-column:1;grid-row:1;width:100%;height:auto;object-fit:cover;margin-block-end:0}.comp-imgcompare img:last-of-type{clip-path:polygon(calc(var(--exposedPercentage) + var(--divider-width) / 2) 0, 100% 0, 100% 100%, calc(var(--exposedPercentage) + var(--divider-width) / 2) 100%)}