@import url(https://rsms.me/inter/inter.css);html{font-family:Inter,sans-serif}@supports (font-variation-settings:normal){html{font-family:"Inter var",sans-serif}}.cm-editor{background:#fff;box-shadow:0 3px 50px -10px rgba(43,40,36,.1);border-radius:4px}*{box-sizing:border-box}body,html{margin:0;height:100%}body{font-family:Inter,sans-serif;font-weight:400;color:#222121;background:#f6f4ef}button{font-family:Inter,sans-serif}h1,h2,h3,h4,h5{font-family:Inter,sans-serif;line-height:1}p{font-family:Inter,sans-serif}pre[data-type=programlisting]{border-radius:4px;padding:1em;background:#fff;box-shadow:0 3px 50px -10px rgba(43,40,36,.1);margin:4em 0}.hljs{background:#fff!important}section img{display:block;max-width:100%}section figure em{font-size:.8em}iframe{width:100%;height:100%;min-height:250px;border:1px dashed #f6f4ef}#global-volume-control{position:fixed;left:5px;bottom:5px;z-index:12}#global-volume-control input{width:130px;position:relative;left:25px;transform:translateX(-50%) rotate(-90deg) translateX(50%)}#global-meter{position:absolute;bottom:0;left:0}.site-header{max-width:980px;margin:0 auto;width:90%;padding-top:2em;padding-bottom:8em;position:relative;z-index:1}.home-link{text-decoration:none;color:#222121}.logo{max-width:17em}.site-title{font-family:Inter,sans-serif;text-align:left;font-size:5em;padding:0 40px;margin:0}.site-title .small{margin:0 .3em;font-size:.4em}.menu__header .site-title{margin-top:1em;font-size:2em}.page-container{transition:all .2s;padding-left:320px;height:100%}@media (max-width:800px){.page-container{padding-left:0}}.container{margin:0 auto;width:100%}.next-prev-links{margin-top:5em;display:flex;justify-content:space-between}.next-prev-links a{text-decoration:none;color:#222121;box-shadow:0 -1px 0 0 #222121 inset;transition:all .2s}.next-prev-links a:hover{color:#fff;box-shadow:0 -1.2em 0 0 #222121 inset}figure a,p a{text-decoration:none;color:#222121;box-shadow:0 -1px 0 0 #222121 inset;transition:all .2s}figure a:hover,p a:hover{color:#fff;box-shadow:0 -1.2em 0 0 #222121 inset}.chap{display:block;padding:40px;word-wrap:break-word;width:90%;max-width:980px;margin:0 auto}.chap p{font-size:1.1em;line-height:1.5}section[data-type=chapter] h1{page-break-before:always;border-top:2px solid #222121;padding-top:15px;color:#222121;margin-bottom:.5em;margin-top:0;font-size:4em;padding-bottom:.2em}section[data-type=chapter] h2{font-size:2.5em}section[data-type=sect1]{border-top:2px solid #222121;margin-top:5em}section[data-type=sect1] h1{page-break-before:auto;font-size:4em;border:none}.p5-figure{page-break-before:avoid;position:relative;margin:2em 0}.p5-sketch-link{font-family:Inter,sans-serif;font-size:.7em;position:absolute;top:0;right:2px;opacity:.3;text-transform:uppercase;opacity:.4;box-shadow:none}.menu-button{cursor:pointer;position:fixed;height:8em;width:8em;top:2em;left:0;z-index:12;background:0 0;border:none;transform:scale3d(.8,.8,1)}.menu-button svg{transition:all .2s;width:5em;position:absolute;top:1.5em;left:1.5em}.menu-button__icon--close{transform:scale3d(1,1,1);opacity:1;opacity:.8}.menu-button__icon--open{transform:scale3d(0,0,1);opacity:0}.inlinebutton{vertical-align:middle;cursor:pointer;border-radius:4px;color:rgb(16.4285714286,85.4285714286,190.5714285714);padding:3px 8px;background:rgba(23,107,235,.1);border:none;font-weight:700;font-family:Inter,sans-serif}.inlinebutton:hover{background:rgba(23,107,235,.2)}.inlinebutton:active{background:rgba(23,107,235,.3)}.interactivesketchContainer{display:flex}.interactivesketchContainer .code-mirror-editor,.interactivesketchContainer .code-mirror-embed{align-items:center;display:flex;flex:1}.interactivesketchContainer .code-mirror-editor{flex-direction:column-reverse;justify-content:center}.interactivesketchContainer .code-mirror-editor a{margin-top:.2em;color:gray;font-size:.8em;align-self:flex-end}.menu{font-family:Inter,sans-serif;z-index:10;background:#f6f4ef;color:#222121;transition:all .2s;width:320px;position:fixed;height:100vh;overflow:scroll;top:0;left:0;padding:1.5em;padding-top:90px;display:block}@media (max-width:800px){.menu{box-shadow:0 0 100px rgba(0,0,0,.2)}}.menu h2{margin-top:.3em;font-size:1.5em;margin-bottom:1em}.menu h3{font-size:2em;margin-bottom:.8em}.menu ol,.menu ul{list-style:none;margin:0;padding:0}.menu ol li,.menu ul li{margin-bottom:1em}.menu ol ol,.menu ol ul,.menu ul ol,.menu ul ul{margin-left:0;list-style:decimal;margin-left:2em}.menu ol ol ol,.menu ol ul ol,.menu ul ol ol,.menu ul ul ol{font-size:.9em;list-style:none;margin-left:1em}.menu ol ol ol li,.menu ol ul ol li,.menu ul ol ol li,.menu ul ul ol li{margin:0}.menu .toc a{color:inherit;text-decoration:none;padding:0;position:relative;margin:0;color:#222121;transition:all .2s;display:inline}.menu .toc a:after{content:"";width:.5em;height:.5em;border-radius:50%;background:#ff3100;position:absolute;left:0;top:.25em;transition:all .2s;opacity:0;transform:scaleX(0)}.menu .toc a:hover{font-weight:700;color:#222121}.menu .toc a.is-active{font-weight:700;padding-left:.75em}.menu .toc a.is-active:after{opacity:1;transform:scaleX(1)}.menu .toc a[data-toc=sect1]{font-size:1.2em;display:inline-block;margin-bottom:.3em}.menu .toc a[data-toc=sect2]{opacity:.8}.menu .toc a[data-toc=chapter]{padding-left:0;border-top:2px solid #222121;padding-top:.2em;font-family:Inter,sans-serif;margin-top:1em;display:block;font-size:2em;font-weight:700;margin-bottom:.6em}.menu .toc a[data-toc=chapter]:hover{color:rgba(34,33,33,.5)}.menu .toc a[data-toc=chapter].is-active{color:#222121;background:0 0}.menu .toc a[data-toc=chapter].is-active:after{display:none}.menu--pdf{page-break-after:always;page-break-before:always;background:0 0;box-shadow:none;position:static;border:none;color:#222121}.menu--pdf ol{list-style:decimal;margin-left:2em}.menu--pdf ol ::marker{font-family:Inter,sans-serif;font-size:2em}.menu--pdf ol ol{margin-left:3em;list-style:lower-roman}.menu--pdf ol ol ::marker{font-family:Inter,sans-serif;font-size:1em}.menu--pdf ol ol ol{list-style:none}.menu--pdf .toc a{color:#222121!important}.menu-is-closed .menu-button__icon--close{transform:scale3d(0,0,1);opacity:0}.menu-is-closed .menu-button__icon--open{transform:scale3d(1,1,1);opacity:1}.menu-is-closed .menu{transform:translate3d(-100%,0,0);box-shadow:none}.menu-is-closed .page-container{padding-left:0}/*!
  Theme: Default
  Description: Original highlight.js style
  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
  Maintainer: @highlightjs/core-team
  Website: https://highlightjs.org/
  License: see project LICENSE
  Touched: 2021
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f0f0f0;color:#444}.hljs-comment{color:#888}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#bc6060}.hljs-literal{color:#78a960}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}body,html{padding:0;margin:0;position:relative}.p5container{display:flex;flex-wrap:wrap;justify-content:space-around;position:relative}.centered{text-align:center;width:100%}.mt-1{margin-top:1em}button,input{position:relative;z-index:5}.btn{padding:1em 4em;cursor:pointer;border-radius:24px;background-color:transparent;margin-left:3.5em;border:1px solid #222;flex-grow:1;height:3.5em;transition:all .1s;transform:scale3d(1,1,1)}.btn:hover{font-weight:700;outline:1px solid #222}.btn:active{transform:scale3d(.95,.95,1)}.play-button{background:#222;width:3.5em;height:3.5em;border-radius:50%;border:none;cursor:pointer;transition:all .2s;justify-content:center;align-content:center;transform:scale3d(1,1,1)}.play-button:after{content:'';position:absolute;border:12px solid transparent;border-left-width:18px;border-left-color:#fff;width:0;height:0;transform:translate3d(-23%,-50%,0)}.play-button.play-button--stop:after{content:'';width:40%;height:40%;border:none;margin:0 auto;border-radius:1px;background:#fff;transform:translate3d(-50%,-50%,0)}.play-button:hover{transform:scale3d(1.1,1.1,1)}.play-button:active{transform:scale3d(.8,.8,1)}