@charset "UTF-8";*,*::before,*::after{font-family:inherit;background-color:inherit;color:inherit;margin:0;padding:0;box-sizing:border-box}html{font-size:calc(1em + .33vw);font-family:Arial,helvetica neue,sans-serif;line-height:1.5;color:#1c2841;background-color:#010101}body{background-color:#fefefe}template{display:none!important}*+*{margin-top:2.25rem}br,dt,dd,th,td,option,[hidden]+*,li+li,body,.main-and-footer{margin-top:0}p+p{margin-top:.75rem}.priority{margin-top:0}a{text-decoration:none;border-bottom:1px solid;outline-offset:2px}abbr{text-decoration:none;cursor:help;border-bottom:1px dashed}img{max-width:100%;max-height:50vh}.img-link{border-bottom:none}p img{margin:.75rem 0}figure p img{margin:0}:focus:not([tabindex="-1"]),[data-expands]:focus svg,.patterns a:focus .text,[for=themer] :focus+[aria-hidden]{outline:4px solid #999}.katex *{margin-top:0;background-color:initial}[tabindex="-1"]:focus,div:not([tabindex]):focus{outline:none}[hidden]{display:none}[href="#main"]{display:block;width:100%;padding:.75rem;color:#fefefe;background:#000;text-align:center}[href="#main"]:focus{outline:none}h1,h2,h3,h4{font-family:miriam libre,serif;line-height:1.125}h1{color:#1c2841;font-size:2rem}h2{font-size:1.66rem}h3{font-size:1.25rem}h4,h5{font-size:1rem;font-family:pt sans,sans-serif}h5{font-size:.85rem;text-transform:uppercase}kbd{line-height:1;font-size:.66rem;padding:.1rem .33rem;border-radius:.25rem;border:2px solid;box-shadow:.125rem .125rem #111;vertical-align:.33em}pre,.file-tree{overflow-x:auto;padding:1.5rem;border:1px solid}code{font-family:Consolas,Monaco,andale mono,ubuntu mono,monospace;font-size:.85em}.cmd{padding:.75rem;background:#111}.cmd code{color:#fefefe;white-space:nowrap}.cmd code::before{content:"$";font-weight:700;padding-right:.25em}main ul,main ol{margin-left:2.25rem}main li+li{margin-top:.5rem}main ul ul,main ol ol,main li ul,main li ol{margin-top:.5rem}ol ol{list-style:lower-latin}ol ol ol{list-style:lower-roman}main dt{font-weight:700}main dd{padding-left:2rem}dd ul{margin-left:0}dd li+li{margin:0}blockquote{color:#1c2841;border-left:.5rem solid;padding-left:.75rem}blockquote .author{font-size:.85rem}button{font-size:1.25rem;border-radius:.33em;font-family:inherit;background:#fefefe;color:#111;padding:.75rem;border:2px solid #111}[data-launch]{font-size:.66rem!important;padding:.5rem!important;margin-top:0!important;border-radius:0!important;border-top-left-radius:.33rem!important;box-shadow:none!important;background:#111!important;color:#fefefe!important;position:absolute!important;right:0!important;bottom:0!important}table{text-align:left;table-layout:fixed;width:100%;border-collapse:collapse}th,td{border:2px solid;padding:.5rem;line-height:1.25;margin:0}th{font-weight:700}th:empty{border:0}.tested{text-align:center;border:1px solid #111}.tested tr{display:flex;flex-flow:row wrap}.tested td,.tested th{vertical-align:middle;overflow:hidden;flex:1 0 auto;border:1px solid #111}.tested th{width:100%;background-color:#111;color:#fefefe;outline-color:#111}.tested img{max-width:3rem}.tested span{display:block;margin:0}.tested .additional{font-size:.85rem}caption{font-size:1.125rem;padding-bottom:.25rem;font-style:italic}.wrapper{position:relative;margin-top:0;overflow-x:hidden}.intro-and-nav{font-size:.8rem;width:15rem;height:100vh;position:fixed;top:0;left:0;border-right:2px solid;overflow:auto}.intro-and-nav>div{padding:2.25rem;display:flex;flex-direction:column;height:100%}.intro{flex:none;margin-bottom:1rem}.logo{border:0}.logo img{width:100%;max-width:12rem}.library-desc{margin-top:.5rem;margin-left:auto;margin-right:auto;max-width:25rem}.main-and-footer{margin-left:15rem}.main-and-footer>div{max-width:40rem;margin:0 auto;padding:2.25rem}@media screen and (min-width:1200px){.main-and-footer>div{max-width:100%}}.patterns{flex:auto;margin-top:.5rem}.patterns *{margin-top:0}.patterns h3{font-size:1rem}.patterns h3+ul{margin-top:.75rem}.patterns li{line-height:1.125;list-style:none}.patterns li+li{margin-top:.75rem}.patterns ul ul{margin-left:.75rem}.pattern a{border:0;display:flex;flex-wrap:nowrap;align-items:baseline;font-weight:700;padding:.5rem 1rem}.pattern a:focus{outline:none}.pattern span{margin-left:.125rem}.pattern [aria-current]{background-color:#1c2841;clip-path:polygon(0% 0%,90% 0%,100% 50%,90% 100%,0% 100%);color:#fefefe;padding-top:.5em;padding-bottom:.5em}#menu-button{display:none;width:100%;text-align:center}#menu-button:focus{outline:none;box-shadow:inset 0 0 0 .25rem #999}.toc{font-size:.85rem;border:1px solid;padding:1.5rem}.toc h2{font-size:1rem}.toc ol{margin-left:.75rem;margin-top:.5rem}#disqus-container{text-align:center}#disqus-button{width:100%;padding:.25em .75em}#disqus-comments{display:none}.patterns-list{list-style:none;margin-left:0}.patterns-list h2{font-size:1.25rem;line-height:1.6}.patterns-list li+li{margin-top:1rem;padding-top:1rem;border-top:2px solid}.patterns-list a{border:0}.tags{margin-top:0;font-size:.85rem}.tags *{display:inline;margin:0}.tags strong{margin-right:.25rem}.tags li{white-space:nowrap;margin:0 .25rem 0 0}.date{margin-top:0;font-size:.85rem}.note{border-left:.5rem solid;font-size:.85rem}.note .sign{height:2.25rem;width:2.25rem}.note>div{margin-left:.75rem}.note>div>img:first-child{height:1.5rem}.note>div>:first-child+*{margin-top:0}.note.warning>div{margin-left:1.25rem}.note.warning{border-left:0;background-size:.5rem;background-repeat:repeat-y}.ticks li{list-style:none;position:relative}.ticks li::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:.25rem;background-size:100%;position:absolute;left:-1.25rem;top:.25rem}figure{text-align:center}figcaption{font-size:.85rem;font-style:italic;margin-top:.5rem}main{display:block;counter-reset:fig;min-height:100vh}figcaption::before{counter-increment:fig;content:"Figure " counter(fig)": ";font-weight:700}pre[class*=language-]{background:0 0;margin-top:2.25rem;margin-bottom:0;overflow-y:hidden;overflow-x:auto}code[class*=language-],pre[class*=language-]{text-shadow:none}pre[class*=language-][data-line]{padding:1em 0 0 2.25rem}pre[class*=language-] code *{margin-top:0!important}[data-codeblock-shortcode],.code-annotated code{display:inline-block;margin-top:-1rem}.code-annotated{overflow-y:hidden;overflow-x:auto;padding:1.5rem;border:1px solid;white-space:pre;counter-reset:annotation}.file-tree{overflow-x:auto}.file-tree ul{font-family:Courier,monospace;margin:0;padding:0;padding-left:3rem;list-style:none;line-height:1.25;position:relative}.file-tree>ul{padding-left:0;overflow-x:auto;overflow-y:hidden}.file-tree li{background:#fefefe;position:relative;white-space:nowrap}.file-tree li+li{margin-top:0}.file-tree li:not(:last-child)>ul::before{content:"\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020";position:absolute;left:0;top:0;bottom:0;width:1em;white-space:normal}.file-tree li::before{content:"\251C\2500\2500\0020"}.file-tree li:last-child::before{content:"\2514\2500\2500\0020"}.expandable-section{border-top:1px solid;border-bottom:1px solid;padding:.75rem 0}[id^=js-expandable-]{margin:0;padding:1.5rem 0 .75rem}@media screen{.expandable-section+.expandable-section{margin-top:0;border-top:0}}[data-expands]{text-align:left;color:#111;border:0;background:0 0;width:100%;padding:0;margin:0;display:flex;align-items:center;justify-content:space-between;cursor:pointer}[data-expands] svg{margin-top:0;width:1em;height:1em}[data-expands][aria-expanded=true] svg .up-strut{display:none}[data-expands]:focus{outline:none}p:empty{display:none}*:not(p)+p:empty+p{margin-top:2.25rem}.wcag li{font-size:.85em}.principles p{font-size:.85rem;margin-top:.75rem}.principles.with-desc>li+li,.wcag.with-desc>li+li{border-top:1px solid;margin-top:.75rem;padding-top:.75rem}.site-error{padding:1.5rem;background:#efefef}.site-error strong{color:#c83737}#menu-button svg{height:.75em;width:.75em;margin-right:.25em}h1 svg{margin-right:0;width:.85em;height:.85em}.wcag-icon{width:1.25em}.bookmark-icon{vertical-align:middle}.link-icon{width:.75em;height:.75em}.tags svg,.link-icon{vertical-align:middle}.balloon-icon{width:.75em;margin-right:0}.print{white-space:nowrap;font-style:normal}.colors{display:flex;height:5rem;margin:-.25rem;list-style:none;flex-wrap:nowrap}.colors li{margin:.25rem;flex:1 0 auto;position:relative}.colors span{line-height:1;background-color:#111;color:#fefefe;font-size:.75rem;padding:.25rem;position:absolute;bottom:.25rem;right:.25rem}.pattern-link{font-weight:700}.demo-inner{border-top:1px solid;border-bottom:1px solid;padding:1.5rem 0;position:relative}[id^=js-demo-]{all:initial;display:block}.h2-container{position:relative;font-size:1.66rem}.h2-container a{position:absolute;margin-top:0;top:0;line-height:1;left:-1em;border:0}.wrapper.print-version .main-and-footer{margin-left:0}.wrapper.print-version .intro-and-nav{position:static;border:0;width:auto;text-align:center;display:flex;align-items:center;justify-content:center}.wrapper.print-version main{min-height:0}.wrapper.print-version .library-desc{font-size:1rem}.wrapper.print-version .intro-and-nav>div{height:auto}.wrapper.print-version #patterns-list{margin-left:0;margin-top:1.5rem;display:block}.wrapper.print-version .toc{font-size:1rem}.wrapper.print-version .toc h2{font-size:1.66rem}.wrapper.print-version #patterns-list h3{font-size:1.25rem}.wrapper.print-version .patterns{margin-top:0}.pattern-section:not(:last-child){padding-bottom:2.25rem;border-bottom:2px solid}.pattern-section h1{padding:0}.custom-404{text-align:center}.custom-404 *{margin:0}.custom-404 svg{max-width:100%}.vh{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.gallery{display:flex;justify-content:center}@media screen and (max-width:45em){body a{hyphens:auto}.intro-and-nav{position:static;width:auto;height:auto;border-right:none}.intro{text-align:center}.intro-and-nav>div{padding:1.5rem}.main-and-footer{margin:0}main{min-height:auto}#patterns-list{margin-top:.5rem;border:1px solid;display:none}.patterns h3{font-size:1.5rem;padding:1.5rem 1rem .75rem}.patterns li:not(.pattern){margin-top:0}.patterns ul ul{margin:0}.patterns li{margin-top:0}.pattern{font-size:1rem}.pattern a{padding:1rem}.pattern [aria-current]{clip-path:none;padding:1rem}.pattern+.pattern{border-top:1px solid;margin-top:0}#menu-button{display:block}.toc-link{display:none}[aria-expanded=true]+#patterns-list{display:block}code{word-break:break-all}}@media print{.wrapper:not(.print-version) .intro-and-nav,.wrapper:not(.print-version) [role=contentinfo]{display:none}.main-and-footer{margin-left:0}a{border:0}main a::after{content:" (" attr(href)")";word-break:break-word}main nav a::after{content:""}.cmd code{background:#fefefe;color:#111}pre code{white-space:pre-wrap!important}.expandable-section{border:0;padding:0}.expandable-section+p{margin-top:.75rem}[id^=js-expandable-]{display:block}[data-expands] svg{display:none}main *:not(.with-desc){page-break-inside:avoid}.note.warning{border-left:.5rem solid;background:0 0}}@media(-ms-high-contrast:active){img[src*=".svg"]{background:#fefefe;padding:.5rem}.ticks li::before{content:"✓";background:0 0;width:auto;top:0}.note.warning{border-left:.5rem solid;background:0 0}}::selection{background:rgba(0,0,0,.8);color:#fefefe}header .library-desc{font-size:.7rem;overflow:hidden;white-space:nowrap}main :focus:not([tabindex="-1"]){outline:none}main>blockquote{font-weight:700}main>blockquote strong{text-decoration:underline;text-decoration-style:dashed}main>blockquote ul{margin-top:.5rem;margin-left:1rem}main .message-container{text-align:center}main .section-head{text-align:center;font-weight:700;font-size:1.3rem;margin-top:5rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px dashed #999}footer{margin-top:4rem;text-align:center}footer .footer-text{font-size:.6rem}footer .breakable{display:inline-block}a.logo:focus{outline-width:0}.nav-item{font-family:miriam libre,serif;font-size:1.3rem}.blog-page table{table-layout:auto}.blog-page table thead tr th{background-color:#dfcbcb;border-color:#131313;color:#333;font-variant:small-caps}.blog-page table tbody tr:nth-child(even){background-color:rgba(0,0,0,9%)}.blog-page .highlight table{table-layout:fixed}.blog-page .title{border-bottom:4px solid #1c2841;line-height:150%;color:#1c2841;margin-bottom:0}.blog-page .blog-banner{height:initial;margin-top:0;max-height:initial;max-width:initial;width:initial}.blog-page .details{margin-bottom:.3rem;margin-top:0}.blog-page .date{margin:0;font-size:.6rem}.blog-page .read-time{margin-left:1.5rem;font-size:.6rem}.blog-page .tag{font-size:.6rem;margin-right:2px}.blog-page .divider{height:1px;margin:14px 0;border-top:1px dotted #131313;width:40px}.blog-page .divider+*{margin-top:0}.blog-page .table-of-contents-header{margin-top:1rem;font-variant:small-caps;font-size:.8rem}.blog-page #TableOfContents{font-size:.8rem;font-variant:small-caps;margin:.2rem 0 1rem}.blog-page img{background-color:initial}.blog-page>p,.blog-page>ul{line-height:1.6rem;font-family:Cambria,Cochin,Georgia,Times,times new roman,serif}.blog-page>p img,.blog-page>ul img{max-height:initial}.blog-page>figure img{max-height:initial}@media screen and (min-width:960px){.blog-page{font-size:1.15rem}.blog-page>p{line-height:1.7rem;max-width:950px}.blog-page>dl{max-width:950px}.blog-page>dl dt{text-decoration:underline}.blog-page>dl dd{font-size:85%}.blog-page>dl dd code{font-size:120%;font-style:italic}}.goat.svg-container{overflow-x:auto}.goat.svg-container g{font-size:12px}.blog-list{list-style-type:none;margin:0}.blog-list .item{overflow:hidden}.blog-list .item:not(:last-child){border-bottom:1px dashed #7b7b7b;padding-bottom:4rem;margin-bottom:4rem}.blog-list .preview-icon{padding-right:4px}.blog-list .preview-icon.blog-icon svg{width:15px;height:24px}.blog-list .preview-icon.hot-take-icon svg{width:18px;height:24px}h1+ul.blog-list{margin-top:4rem}.blog-preview img{max-height:initial}.blog-preview .title-header{font-weight:700;padding-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #1c2841}.blog-preview .title{font-size:1.35rem;border-bottom:none;vertical-align:top}.blog-preview .icon{display:inline-block;width:20px}.blog-preview .details{margin-top:0}.blog-preview .date{color:#333;font-size:.6rem;text-decoration:none;border-bottom:none}.blog-preview .tag{font-size:.6rem;margin-right:4px;text-decoration:underline;border-bottom:none}.blog-preview .content{font-size:.85rem;margin-bottom:1rem;margin-top:1rem;text-decoration:none;border-bottom:none}.blog-preview .content .preview-img-box{float:right;margin:0 0 1rem 1rem}.blog-preview .read-more{font-size:.7rem;text-decoration:underline;border-bottom:none;margin-top:1rem}.hot-take-preview .summary{margin-top:.2rem}.zoomable-image-wrapper{display:inline-block;max-width:700px}.zoomable-image-wrapper .zoomable-image-preview{cursor:pointer;height:auto;width:auto}.zoomable-image-wrapper .zoomable-image-caption{margin-top:0;font-size:50%;font-style:italic;line-height:1rem;text-align:center}.zoomable-image-overlay{display:none;position:fixed;top:0;bottom:0;right:0;left:0;width:100%;height:100%;background-color:rgba(19,19,19,.9);max-width:initial;max-height:initial;margin:0;overflow-y:auto}.zoomable-image-overlay.show{display:block}.zoomable-image-overlay *{margin:0;background-color:initial}.zoomable-image-overlay div,.zoomable-image-overlay p,.zoomable-image-overlay img{filter:none}.zoomable-image-overlay .zoomable-image-caption{margin:0 auto;color:#fff;line-height:1.5rem;font-style:italic;text-align:center;padding:.2rem 1rem;background-color:rgba(0,0,0,.9);border-radius:5px;max-width:100%}.zoomable-image-overlay .zoomable-image-close{display:inline-block;color:#fff;border-radius:50%;background-color:#4b4b4b;cursor:pointer;line-height:1rem;height:1rem;width:1rem;padding:7px;margin:20px 5px 5px 20px;border:1px solid #333;user-select:none;box-sizing:content-box;text-align:center}.zoomable-image-overlay .zoomable-image-close:hover{background-color:#000;border-color:#fff;color:#fff}.zoomable-image-overlay .zoomable-image-close:active,.zoomable-image-overlay .zoomable-image-close:focus,.zoomable-image-overlay .zoomable-image-close:target{background-color:#fff;color:#000}.zoomable-image-overlay .zoomable-image-background{background:initial;display:flex;padding:.5rem}.zoomable-image-overlay .zoomable-image-background img{background-color:#000;box-shadow:0 0 5px rgba(0,0,0,.7);height:auto;margin:0 auto;max-width:100%;max-height:initial}.blog-page .highlight{filter:invert(100%);background:#ddd;padding:.0625rem .33rem;border-radius:.5rem;width:100%;display:inline-block}.blog-page .highlight span{margin-top:0}.blog-page .highlight tbody>tr>td:first-child{width:4rem;line-height:.98rem}@media screen and (min-width:960px){.blog-page .highlight tbody>tr>td:first-child{line-height:1.15rem}}.numbered .highlight::after,.code-annotated.numbered+ol li::before{counter-increment:annotation;content:counter(annotation);font-weight:700;font-size:.5rem;background:#111;color:#fefefe;border-radius:1rem;margin-left:.25rem;padding:.125em .5em;vertical-align:.33em}.code-annotated.numbered+ol{list-style:none;counter-reset:annotation}.code-annotated.numbered+ol li::before{font-size:.66em;margin-right:.33em;vertical-align:.25em}@font-face{font-family:miriam libre;font-display:swap;src:local("Arial"),url(https://www.jayfid.com/css/fonts/miriamlibre-bold.woff)format("woff"),url(https://www.jayfid.com/css/fonts/miriamlibre-bold.woff)format("woff");font-weight:700;font-style:normal}.note.warning{background-image:url(https://www.jayfid.com/css/images/stripe.svg)}.ticks li::before{background-image:url(https://www.jayfid.com/css/images/icon-tick.svg)}.serious-table td:nth-child(1){text-align:center}.serious-table img{height:2rem;margin:0 5px 5px}