*{box-sizing:border-box;margin:0;padding:0}body{overflow-x:hidden;overflow-y:auto;font-size:var(--font-size);--light:black;--dark:white;--sans-font:"open sans",sans-serif;--shape-color:black;--max-width:50em;--header-text-color:#818089;--font-size:clamp(16px, 2vw, 20px);--code-font-size:16px;--dpr:1;--bold-color:#4c95b4;--title-font-size:3em;--quote-font-size:34px;--js-color:#4a78b7;--dom-color:#d72b51;--line-height:1.55em;--padding:2em;--background-color:#f8f8f6;--master-size:45px;--secondary-size:28.3px;--display-font:"Montserrat",sans-serif;--monospace-font:monospace;--orange-primary:#ff8a00;--pink-primary:#ff1b8a;--blue-primary:#0072ca;--primary-color:var(--orange-primary);--text-color:#212121;--quote-text-color:#828180;--link-color:#404040;--code-background-color:#ececec;--note-color:#ff69b2;--note-background-color:#ff69b210;--ok-color:#048b75;--ok-background-color:#048b7510;--section-highlight-color:#161718;--tick-svg:url("data:image/svg+xml,%0A%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M21.652 3.21c-.293-.294-.77-.294-1.06 0L9.41 14.34c-.293.297-.77.297-1.062 0l-4.9-4.99c-.144-.147-.334-.22-.525-.22-.193-.002-.39.07-.536.22L.222 11.298c-.144.148-.222.333-.222.526 0 .194.078.397.223.544l4.94 5.184c.292.297.77.777 1.062 1.07l2.124 2.142c.29.293.768.293 1.06 0l14.367-14.34c.293-.294.293-.777 0-1.07l-2.125-2.14z' fill-rule='evenodd'/%3E%3C/svg%3E%0A");background-color:var(--background-color);font-family:var(--sans-font)}#toggle-light{margin-top:-1em;transition:margin 250ms ease-out,opacity 250ms ease-out;display:flex;opacity:0}#toggle-dark{display:flex;opacity:1}body.transition-mode{transition:color 250ms ease-out,background-color 250ms ease-out,border-color 250ms ease-out,fill 250ms ease-out}@media (-webkit-min-device-pixel-ratio:2.5),(min-resolution:192dpi){body{--dpr:2.5}}@media (prefers-color-scheme:dark){body{--shape-color:white;--header-text-color:#818089;--bold-color:#ccfcff;--js-color:#a5cbff;--ok-color:#25b39a;--background-color:#101010;--text-color:#dedede;--quote-text-color:#eee;--link-color:#dedede;--code-background-color:#14171a;--section-highlight-color:#ececec;--pink-primary:#ff69b2;--blue-primary:#99e2ff;--tick-svg:url("data:image/svg+xml,%0A%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' fill='white' d='M21.652 3.21c-.293-.294-.77-.294-1.06 0L9.41 14.34c-.293.297-.77.297-1.062 0l-4.9-4.99c-.144-.147-.334-.22-.525-.22-.193-.002-.39.07-.536.22L.222 11.298c-.144.148-.222.333-.222.526 0 .194.078.397.223.544l4.94 5.184c.292.297.77.777 1.062 1.07l2.124 2.142c.29.293.768.293 1.06 0l14.367-14.34c.293-.294.293-.777 0-1.07l-2.125-2.14z' fill-rule='evenodd'/%3E%3C/svg%3E%0A");--note-background-color:#ff69b210}div.svg{filter:invert(1)}#toggle-light{margin-top:1em;opacity:1}#toggle-dark{opacity:0}}section.content{margin-top:calc(4px + var(--master-size) + 2 * var(--secondary-size) + .5em)}section.content q{text-transform:uppercase;font-size:var(--quote-font-size);font-family:var(--display-font);font-style:italic;color:var(--quote-text-color);line-height:1.2em;margin:0 1em .5em -1em;text-align:left;width:50%;display:block;float:left}section.content .quote{font-size:clamp(
    calc(1.2 * var(--font-size)),
    3vw,
    calc(2 * var(--font-size))
  );font-family:var(--display-font);font-style:italic;color:var(--quote-text-color);line-height:1.2em;padding:0 3em}.twitter-tweet{padding-bottom:1em;margin:0 auto}#progress{position:fixed;left:0;top:0;right:0;background-color:var(--primary-color);height:2px;z-index:30;transition:width .1s ease-out}header{padding:1em 0 0;position:fixed;left:0;top:0;right:0;z-index:10;background-color:inherit;overflow-x:auto}header.animated{transition:padding .2s ease-out}header .bar{padding:0 var(--padding);margin:auto;display:flex;flex-direction:column;color:var(--header-text-color)}body.narrow header .bar{max-width:var(--max-width)}.short header a.logo{margin-left:-.25em;font-weight:600;letter-spacing:-1px;-webkit-text-stroke:2px}.short.animated header a.logo{transition:margin .2s ease-out .2s}header a{text-decoration:none;display:flex;color:inherit}header .main-title{font-size:var(--master-size);display:flex;flex-direction:row}.animated header .main-title{transition:margin .2s ease-out}.short header .main-title{margin-top:calc(-1 * (var(--master-size) + 2 * var(--secondary-size) + 2em));margin-bottom:calc(.75 * (var(--master-size) + 2 * var(--secondary-size) + 2em))}header h1{line-height:1em;font-family:var(--display-font);color:var(--primary-color);font-size:1em;margin:-.25em;font-weight:600;letter-spacing:-1px;-webkit-text-stroke:2px}header h1 a{padding:.25em .25em 0}header h1 a:hover{opacity:.8}header nav{display:flex;flex-direction:row;font-family:var(--display-font);margin-left:-.25em;overflow-x:auto;align-items:center;margin-top:.25em;padding-bottom:0.5em}header nav a{padding:.125em .5em .25em;transition:color 150ms ease-out;font-size:var(--secondary-size);font-weight:400;-webkit-text-stroke:1px}header nav a.logo{color:var(--primary-color);margin-left:-1.9em}header nav a.active,header nav a:hover{color:var(--primary-color)}header nav span.modes{flex:0 0 3em;display:flex;flex-direction:column;height:2em;overflow:hidden;justify-content:center}footer{padding:var(--padding) 0;overflow-x:auto}footer .bar{padding:0 var(--padding);margin:auto;display:flex;flex-direction:row}footer .bar a{color:inherit;text-decoration:none;height:var(--master-size);width:calc(var(--master-size) + .5em)}footer .bar a svg{width:var(--master-size);height:var(--master-size);fill:var(--primary-color)}footer .bar a:hover svg{opacity:.5}body.narrow footer .bar{max-width:var(--max-width)}footer .bar div:first-child{display:flex;flex-direction:column;flex:1}footer .bar h3{font-weight:600;letter-spacing:-1px;-webkit-text-stroke:2px;color:var(--primary-color);font-family:var(--display-font);white-space:nowrap;line-height:1em;font-size:var(--master-size)}footer .bar h4{font-weight:600;letter-spacing:-1px;color:var(--text-color);font-family:var(--display-font);font-size:calc(.67 * var(--master-size));white-space:nowrap}footer .links{display:flex;align-items:flex-end}footer .links a span{position:absolute;left:-200vw;top:auto;width:1px;height:1px;overflow:hidden}header .links{display:flex;flex-direction:row;flex:1 1 100%;justify-content:flex-end;font-size:var(--secondary-size);align-items:center}nav span{flex:1}nav .icon{padding:0;height:1em}.icon{transition:opacity 150ms ease-out;margin-left:.25em;align-items:center;height:var(--master-size);width:var(--master-size)}.icon svg{width:100%;height:100%;fill:var(--primary-color)}.icon:hover{opacity:.5}c2r-youtube{width:100%;display:block;--aspect-ratio:1.33333;margin-bottom:1.5em}c2r-demo{width:100%;display:block;--aspect-ratio:1.777777;margin-bottom:1.5em;max-height:75vh}c2r-image.hero{margin-top:2em;width:100%;display:block;max-height:75vh}.katex{text-align:center;font-size:var(--secondary-size)!important;margin:1em 0}section.article,section.header{max-width:var(--max-width);margin:auto;color:var(--text-color)}section.article figure{margin-bottom:1.5em}section.article figcaption{margin-bottom:1em;font-size:.8em;color:var(--text-color);font-style:italic;border-left:4px solid var(--text-color);padding-left:0.5em}section.article figure c2r-image{margin-bottom:.5em}section.header{padding:0 var(--padding) 0 var(--padding)}section.article{padding:2em var(--padding) 0 var(--padding)}section.header p{line-height:var(--line-height);font-family:var(--sans-font);font-size:.8em}section.header h1{font-weight:400;letter-spacing:-.025em;font-family:var(--display-font);font-size:calc(1 * var(--title-font-size));line-height:1.1em;margin:.5em 0}section.header h1::after{content:"";width:3em;border-bottom:2px solid var(--primary-color);display:block;margin:1em 0 .5em}section.article p{line-height:var(--line-height);margin-bottom:1.5em}section.article p span.first{text-transform:uppercase}section.article b{color:inherit}section.article h2{font-weight:400;letter-spacing:-.025em;font-family:var(--display-font);line-height:1.1em;margin:1.5em 0 .5em calc(-100vw - 1em);padding-left:1em;border-left:100vw solid var(--primary-color);color:var(--primary-color);font-size:2em}section.article h4{font-family:var(--display-font);line-height:1em;margin:0 0 1em;font-size:1.5em;color:var(--primary-color);font-weight:400;letter-spacing:-.025em}.link-bar{margin-top:.5em;display:flex;flex-wrap:wrap;flex-direction:row;line-height:var(--line-height);font-family:var(--sans-font);font-size:.8em}.link-bar c2r-button{margin-bottom:.5em}.code-block{background-color:var(--code-background-color);padding-bottom:2em}.code-block .copy-to-clipboard{position:absolute;right:0;top:0;cursor:pointer;fill:var(--shape-color)}.code-block .copy-to-clipboard:hover{opacity:.5}.code-block .code-info{margin-bottom:1em;position:relative;padding-right:26px}.code-block section.article h3,.code-block section.article p{color:var(--text-color);margin:0;font-family:var(--sans-font);font-size:1em}.code-block section.article p{opacity:.5}.code-block pre{font-size:var(--code-font-size);overflow-x:auto}section.article a{font-weight:700;color:var(--primary-color);text-decoration-color:var(--primary-color);text-decoration:none}section.article a:hover{color:var(--text-color)}span.js{font-family:var(--monospace-font);color:var(--js-color)}span.dom{font-family:var(--monospace-font);color:var(--dom-color)}section.article h2:first-child{margin-top:0}section.content ul{margin-bottom:2em;margin-left:1em;line-height:var(--line-height)}section.content ul.compact li{text-indent:-1em;list-style:none;margin-bottom:.5em}section.content ol{margin-top:2em;margin-bottom:1em}section.content ol li{margin-bottom:.5em;margin-left:.75em}section.content ul.compact li:before{content:"";display:inline-block;height:0.5em;width:.5em;margin-right:.5em;background-image:var(--tick-svg);background-size:cover}.code-block .hljs{background-color:unset;padding:0}span.note{color:var(--note-color)}p.note{border-left:4px solid var(--note-color);padding:1em;display:inline-block;background-color:var(--note-background-color)}p.ok{border-left:4px solid var(--ok-color);padding:.5em 1em;display:inline-block;background-color:var(--ok-background-color)}p.note b{color:inherit!important}c2r-button{font-size:.8rem}section.article c2r-button{font-family:var(--sans-font)}div.svg{width:100%;margin:1em 0 2em;background-size:contain;background-repeat:no-repeat;background-position:50% 50%;border:none}.ring div{display:flex;flex-direction:row}.ring h3{margin-bottom:1em;margin-top:2em;color:var(--primary-color)}.ring span{flex:1;color:var(--header-text-color)}.ring span a{color:var(--text-color)}.ring span.prev{text-align:left}.ring span.next{text-align:right}.redacted{text-decoration:line-through}@media (max-width:400px){header nav .github,header nav .twitter{display:none}body{--master-size:24px!important;--secondary-size:18px!important;--font-size:14px!important}header nav a.logo{margin-left:-1.7em}}@media (max-width:768px){body{--master-size:36px;--font-size:16px;--title-font-size:2em;--quote-font-size:24px;--padding:1em;--secondary-size:22.5px}.code-block pre{--code-font-size:16px}footer{margin-bottom:var(--padding)}footer .bar{flex-direction:column}footer .bar div:first-child{margin-bottom:1em}}@media (max-width:1000px){section.content .quote{padding:0}}@media (max-width:1500px){section.content q{margin-left:0}}@media (max-width:940px){section.content q{width:100%;text-align:center;padding:0 1em 1em;margin:0}}noscript img{width:100%}p.tag span{background:var(--primary-color);border-radius:1em;padding:.25em .5em;color:#fff;font-size:1em;font-weight:700}.contained{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.warning{right:0;position:fixed;bottom:0;background:#b70000;color:#fff;padding:.5em 1em;font-size:14px;max-width:400px;text-align:center;margin:0 var(--padding);display:flex;flex-direction:row;align-items:center;transition:width .3s ease-out}.warning svg{fill:white;width:2em;height:2em}.warning p{width:0;white-space:nowrap;overflow:hidden;flex:1}.warning:hover p{margin-left:.5em;width:100%}.embedded-tw{border:1px solid var(--text-color);padding:1em;margin-bottom:1em;border-radius:1em;max-width:550px;width:100%}@media (orientation:portrait){c2r-image.hero{max-height:unset;--aspect-ratio:1!important}}