:root{--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-heading: "Averia Serif Libre", serif;--font-body: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;--font-code: "Fira Code", monospace;--avatar-background: var(--demo-bg-40);--demo-bgi-hover: var(--bgc);--color-javascript: #f7df1e;--color-typescript: #3178c6;--demo-accent-dark: hsl(220, 28%, 18%);--demo-accent: hsl(220, 50%, 45%);--demo-bg-10: hsl(220, 12%, 13%);--demo-bg-20: hsl(220, 23%, 16%);--demo-bg-30: hsl(220, 12%, 22%);--demo-bg-40: hsl(220, 12%, 27%);--demo-bg-41: hsl(220, 12%, 29%);--demo-bg-60: hsl(220, 9%, 44%);--editor-10: hsl(220 30% 10%);--editor-100: hsl(220 40% 95%);--editor-20: hsl(220 25% 15%);--editor-25: hsl(220 18% 20%);--editor-30: hsl(220 22% 25%);--editor-40: hsl(220 34% 36%);--editor-5: hsl(220, 23%, 16%);--editor-50: hsl(220 30% 50%);--link-hover: hsl(188 74% 70%);--link: hsl(188 74% 50%);--demo-overlay-alt: hsl(220deg 10% 30% / .05);--demo-overlay: hsl(220deg 10% 40% / .3);--demo-text-low: hsl(220, 11%, 60%);--demo-text: hsl(220, 30%, 86%)}:root,:root .light{--bgc-accent-high: hsl(220deg 80% 93%);--bgc-accent-higher: hsl(220deg 60% 95%);--bgc-accent-highest: hsl(220 88% 96%);--bgc-accent-low: hsl(220 78% 70%);--bgc-accent: hsl(220 88% 86%);--bgc-contrast-10: hsl(220 20% 25%);--bgc-contrast-20: hsl(220 40% 20%);--bgc-contrast-30: hsl(220 40% 30%);--bgc-contrast-40: hsl(220 40% 40%);--bgc-contrast-50: hsl(220 40% 50%);--bgc-high: hsl(220 70% 98%);--bgc-low: hsl(220 70% 97%);--bgc: hsl(220 50% 99%);--code-bg: var(--bgc-accent-highest);--code-text: var(--text-accent-high);--code-weight: 600;--color-separator: hsl(212deg 33% 92%);--shadow-color: 0deg 0% 50%;--text-accent-high: hsl(220deg 38% 66%);--text-accent: hsl(220deg 75% 30%);--text-bold: hsl(220 1% 1%);--text-color-alt: hsl(220 35% 35%);--text-color-damp: hsl(220deg 10% 53%);--text-color-dampest: hsl(220deg 10% 68%);--text-color-invert: hsl(220 5% 94%);--text-color: hsl(220deg 10% 33%)}:root .dark{--bgc-accent-high: hsl(220 28% 20%);--bgc-accent-higher: hsl(220deg 20% 14%);--bgc-accent-highest: hsl(220 40% 4%);--bgc-accent-low: hsl(220 78% 70%);--bgc-accent: hsl(220 50% 34%);--bgc-contrast-10: hsl(220 9% 9%);--bgc-contrast-20: hsl(220 15% 25%);--bgc-contrast-30: hsl(220 20% 30%);--bgc-contrast-40: hsl(220 24% 33%);--bgc-contrast-50: hsl(220 26% 40%);--bgc-high: hsl(220 10% 20%);--bgc-low: hsl(220 5% 14%);--bgc: hsl(220 13% 18%);--code-bg: var(--bgc-low);--code-text: var(--bgc-accent-low);--code-weight: 500;--color-separator: hsl(212deg 12% 26%);--shadow-color: 0deg 0% 10%;--text-accent-high: hsl(220deg 38% 66%);--text-accent: hsl(220 78% 78%);--text-bold: hsl(220 1% 99%);--text-color-alt: hsl(220 8% 99%);--text-color-damp: hsl(220deg 10% 38%);--text-color-dampest: hsl(220deg 10% 27%);--text-color-invert: hsl(220 5% 84%);--text-color: hsl(220 5% 87%)}*,*:before,*:after{box-sizing:border-box}*{margin:0;line-height:calc(1em + .65rem)}html,body{height:100%}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}:root{--font-system:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-heading:"Averia Serif Libre", serif;--font-body:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;--font-code:"Fira Code", monospace;--avatar-background:var(--demo-bg-40);--demo-bgi-hover:var(--bgc);--color-javascript:#f7df1e;--color-typescript:#3178c6;--demo-accent-dark:hsl(220, 28%, 18%);--demo-accent:hsl(220, 50%, 45%);--demo-bg-10:hsl(220, 12%, 13%);--demo-bg-20:hsl(220, 23%, 16%);--demo-bg-30:hsl(220, 12%, 22%);--demo-bg-40:hsl(220, 12%, 27%);--demo-bg-41:hsl(220, 12%, 29%);--demo-bg-60:hsl(220, 9%, 44%);--editor-10:hsl(220 30% 10%);--editor-100:hsl(220 40% 95%);--editor-20:hsl(220 25% 15%);--editor-25:hsl(220 18% 20%);--editor-30:hsl(220 22% 25%);--editor-40:hsl(220 34% 36%);--editor-5:hsl(220, 23%, 16%);--editor-50:hsl(220 30% 50%);--link-hover:hsl(188 74% 70%);--link:hsl(188 74% 50%);--demo-overlay-alt:hsl(220deg 10% 30% / .05);--demo-overlay:hsl(220deg 10% 40% / .3);--demo-text-low:hsl(220, 11%, 60%);--demo-text:hsl(220, 30%, 86%)}:root,:root .light{--bgc-accent-high:hsl(220deg 80% 93%);--bgc-accent-higher:hsl(220deg 60% 95%);--bgc-accent-highest:hsl(220 88% 96%);--bgc-accent-low:hsl(220 78% 70%);--bgc-accent:hsl(220 88% 86%);--bgc-contrast-10:hsl(220 20% 25%);--bgc-contrast-20:hsl(220 40% 20%);--bgc-contrast-30:hsl(220 40% 30%);--bgc-contrast-40:hsl(220 40% 40%);--bgc-contrast-50:hsl(220 40% 50%);--bgc-high:hsl(220 70% 98%);--bgc-low:hsl(220 70% 97%);--bgc:hsl(220 50% 99%);--code-bg:var(--bgc-accent-highest);--code-text:var(--text-accent-high);--code-weight:600;--color-separator:hsl(212deg 33% 92%);--shadow-color:0deg 0% 50%;--text-accent-high:hsl(220deg 38% 66%);--text-accent:hsl(220deg 75% 30%);--text-bold:hsl(220 1% 1%);--text-color-alt:hsl(220 35% 35%);--text-color-damp:hsl(220deg 10% 53%);--text-color-dampest:hsl(220deg 10% 68%);--text-color-invert:hsl(220 5% 94%);--text-color:hsl(220deg 10% 33%)}:root .dark{--bgc-accent-high:hsl(220 28% 20%);--bgc-accent-higher:hsl(220deg 20% 14%);--bgc-accent-highest:hsl(220 40% 4%);--bgc-accent-low:hsl(220 78% 70%);--bgc-accent:hsl(220 50% 34%);--bgc-contrast-10:hsl(220 9% 9%);--bgc-contrast-20:hsl(220 15% 25%);--bgc-contrast-30:hsl(220 20% 30%);--bgc-contrast-40:hsl(220 24% 33%);--bgc-contrast-50:hsl(220 26% 40%);--bgc-high:hsl(220 10% 20%);--bgc-low:hsl(220 5% 14%);--bgc:hsl(220 13% 18%);--code-bg:var(--bgc-low);--code-text:var(--bgc-accent-low);--code-weight:500;--color-separator:hsl(212deg 12% 26%);--shadow-color:0deg 0% 10%;--text-accent-high:hsl(220deg 38% 66%);--text-accent:hsl(220 78% 78%);--text-bold:hsl(220 1% 99%);--text-color-alt:hsl(220 8% 99%);--text-color-damp:hsl(220deg 10% 38%);--text-color-dampest:hsl(220deg 10% 27%);--text-color-invert:hsl(220 5% 84%);--text-color:hsl(220 5% 87%)}@media (prefers-color-scheme: dark){:root{--bgc-accent-high:hsl(220 28% 20%);--bgc-accent-higher:hsl(220deg 20% 14%);--bgc-accent-highest:hsl(220 40% 4%);--bgc-accent-low:hsl(220 78% 70%);--bgc-accent:hsl(220 50% 34%);--bgc-contrast-10:hsl(220 9% 9%);--bgc-contrast-20:hsl(220 15% 25%);--bgc-contrast-30:hsl(220 20% 30%);--bgc-contrast-40:hsl(220 24% 33%);--bgc-contrast-50:hsl(220 26% 40%);--bgc-high:hsl(220 10% 20%);--bgc-low:hsl(220 5% 14%);--bgc:hsl(220 13% 18%);--code-bg:var(--bgc-low);--code-text:var(--bgc-accent-low);--code-weight:500;--color-separator:hsl(212deg 12% 26%);--shadow-color:0deg 0% 10%;--text-accent-high:hsl(220deg 38% 66%);--text-accent:hsl(220 78% 78%);--text-bold:hsl(220 1% 99%);--text-color-alt:hsl(220 8% 99%);--text-color-damp:hsl(220deg 10% 38%);--text-color-dampest:hsl(220deg 10% 27%);--text-color-invert:hsl(220 5% 84%);--text-color:hsl(220 5% 87%)}}.main{display:flex;flex-direction:column;min-height:100%}.container{margin-left:auto;margin-right:auto;max-width:960px;width:100%}.content{padding-top:40px}.content h1{font-size:2.75rem;font-size:clamp(2.2375rem,3.4375vw,3.475rem);text-align:center}.content h2{font-size:2.1rem;font-size:clamp(1.945rem,2.625vw,2.89rem);text-align:center}.content h3{font-size:1.5rem;font-size:clamp(1.675rem,1.875vw,2.35rem)}.content h4{font-size:1.3rem;font-size:clamp(1.585rem,1.625vw,2.17rem)}.content h5{font-size:1.1rem;font-size:clamp(1.495rem,1.375vw,1.99rem)}.content h6{font-size:.7rem;font-size:clamp(1.315rem,.875vw,1.63rem)}.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{margin-top:1em;margin-bottom:.5em;font-family:var(--font-heading);-webkit-font-smoothing:antialiased;font-weight:300;color:var(--text-color-alt)}.content h1 a,.content h2 a,.content h3 a,.content h4 a,.content h5 a,.content h6 a{color:inherit;text-decoration:none}.content h1 a:hover,.content h1 a:focus,.content h2 a:hover,.content h2 a:focus,.content h3 a:hover,.content h3 a:focus,.content h4 a:hover,.content h4 a:focus,.content h5 a:hover,.content h5 a:focus,.content h6 a:hover,.content h6 a:focus{color:inherit;text-decoration:underline}.content h1 code,.content h2 code,.content h3 code,.content h4 code,.content h5 code,.content h6 code{font-size:.8em;padding:7px 10px;border-radius:11px;background-color:var(--code-bg);color:var(--code-text)}.content p code{background-color:var(--code-bg);color:var(--code-text);padding:0 8px;border-radius:6px;font-size:.9rem;display:inline-block;transform:translateY(-1px);font-weight:var(--code-weight);overflow-wrap:anywhere}.content .note{display:block;font-size:.6em;padding:18px;background-color:#e4e4e4;border-radius:9px}.content em{color:var(--text-color-alt);letter-spacing:.25px;font-size:.95em;font-weight:500}.content abbr{cursor:help;border-bottom:1px dashed var(--text-color-alt);text-decoration:none;color:var(--text-color-alt);font-size:.95em;display:inline-block}.content abbr[title]{position:relative}.content>blockquote{padding:20px 60px;background-color:var(--bgc-low);margin:40px -60px;width:calc(100% + 120px);word-break:break-all}.main>.grid{overflow-x:hidden}.grid,.grid--inner,.code-wrapper__inner{row-gap:24px;display:grid;grid-template-columns:[full-start] minmax(1em,5fr) [ultrawide-start] minmax(2em,200px) [wide-start] minmax(40px,1fr) [main-start] minmax(auto,40em) [main-end] minmax(40px,1fr) [wide-end] minmax(2em,200px) [ultrawide-end] minmax(1em,5fr) [full-end]}@media screen and (max-width: 1080px){.grid,.grid--inner,.code-wrapper__inner{grid-template-columns:[full-start] minmax(20px,1fr) [ultrawide-start] minmax(40px,2fr) [wide-start] minmax(20px,1fr) [main-start] 80vw [main-end] minmax(20px,1fr) [wide-end] minmax(40px,2fr) [ultrawide-end] minmax(20px,1fr) [full-end]}}@media screen and (max-width: 720px){.grid,.grid--inner,.code-wrapper__inner{grid-template-columns:[full-start] minmax(10px,1fr) [ultrawide-start] minmax(20px,2fr) [wide-start] minmax(10px,1fr) [main-start] 80vw [main-end] minmax(10px,1fr) [wide-end] minmax(20px,2fr) [ultrawide-end] minmax(10px,1fr) [full-end]}}.grid>*,.grid--inner>*,.code-wrapper__inner>*{grid-column:main}.grid .grid__full,.grid--inner .grid__full,.code-wrapper__inner .grid__full{grid-column:full}.grid .grid__wide,.grid--inner .grid__wide,.code-wrapper__inner .grid__wide{grid-column:wide}.grid .grid__ultrawide,.grid--inner .grid__ultrawide,.code-wrapper__inner .grid__ultrawide{grid-column:ultrawide}.grid.content h2,.grid--inner.content h2,.code-wrapper__inner.content h2{grid-column:full;padding:1rem max(2rem,5vw)}.grid.content h3,.grid--inner.content h3,.code-wrapper__inner.content h3{border-bottom-width:6px}.grid .grid__wide,.grid .code-wrapper,.grid .minicode,.grid .grid--inner,.grid--inner .grid__wide,.grid--inner .code-wrapper,.grid--inner .minicode,.grid--inner .grid--inner,.code-wrapper__inner .grid__wide,.code-wrapper__inner .code-wrapper,.code-wrapper__inner .minicode,.code-wrapper__inner .grid--inner{margin:30px 0}.grid--aside{display:inline-grid;padding:2rem;gap:2rem;grid-template-columns:[left] minmax(25rem,1fr) [right] minmax(25rem,1fr)}.grid--aside>*{grid-column:left}.grid--aside .aside,.grid--aside pre.code{grid-column:right}.grid--aside.invert>*{grid-column:right}.grid--aside.invert .aside,.grid--aside.invert pre.code{grid-column:left}.code-wrapper{grid-column:ultrawide;background-color:var(--editor-5);color:var(--editor-100);border-radius:11px;border:1px solid var(--editor-40)}.code-wrapper pre{overflow-x:hidden}.code-wrapper__inner{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-font-smoothing:inherit;padding-top:40px;padding-bottom:40px}.code-wrapper__inner::-webkit-scrollbar{display:none}.code-wrapper .code{grid-column:wide}.minicode{grid-column:ultrawide}html{font-size:120%}body{line-height:1.6;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-weight:400;font-family:var(--font-body);background:var(--bgc);color:var(--text-color);overscroll-behavior-y:none}a{color:var(--link)}a:hover,a:focus{color:var(--link-hover)}.shadow-xl{box-shadow:0 .3px .3px hsl(var(--shadow-color)/.38),0 1.8px 2px -.4px hsl(var(--shadow-color)/.2),-.1px 3.5px 3.9px -.8px hsl(var(--shadow-color)/.2),-.2px 6.1px 6.9px -1.2px hsl(var(--shadow-color)/.2),-.3px 10.3px 11.6px -1.7px hsl(var(--shadow-color)/.2),-.5px 17px 19.1px -2.1px hsl(var(--shadow-color)/.2),-.7px 26.8px 30.2px -2.5px hsl(var(--shadow-color)/.2)}::-moz-selection{background:hsl(256deg,80%,48%);color:#efeff0}::selection{background:hsl(256deg,80%,48%);color:#efeff0}