#app{background:var(--paper);color:var(--ink);min-height:100vh;display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;width:100%}#app.reduce-motion *{transition:opacity .2s !important}#app.dark{--paper: var(--black);--paperHSL: var(--blackHSL);--ink: var(--white);--headingColor: var(--trueWhite);--accentColor: var(--lightBlue);--linkColor: var(--ink);--highlightColor: var(--darkerGray);--buttonBackground: var(--paper);--lightestBlue: hsl(var(--lightBlueHS), 15%);--lighterBlue: hsl(var(--lightBlueHS), 20%)}#app.prefers-light{--paper: var(--white);--paperHSL: var(--whiteHSL);--ink: var(--darkGray);--headingColor: var(--darkerGray);--accentColor: var(--darkBlue);--linkColor: var(--darkBlue);--highlightColor: var(--darkGray);--buttonBackground: var(--paper)}@font-face{font-family:"Averta-Std";src:url("/fonts/avertastd-regular-webfont.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:"Averta-Std";src:url("/fonts/avertastd-bold-webfont.woff2") format("woff2");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:"Alkes";src:url("/fonts/alkes-regular.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:"Alkes";src:url("/fonts/alkes_regular_italic-webfont.woff2") format("woff2");font-weight:normal;font-style:italic;font-display:swap}@font-face{font-family:"Alkes";src:url("/fonts/alkes_bold-webfont.woff2") format("woff2");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:"Alkes";src:url("/fonts/alkes_bold_italic-webfont.woff2") format("woff2");font-weight:bold;font-style:italic;font-display:swap}@font-face{font-family:"MonoLisa";src:url("/fonts/monolisa-regular-webfont.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}:root{--lightBlueHS: 199, 33%;--yellowHS: 49, 100%;--redHS: 349, 100%;--lightGrayHS: 220, 2%;--yellowHSL: 49.1, 100%, 50%;--lightGrayHSL: 220, 2%, 66%;--lightBlueHSL: 199, 33%, 60.95%;--darkBlueHSL: 201, 42%, 35.2%;--orangeHSL: 22, 100%, 53.8%;--redHSL: 349, 100%, 45%;--midGrayHSL: 204, 2%, 54%;--darkGrayHSL: 210, 4%, 27%;--darkerGrayHSL: 349, 25%, 16%;--whiteHSL: 0, 0%, 99%;--trueWhiteHSL: 0, 0%, 100%;--blackHSL: 210, 33%, 9.5%;--trueBlackHSL: 0, 0%, 0%;--white: hsl(var(--whiteHSL));--trueWhite: hsl(var(--trueWhiteHSL));--black: hsl(var(--blackHSL));--trueBlack: hsl(var(--trueBlackHSL));--headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--bodyFont: "Alkes", Georgia, serif;--codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;--bodyFontWeight: normal;--bodyFontSize: 1.125rem;--bodyLineHeight: calc(var(--quarterNote) * 1.25);--yellow: hsl(var(--yellowHSL));--orange: hsl(var(--orangeHSL));--red: hsl(var(--redHSL));--lightestGray: hsl(var(--lightGrayHS), 94%);--lighterGray: hsl(var(--lightGrayHS), 86%);--lightGray: hsl(var(--lightGrayHSL));--midGray: hsl(var(--midGrayHSL));--darkGray: hsl(var(--darkGrayHSL));--darkerGray: hsl(var(--darkerGrayHSL));--lightBlue: hsl(var(--lightBlueHSL));--lighterBlue: hsl(var(--lightBlueHS), 90%);--lightestBlue: hsl(var(--lightBlueHS), 95%);--darkBlue: hsl(var(--darkBlueHSL));--darkerBlue: hsl(var(--darkBlueHSL), 20%);--blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008, #ffd100;--ink: var(--darkGray);--paper: var(--white);--paperHSL: var(--whiteHSL);--headingColor: var(--darkerGray);--accentColor: var(--darkBlue);--linkColor: var(--darkBlue);--highlightColor: var(--darkGray);--maxWidth: 34rem;--sidebarWidth: 15rem;--margin: var(--quarterNote);--sixteenthNote: calc(var(--quarterNote) / 4);--eighthNote: calc(var(--quarterNote) / 2);--quarterNote: 1.25rem;--dottedQuarterNote: calc(var(--quarterNote) * 1.5);--halfNote: calc(var(--quarterNote) * 2);--dottedHalfNote: calc(var(--quarterNote) * 3);--wholeNote: calc(var(--quarterNote) * 4);--tiedWholeNote: calc(var(--quarterNote) * 5);--dottedWholeNote: calc(var(--quarterNote) * 6);--buttonSize: 2.2rem;--buttonBackground: var(--paper);font-size:var(--bodyFontSize)}@media(min-width: 42rem){:root{--bodyFontSize: 1.1875rem}}@media(min-width: 82rem){:root{--bodyFontSize: 1.25rem}}@media(min-width: 42rem){:root{--margin: var(--halfNote)}}@media(min-width: 56rem){:root{--margin: var(--dottedHalfNote)}}@media(min-width: 108rem){:root{--margin: var(--wholeNote)}}@media(min-width: 122rem){:root{--margin: var(--dottedWholeNote)}}:root.dark{--paper: var(--black);--paperHSL: var(--blackHSL);--ink: var(--white);--headingColor: var(--white);--accentColor: var(--lightBlue);--linkColor: var(--lightBlue);--highlightColor: var(--darkerGray);--lighterGray: hsl(var(--lightGrayHS), 26%);--lightestGray: hsl(var(--lightGrayHS), 13%)}@media(prefers-color-scheme: dark){:root:not(.light){--paper: var(--black);--paperHSL: var(--blackHSL);--ink: var(--white);--headingColor: var(--white);--accentColor: var(--lightBlue);--linkColor: var(--lightBlue);--highlightColor: var(--darkerGray)}}body{line-height:var(--bodyLineHeight);font-weight:var(--bodyFontWeight);font-variant-numeric:oldstyle-nums}::marker{font-variant-numeric:oldstyle-nums}main ul:not(.toc){list-style-type:square}main ul:not(.toc) ul li::marker{content:"– ";font-weight:bold}main ul:not(.toc) li::marker{color:var(--yellow)}li:not(:last-of-type){margin-bottom:.75rem;position:relative}@media(min-width: 66rem){li:not(:last-of-type){margin-bottom:0}}a{color:inherit;text-decoration:underline;text-decoration-color:var(--lightBlue);text-decoration-thickness:1.5px;text-underline-offset:.1em;transition:color .15s}a:hover{color:var(--linkColor)}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{font-family:var(--headingFont);font-weight:bold;color:var(--headingColor);line-height:1.2;position:relative;margin-bottom:var(--quarterNote);margin-top:var(--wholeNote);padding:0}h1,.h1{font-size:2rem;position:relative;margin-top:var(--quarterNote);font-weight:normal}@media(min-width: 42rem){h1,.h1{font-size:2.6rem}}h2,.h2{font-size:1.6rem;font-weight:bold;margin:var(--wholeNote) 0 var(--quarterNote);z-index:2}@media(min-width: 42rem){h2,.h2{font-size:2rem;margin-top:var(--tiedWholeNote)}}h2::before,.h2::before{content:"";width:var(--wholeNote);height:.125em;background:currentColor;display:block;margin:0 0 var(--eighthNote)}h2+h3{margin-top:var(--halfNote)}h3,.h3{font-size:1.4rem;font-weight:normal;margin-top:var(--dottedHalfNote)}@media(min-width: 42rem){h3,.h3{font-size:1.6rem}}h4,.h4{font-size:1rem;text-transform:uppercase}h5,.h5{font-size:1.1rem}h6,.h6{font-size:1rem}.h3::before,.h4::before,.h5::before,.h6::before{display:none}*{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}p{margin:0 0 var(--quarterNote)}blockquote{margin:var(--halfNote) 0;padding:0 0 0 var(--quarterNote);font-style:italic;line-height:1.5;position:relative;border:0;border-left:4px solid var(--lightBlue);white-space:pre-wrap}blockquote p{margin-bottom:1em}blockquote>*:last-of-type{margin-bottom:0}ul,ol{padding-left:1rem;margin:var(--quarterNote) 0}ul li,ol li{padding-left:var(--sixteenthNote)}ul ul,ul ol,ol ul,ol ol{margin:var(--quarterNote) 0}ul li+li,ol li+li{margin-top:calc(var(--quarterNote)/2)}figure{margin:var(--halfNote) 0}figure p{margin:0}figure img{display:block;margin-bottom:0;margin-inline:auto}figcaption{font-size:.75rem;text-align:center;margin:.5rem 0 0;font-style:italic;text-wrap:balance}:where(h2,h3,h4,h5,h6){position:relative}:where(h2,h3,h4,h5,h6) a[aria-hidden]{position:absolute;display:block;left:-0.75em;width:1em;height:1em;line-height:1;text-align:center}@media(min-width: 34rem){:where(h2,h3,h4,h5,h6) a[aria-hidden]{left:-1em}}:where(h2,h3,h4,h5,h6) .icon-link{position:relative}:where(h2,h3,h4,h5,h6) .icon-link::before{content:"#";color:var(--lightGray);font-weight:normal;opacity:0}:where(h2,h3,h4,h5,h6):hover .icon-link::before{opacity:1}h1,h2,h3,h4,h5,h6{text-wrap:balance}.no-bullets{list-style-type:none !important}.no-bullets li::marker{content:none !important}.sr,input[type=checkbox]{position:absolute;left:-100vw;opacity:0;width:1px;height:1px;overflow:hidden;border:none;word-wrap:normal;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%)}.compressed-content{margin-left:auto;margin-right:auto}@media(min-width: 42rem){.compressed-content{max-width:var(--maxWidth)}}.compressed-content.wider{max-width:calc(var(--maxWidth)*1.5)}.compressed-content.double-wide{max-width:calc(var(--maxWidth)*2)}body{overflow-x:hidden}img{width:auto;max-width:100%;height:auto;margin:var(--quarterNote) 0}hr{margin:var(--halfNote) 0;border:0;height:1px;background:linear-gradient(to right, var(--blueToYellow))}.details{font-size:.8rem;line-height:1.5em;font-style:italic}.pre-heading{margin-bottom:0rem}.categories li a{background:var(--headingColor);padding:.5em;border-radius:8px;text-align:center;color:var(--paper);font-weight:bold;text-decoration:none}.layout{margin:var(--quarterNote) var(--margin) var(--wholeNote) var(--margin);width:calc(100% - var(--margin)*2);position:relative;background:rgba(0,0,0,0);color:var(--ink)}.layout main{width:100%}.layout main>h1:first-child,.layout main h2:first-child{margin-top:0}.cp_embed_wrapper{margin-bottom:var(--halfNote);margin-top:var(--halfNote)}.ghosty button,.ghosty button::before{transition:transform .3s cubic-bezier(0.55, 0.055, 0.675, 0.19);transform:translateY(-4rem)}.table{width:auto;overflow-x:auto;margin-bottom:var(--halfNote);position:relative}.table-outer{position:relative;width:100%}.table-outer::after{content:"";height:100%;position:absolute;width:2rem;background:linear-gradient(to right, hsla(var(--whiteHSL), 0), hsla(var(--whiteHSL), 1));top:0;right:0}table{min-width:100%;border-collapse:collapse;font-size:.9rem;margin:var(--dottedHalfNote) 0 var(--halfNote);border-right:2rem solid rgba(0,0,0,0)}table td,table th{padding:1em 2em 1em 0;white-space:pre;line-height:1}table td:last-of-type,table th:last-of-type{padding-right:0}table th{text-align:left;padding-bottom:.5em;font-weight:bold;font-size:1rem;font-family:var(--headingFont)}table thead tr{border-bottom:2px solid;line-height:1}table tbody tr{border-bottom:1px solid var(--lightGray)}.twitter-tweet{margin:var(--halfNote) 0 !important}.example-component-wrapper{border:1px solid;padding:calc(var(--quarterNote) + var(--quarterNote));margin:var(--halfNote) 0}@media(min-width: 82rem){.blog-roll{grid-column:span 2}}.toc-wrap{background:linear-gradient(to bottom right, var(--lightGray), var(--yellow));background:linear-gradient(to bottom right, #a7a8aa, #92abb2, #5eca78, #b6ec1f, #ffd100);padding:2px;margin:3rem 0}.toc{background:var(--paper);padding:1rem 1.5rem 1.5rem;line-height:1.6;width:100%;position:relative;z-index:2;font-family:var(--headingFont)}.toc h2{font-weight:bold;font-family:var(--headingFont);font-size:.8rem;margin:0;background:var(--paper);position:relative;padding:0;top:calc(-1rem - .6em);left:0;text-transform:uppercase;color:var(--lightGray);display:flex;width:14em;justify-content:space-between;align-items:center;line-height:1}.toc h2 .opening-bracket,.toc h2 .closing-bracket{display:block;position:relative;z-index:2;left:-1px;bottom:.05em}.toc h2 .closing-bracket{left:unset;right:-1px}.toc h2::before{display:none}.toc .toc-list{list-style-type:decimal;font-size:.85rem;margin:0}.toc .toc-list li::marker{color:var(--ink);content:unset;font-weight:normal}.toc .toc-list>li{font-weight:bold}.toc .toc-list>li::marker{font-weight:bold}.toc .toc-list>li ul{font-weight:normal}.toc .toc-list ul{list-style-type:lower-alpha;margin:.25em 0 0}.toc .toc-list ul ul{list-style-type:decimal}.toc .toc-list li{list-style-type:inherit;margin:0 0 .25em}.toc .toc-list li ::marker{content:"- "}.toc .toc-list li a{text-decoration:none}input[type=checkbox]+label{display:flex;align-items:center;position:relative}input[type=checkbox]+label:before{content:"";width:1rem;height:1rem;border:2px solid;display:inline-block;margin-right:.5rem}input[type=checkbox]:checked+label:after{content:"";width:.4rem;height:.7rem;border-bottom:.2rem solid var(--yellow);border-right:.2rem solid var(--yellow);position:absolute;left:.3rem;bottom:.45rem;z-index:2;display:block;transform:rotate(45deg)}label{display:block}input,textarea{display:block;width:100%;background:rgba(0,0,0,0);border:1px solid var(--ink);padding:.5rem;color:inherit;font-size:1rem;font-style:italic}input[type=radio],input[type=checkbox]{display:initial;width:initial;margin:initial}input[type=search]{color:inherit;font-style:inherit}select{font-size:1rem;font-family:var(--headingFont);border:1px solid var(--ink);padding:var(--sixteenthNote) var(--eighthNote);width:max-content}button,input[type=submit]{border:1px solid;padding:.5rem 1rem;background:var(--lighterBlue);font-size:1rem;font-family:var(--headingFont);color:var(--ink);margin:0;transition:background .15s;border-right-width:2px;border-bottom-width:2px}.dark button,.dark input[type=submit]{background:var(--darkBlue)}button:hover,input[type=submit]:hover{background:hsla(var(--lightBlueHSL), 0.2)}.settings-toggle{--itemTransition: 0.25s cubic-bezier(1, 0, 0, 1);cursor:pointer;height:var(--buttonSize);width:var(--buttonSize);flex:0 0 var(--buttonSize);overflow:hidden;margin-left:.75rem;padding:0;position:relative;border-radius:2rem;border:2px solid var(--ink);background:var(--buttonBackground);transition:background var(--itemTransition),color var(--itemTransition),border-color var(--itemTransition),transform .3s cubic-bezier(0.075, 0.82, 0.165, 1);z-index:11}.settings-toggle+.settings-toggle{transition-delay:.05s}.settings-toggle:hover{background:var(--buttonBackground)}.dark .settings-toggle{border-width:2px}pre{font-style:normal;font-weight:normal;background:var(--darkerGray);background:#1d1e26;padding:1.5em;margin:var(--halfNote) auto;color:var(--white);font-size:.8rem;overflow:auto;line-height:1.5;width:100%}pre code{background:rgba(0,0,0,0);font-size:inherit;padding:0;border:0}.dark code{background:hsla(var(--darkBlueHSL), 0.6);border:0}.dark pre code{background:rgba(0,0,0,0)}code{font-size:.8em;background:hsla(var(--lightBlueHSL), 0.1);padding:.2em .3em .2em;border-radius:2px;border:1px solid hsla(var(--lightBlueHSL), 0.2);line-height:1 !important;white-space:nowrap;font-style:normal}code,pre{font-family:var(--codeFont);font-variant:none}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:var(--codeFont);font-display:swap;font-size:.75rem;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:var(--halfNote) var(--eighthNote) var(--eighthNote);margin:var(--halfNote) 0;overflow:auto;position:relative;width:100%}pre[class*=language-]::before{content:"Code";top:0;left:0;font-size:.8rem;font-weight:normal;font-family:var(--headingFont);padding:.3rem var(--eighthNote);width:100%;position:absolute;background:var(--darkBlue);background:linear-gradient(to right, var(--darkBlue), hsla(var(--darkBlueHSL), 0))}pre.language-undefined{padding-top:var(--quarterNote)}pre.language-undefined::before{display:none}pre.language-bash:before{content:"Terminal"}pre.language-fs:before{content:"Project files"}pre.language-css:before{content:"CSS"}pre.language-php:before{content:"PHP"}pre.language-markdown:before{content:"Markdown"}pre.language-html:before{content:"HTML"}pre.language-vue:before{content:"Vue"}pre.language-svelte:before{content:"Svelte"}pre.language-jsx:before{content:"React"}pre.language-js:before,pre.language-javascript:before{content:"JavaScript"}:not(pre)>code[class*=language-],pre[class*=language-]{background:#1d1e26}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#7970a9}.token.parameter{color:#ffc97c}.token.punctuation{color:#f2f2f2}.token.namespace{opacity:.8}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ff80bf}.token.boolean,.token.number{color:#9580ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#ffff80}.token.operator,.token.entity,.token.url,.token.variable{color:#ff80bf}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#8aff80}.token.keyword{color:#ff80bf}.token.regex,.token.important{color:#fc9867}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}@media print{.header,.grid-wrapper,.footer,.loader,script,head,style{display:none !important}h1 .title-wrap{background:none !important;background-clip:none !important;color:inherit !important;-webkit-text-fill-color:inherit !important}body{font-size:11pt !important}html,body,.layout,#app{height:auto !important;min-height:unset !important}.layout{margin:0 auto;width:100%;max-width:5in;break-inside:avoid}.loader+div{display:none !important}*{break-inside:avoid !important}}.pull-quote{float:right;margin:var(--halfNote) -12em var(--dottedHalfNote) var(--halfNote);font-size:1.3rem;line-height:1.4;position:relative;background:var(--paper);overflow:hidden;padding:0 0 .75rem 0;font-family:var(--headingFont);font-style:normal;font-weight:normal;max-width:16em;text-wrap:balance}@media(min-width: 82rem){.pull-quote{display:block;font-size:1.4rem;margin-right:calc(-1em - 13vw)}}@media(min-width: 92rem){.pull-quote{margin-right:-13em;max-width:18em}}.pull-quote:after{content:"";height:.25rem;width:100%;margin-left:-100%;background:linear-gradient(to right, var(--blueToYellow));bottom:0;position:absolute}.pull-quote p:last-child{display:inline}.pull-quote em,.pull-quote i{font-weight:bold;font-style:normal}.callout{margin:var(--dottedQuarterNote) 0;font-size:1.3rem;line-height:1.4}@media(min-width: 82rem){.callout{margin:0 0 var(--quarterNote);font-size:inherit;line-height:inherit;font-family:inherit}}.side-note{position:relative;margin:var(--halfNote) 0;font-size:.8rem;font-style:italic;background:linear-gradient(to right, var(--lighterBlue), var(--lightestBlue));line-height:var(--quarterNote);min-height:4.5rem;width:calc(100% + var(--margin) + var(--margin));margin-left:calc(var(--margin)*-1);padding:calc(var(--quarterNote)*1.5) var(--quarterNote);color:var(--ink);display:grid;grid-template-columns:1fr;grid-gap:1em}.side-note:before{content:"Side note:";font-weight:bold;font-family:var(--headingFont);font-style:normal;text-transform:uppercase;font-size:.8em;display:block;line-height:1}@media(min-width: 34rem){.side-note{width:100%;margin-left:0;padding:calc(var(--quarterNote)*1.5)}}.side-note em,.side-note i,.side-note code{font-style:normal}.side-note p{margin-bottom:0}.dark .side-note{background:var(--darkerBlue)}@media(prefers-color-scheme: dark){html:not(.light) .side-note{background:var(--darkerBlue)}}.side-note>*:last-child{margin-bottom:0}.note{border:2px solid var(--yellow);position:relative;display:grid;grid-template-columns:auto 1fr;margin:var(--halfNote) 0}.note .note__callout{background:var(--yellow);text-align:center;line-height:1.5;text-transform:uppercase;font-size:.8rem;font-weight:bold;font-style:normal;font-family:var(--headingFont);width:1.5rem;display:grid;place-content:center}.note .note__callout-text{transform:rotate(-90deg);white-space:pre;display:flex;align-items:center;color:var(--darkGray)}.note .note__callout-arrow{display:inline-block;width:.7em;height:.75em;border-top:1px solid;border-right:1px solid;position:relative}.note .note__callout-arrow::after{content:"";width:.5em;height:.5em;border-right:1px solid;border-bottom:1px solid;position:absolute;transform:rotate(45deg);top:2px;right:calc(-0.2em - 1px)}.note .note__content{font-size:.8rem;line-height:1.5;font-style:italic;padding:var(--dottedQuarterNote)}.note__content :last-child{margin-bottom:0}*,*:before,*:after{box-sizing:border-box;font-family:inherit}*:focus,input[type=checkbox]:focus+label{outline:2px solid var(--lightBlue);outline-offset:1px}main:focus{outline:none}::selection{background:var(--yellow);color:var(--highlightColor)}::-moz-selection{background:var(--yellow);color:var(--highlightColor)}::-webkit-scrollbar{width:.5rem;height:calc(var(--eighthNote)*.25)}::-webkit-scrollbar,::-webkit-scrollbar-track{background:var(--paper)}::-webkit-scrollbar-thumb{background:var(--yellow)}body{font-family:var(--bodyFont);color:var(--ink);margin:0;padding:0}html,body{scrollbar-color:var(--yellow) var(--paper);scrollbar-width:thin}:target{scroll-margin-block:2rem}/*# sourceMappingURL=global.css.map */