@charset "UTF-8";@import "https://fonts.googleapis.com/css?family=Istok+Web:700|Noto+Sans:400,400i,700,700i&display=swap";*,*::before,*::after{box-sizing:border-box}body{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}img{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:calc(1em + 0.33vw);font-family:noto sans,Arial,Helvetica Neue,sans-serif;color:#111;background-color:#fefefe}template{display:none!important}br,dt,dd,th,td,option,[hidden]+*,li+li,body,.main-and-footer{margin-top:0}p+p{margin-top:.75rem}article+article{margin-top:1.5rem}.title{margin:0}.title a{text-decoration:none}.priority{margin-top:0}abbr{text-decoration:none;cursor:help;border-bottom:1px dashed}.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}a{outline-offset:2px}.katex *{margin-top:0;background-color:transparent}[tabindex="-1"]:focus,div:not([tabindex]):focus{outline:none}[hidden]{display:none}[href="#main"]{display:block;width:100%;padding:.75rem;color:#fefefe;background:#000;position:absolute;top:-3rem;text-align:center;z-index:1}[href="#main"]:focus{top:0;outline:none}h1,h2,h3,h4{font-family:istok web,serif}h1{font-size:2rem}h2{font-size:1.66rem}h3{font-size:1.25rem}h4,h5{font-size:1rem}h5{font-size:.85rem}kbd{line-height:1;font-size:.66rem;padding:.1rem .33rem;border-radius:.25rem;border:2px solid;box-shadow:.125rem .125rem 0 #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{border-left:.5rem solid;padding-left:.75rem}blockquote .author{font-size:.85rem}button{font-size:1.25rem;border-radius:.33em;font-family:inherit;background:#111;color:#fefefe;padding:.75rem;border:0}[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}label{display:inline-block;font-weight:700}[for=themer]{background:#111;border-radius:.33em;color:#fefefe;padding:.25em .75em;margin:.5rem}[for=themer] [aria-hidden]::before{content:'off'}[for=themer] :checked+[aria-hidden]::before{content:'on'}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}.intro-and-nav>div{padding:2.25rem;height:100%;overflow:auto}.intro{flex:0 0 auto}.patterns{flex:1 1 auto}.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:0 2.25rem}[role=contentinfo]{font-size:.85rem;margin-top:4rem;text-align:center}.patterns{margin-top:1.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:0 1rem}.pattern a:focus{outline:none}.pattern span{margin-left:.125rem}.pattern [aria-current]{background-color:#111;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;padding: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{font-size:.85rem;border-bottom:4px double cyan;margin-bottom:0}.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{border-left:0}.note.warning>div{margin-left:1.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}.highlight{background:#ddd;padding:.0625rem .33rem;border-radius:.5rem}.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}.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}a svg,button svg,h1 svg,th svg,li>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!important}.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}[role=banner]{position:static;width:auto;height:auto}.intro{display:flex;flex-direction:column;align-items:center;text-align:center}.intro-and-nav{border-right:none}.intro-and-nav>div{padding:1.5rem}.main-and-footer{margin:0}main{min-height:auto}#patterns-list{margin-top:.5rem;border:1px solid;padding:0}.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}#patterns-list{display:none}.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}}code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,andale mono,ubuntu mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar .toolbar-item{display:inline-block}div.code-toolbar>.toolbar a{cursor:pointer}div.code-toolbar>.toolbar button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar a,div.code-toolbar>.toolbar button,div.code-toolbar>.toolbar span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar a:hover,div.code-toolbar>.toolbar a:focus,div.code-toolbar>.toolbar button:hover,div.code-toolbar>.toolbar button:focus,div.code-toolbar>.toolbar span:hover,div.code-toolbar>.toolbar span:focus{color:inherit;text-decoration:none}.token.tab:not(:empty),.token.cr,.token.lf,.token.space{position:relative}.token.tab:not(:empty):before,.token.cr:before,.token.lf:before,.token.space:before{color:gray;opacity:.6;position:absolute}.token.tab:not(:empty):before{content:'\21E5'}.token.cr:before{content:'\240D'}.token.crlf:before{content:'\240D\240A'}.token.lf:before{content:'\240A'}.token.space:before{content:'\00B7'}