@font-face{font-family:IBMPlexSansVariable;font-style:normal;font-weight:1 999;src:url(/fonts/plex/IBMPlexSansVar-Roman.woff2) format("woff2")}@font-face{font-family:IBMPlexSansVariable;font-style:italic;font-weight:1 999;src:url(/fonts/plex/IBMPlexSansVar-Italic.woff2) format("woff2")}:root{--red-0: #8f1b16;--red-1: #a4201a;--red-2: #ba261f;--red-3: #d02c24;--red-4: #e6312a;--red-5: #f5453f;--green-0: #339372;--green-1: #38a27e;--green-2: #3eb089;--green-3: #44bf95;--green-4: #4acea1;--green-5: #50ddad;--yellow-0: #937234;--yellow-1: #a27e3a;--yellow-2: #b28a41;--yellow-3: #c29747;--yellow-4: #d2a44e;--yellow-5: #e2b154;--purple-0: #812cae;--purple-1: #9233c5;--purple-2: #a43adb;--purple-3: #af4de7;--purple-4: #b663ea;--purple-5: #bd78ed;--blue-0: #3a5fb6;--blue-1: #426bcc;--blue-2: #4d77de;--blue-3: #6485e2;--blue-4: #7892e6;--blue-5: #8ba0ea;scroll-padding-top:25px}@media (max-width: 1150px){:root{scroll-padding-top:65px}}*{box-sizing:border-box}body{font-family:IBMPlexSansVariable;font-size:17px;line-height:26px;letter-spacing:.006em;margin:0;color:#000;background-color:#fff;--site-width: 800px;--outer-spacing: 20px;-webkit-text-size-adjust:100%}a:link{color:var(--purple-0);text-decoration:none}a:visited{color:var(--purple-0)}a:hover,a:active{text-decoration:underline}h1{letter-spacing:-.004em;line-height:.95em;margin-top:1em;margin-bottom:.5em}h2{letter-spacing:0;line-height:1em;margin-top:2.5em;margin-bottom:1.35em}h3{margin-top:2em;margin-bottom:1.1em;letter-spacing:0}h4{letter-spacing:0}h1 a:link,h1 a:visited,h1 a:hover,h1 a:active,h2 a:link,h2 a:visited,h2 a:hover,h3 a:active,h3 a:link,h3 a:visited,h3 a:hover,h4 a:link,h4 a:visited,h4 a:hover,h4 a:active{color:inherit}header{margin-bottom:10px;padding-top:20px}header .context{font-style:italic}code{font-size:16px}pre,pre code{overflow:auto;font-size:14px;line-height:1.6em}.featured-list{display:flex;gap:80px}.featured-list.breakout{margin-left:calc((100vw - var(--site-width)) / 2 * -1 + 20px);margin-right:calc((100vw - var(--site-width)) / 2 * -1 + 20px);justify-content:center}@media (max-width: 840px){.featured-list.breakout{margin-left:0;margin-right:0}}.featured-item{flex:1;display:flex;overflow:hidden;flex-direction:column;border-radius:6px;text-decoration:none;max-width:400px}.featured-item img{object-fit:cover;border-radius:6px;border:1px solid #f0f0f0;height:220px;width:100%}@media (max-width: 600px){.featured-list{flex-direction:column}.featured-item{max-width:initial}}a.featured-item{text-decoration:none}a.featured-item:hover .featured-title{text-decoration:underline}.featured-title{margin-top:12px;font-weight:600;font-size:18px;transform:translateY(1px);color:#000;display:flex}.featured-subtitle{color:#303030;font-style:italic;font-size:16px;margin-top:3px}.featured-item .date{margin-top:7px;font-size:14px;color:#606060}.site-content{display:flex}.site-content-inner{max-width:var(--site-width);margin:0 auto}.site-content-inner.collapsed{margin:0 0 0 20px}.site-content .bleed{height:50px;touch-action:none}.site-content .bleed>div{position:absolute;left:0;width:100%;height:225px;touch-action:none}@media (max-width: 840px){.site-content-inner{margin:var(--outer-spacing);width:calc(100% - var(--outer-spacing) * 2);overflow:hidden}}.home h1{margin-top:60px;background-color:#fff;padding:20px;width:fit-content;margin-left:-20px}.home h1 a,.home h1 a:active,.home h1 a:visited{color:#000}.home .description{font-size:15px}.home .description p{margin:10px 0;line-height:25px}.home h3{margin-top:0}.home #demo{line-height:0}.home .hero{display:flex;gap:40px;align-items:center;flex-direction:column}@media (min-width: 801px){.home .hero{flex-direction:row}}.home .hero{margin-top:30px}.home .featured-list,.home .reading-list{margin-top:100px}.home canvas{width:100%;height:800px}.tags h1{margin-top:60px;margin-bottom:45px}.page-list{margin:0;padding:0}.page-list li{margin:.25em 0}.page-list .date{margin-left:.8em;color:#909a9c}.page-list .empty{font-style:italic}footer{margin-top:100px;margin-bottom:30px;color:#a0a0a0;font-size:14px;display:flex;justify-content:space-between}.page-content h1{margin-top:90px;margin-bottom:0}.page-content .title h2{font-size:18px;font-weight:400;font-style:italic;color:#858585;margin-top:20px;margin-bottom:0}.page-content .properties{margin-top:35px;margin-bottom:45px;font-size:15px;line-height:1.5em}.page-content .series-content{background-color:#f8f8f8;padding:20px;color:#6c6c6c;font-size:.95em;font-style:italic;border-radius:6px;margin:25px 0}.page-content .series-content p{margin:0}.page-content .footnote{background-color:#f8f8f8;padding:20px;color:#6c6c6c;font-size:.95em}.page-content img{max-width:80%;margin:0 auto;display:block}.page-content p,.code-look-wrapper.root,inspect-code,.runnable-code{margin:1.1em 0}.page-content ul li{list-style:square;margin:1em 0}.page-content canvas{max-width:100%}.page-content figure{margin:0 auto;text-align:center}@media (min-width: 801px){.page-content figure img{max-width:65%}}.page-content figcaption{font-size:15px;font-style:italic;line-height:1.5em;width:75%;margin:0 auto}.toc{font-size:14px;line-height:1.5em;width:300px;position:sticky;top:0;left:0;bottom:0;height:100vh;border-right:1px solid #dadada;padding:100px 20px;opacity:0;transition:opacity .75s}.site-content.has-toc{margin-left:300px}@media (max-width: 1125px){.toc{display:none}.site-content.has-toc{margin-left:0}}.toc a:link,.toc a:visited,.toc a:hover,.toc a:active{color:gray}.toc a.current:link,.toc a.current:visited,.toc a.current:hover,.toc a.current:active{color:#d6438a}.filtered-section-notification{border:1px dashed #6BA3E8;background-color:#e3f2ff;font-style:italic;font-size:14px;line-height:1.7em;padding:20px;border-radius:6px;margin:3em 0}.filtered-section-dots{display:flex;flex-direction:column;align-items:center;line-height:.9em;color:gray}.code-blocks{margin-left:20px;margin-right:20px}.runnable-code{border:3px solid #eaedfc;border-radius:10px;display:flex;flex-direction:column;position:relative}.page .runnable-code{margin-left:0;margin-right:0;flex-direction:column;max-height:inherit}@media (min-width: 801px){.runnable-code{flex-direction:row}}.runnable-code>*{min-width:0;flex:1}.runnable-code .runnable-code-source,.runnable-code .editor{flex:1.25}.runnable-code .runnable-code-source,.runnable-code .editor,.runnable-code .editor-instance{display:flex}.runnable-code .runnable-code-source{overflow:auto}.runnable-code .editor{flex-direction:column}.runnable-code .editor-instance{min-height:0;flex:1;width:100%;padding:10px 10px 0}.runnable-code .editor-actions{flex:0;padding:8px}.runnable-code .editor-actions button{border:3px solid #eaedfc;background-color:#fff;padding:5px 9px;margin-left:5px;border-radius:6px;font-size:13px}.runnable-code .editor-actions button:hover{background-color:#eaedfc}.runnable-code .editor-actions button:active{background-color:#dadddc}.runnable-code .cm-editor{margin:0;width:100%}.runnable-code .runnable-code-source pre{margin:0;padding:20px;width:100%}.runnable-code .edit{display:block;line-height:1em;text-decoration:none;position:absolute;top:0;right:0;border:none;background-color:#fff;border:3px solid #eaedfc;margin:0;color:#606060;font-size:15px;border-radius:0 6px;padding:8px 10px;transition:box-shadow .2s,border-radius .2s;transform:translate(3px,-3px)}.runnable-code .edit:hover{box-shadow:0 2px 5px var(--blue-5);border-radius:6px}.runnable-code .edit:active{background-color:#eaedfc}.runnable-code .edit span{display:block;transform:translateY(1px)}.runnable-code inspect-code,.runnable-code .placeholder{padding:20px;background-color:#eaedfc;border-radius:0;margin:0}.runnable-code .placeholder{font-style:italic}.runnable-code inspect-code>*,.runnable-code .runnable-code-output>*{margin-top:20px}.runnable-code inspect-code>*:first-child,.runnable-code .runnable-code-output>*:first-child{margin-top:0}.runnable-code-output{background-color:#eaedfc}.runnable-code.focused{max-height:calc(100vh - 120px)}.runnable-code.focused .runnable-code-output{overflow:auto}@media (max-width: 800px){.runnable-code.focused{max-height:inherit}}.runnable-code .runnable-code-output-content{position:sticky;top:0;padding:20px}.runnable-code-output pre{margin:0;overflow:visible}inspect-code{display:block;position:relative;padding:20px;background-color:#eaedfc;border-radius:10px}inspect-code pre{margin:0}inspect-code .view-source{border:none;background-color:#fff;border:1px solid #eaedfc;margin:1em 0 0;color:#606060;font-size:15px;border-radius:0 6px;padding:8px 10px;transition:box-shadow .2s,border-radius .2s}inspect-code .view-source:hover{box-shadow:0 2px 5px var(--blue-5);border-radius:6px}inspect-code .view-source:active{background-color:#eaedfc}inspect-code:hover .inspect-code-actions .open-external{display:block}@media (max-width: 800px){inspect-code .view-source{width:100%}}@media (min-width: 801px){inspect-code .view-source{position:absolute;right:0;top:0;margin-top:0}}.dialog-outer-container{zIndex:10000;position:fixed;display:flex;align-items:center;justify-content:center;background-color:transparent;transition:.15s background-color;top:0;right:0;bottom:0;left:0}.dialog-outer-container.animated{background-color:#1e1e1e33}.dialog-container{display:flex;flex-direction:column;border-radius:6px;background-color:#fff;max-height:80vh}.dialog-content{display:flex;flex-direction:column;overflow:hidden}@media (min-width: 801px){.dialog-content{flex-direction:row}}.dialog-container .header{display:flex;padding:5px 10px}.dialog-container .title{flex:1;font-weight:700}.dialog-container .header button{border:3px solid #eaedfc;background-color:#fff;padding:5px 9px;margin-left:5px;border-radius:6px}.dialog-container .header button:hover{background-color:#eaedfc}.dialog-container .title.untitled{font-style:italic}.dialog-container .code-block{margin-bottom:10px}.dialog-container summary{background-color:#f0f0f0;padding:2px 8px;border-radius:4px}.dialog-container .right{width:45vw;padding:10px;overflow:auto}.dialog-container .right-content{width:fit-content;padding-right:10px}.dialog-container .left{max-width:40vw;overflow:hidden;padding:15px}.dialog-container .left canvas{max-width:100%;max-height:100%;width:auto!important;height:auto!important}.dialog-container .left svg{height:auto;max-height:100%}.dialog-content pre{font-size:15px;line-height:24px}@media (max-width: 800px){.dialog-container{max-height:95dvh}.dialog-container .right,.dialog-container .left{max-width:initial;width:90vw}.dialog-container .left{height:calc((100vh - 80px)*.15)}.dialog-container .right{height:calc((100vh - 80px)*.85)}}.newsletter-notification{position:fixed;bottom:120px;right:25px;width:375px;transform:translate(430px);transition:transform 1.2s;transition-timing-function:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);font-size:15px;line-height:1.5em;background-color:#c8c8c8cc;background-color:#ddd6fe;color:#2e1065;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;padding:15px;border-radius:6px;-webkit-user-select:none;user-select:none}.newsletter-notification.animated{transform:translate(0) rotate(-5deg)}.newsletter-notification.ticktock{transition:transform 7s;transition-timing-function:ease-in}.newsletter-notification.manual{transition:transform .35s}@media (max-width: 600px){.newsletter-notification{bottom:10px;left:10px;right:10px;width:auto}.newsletter-notification.animated{transform:translate(0)}}@keyframes color-picker-colors{0%{color:var(--red-0);transform:scale(.9) rotate(-3deg)}25%{color:var(--green-0)}50%{color:var(--blue-0);transform:scale(1.05) rotate(3deg)}75%{color:var(--purple-0)}to{color:var(--yellow-0)}}#color-picker{position:absolute;top:20px;right:25px;zIndex:1;background-color:transparent;border:0;cursor:pointer;color:#d5d2e4}#color-picker:hover{animation-duration:.75s;animation-name:color-picker-colors;animation-iteration-count:infinite;animation-direction:alternate}