:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#1a1a1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:1em 1em}a{font-weight:600;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;flex-direction:column;place-items:center;width:100vw;min-height:100vh;max-width:100%}#app{position:relative;max-width:1200px;width:100%}h1{font-size:3.2em;line-height:1.1}.topicHeader{text-align:center}#demos{display:flex;flex-direction:column;align-items:stretch;padding:0 2rem 2rem}pre{margin:0;padding:0}@keyframes growAndRotate{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.5) rotate(180deg)}to{transform:scale(1.3) rotate(360deg)}}@keyframes shrinkAndRotate{0%{transform:scale(1.3) rotate(0)}50%{transform:scale(.5) rotate(180deg)}to{transform:scale(1) rotate(360deg)}}@keyframes grow{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1.3)}}@keyframes shrink{0%{transform:scale(1.3)}50%{transform:scale(.8)}to{transform:scale(1)}}.rotated{transform:rotate(180deg)}#bloomCanvas{position:absolute;z-index:0;filter:blur(5px)}#particlesCanvas{position:absolute;z-index:1}#projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));justify-content:center;gap:1em;padding:2em}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #3178c6aa)}.card{padding:2em}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}pre[class*=language-],code[class*=language-]{color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo,Monaco,Consolas,Andale Mono,Ubuntu Mono,Courier New,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-] *::selection,code[class*=language-] *::selection{text-shadow:none;background:#264f78}@media print{pre[class*=language-],code[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#1e1e1e}.namespace{opacity:.7}.token.doctype .token.doctype-tag{color:#569cd6}.token.doctype .token.name{color:#9cdcfe}.token.comment,.token.prolog{color:#6a9955}.token.punctuation,.language-html .language-css .token.punctuation,.language-html .language-javascript .token.punctuation{color:#d4d4d4}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.inserted,.token.unit{color:#b5cea8}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.deleted{color:#ce9178}.language-css .token.string.url{text-decoration:underline}.token.operator,.token.entity{color:#d4d4d4}.token.operator.arrow{color:#569cd6}.token.atrule{color:#ce9178}.token.atrule .token.rule{color:#c586c0}.token.atrule .token.url{color:#9cdcfe}.token.atrule .token.url .token.function{color:#dcdcaa}.token.atrule .token.url .token.punctuation{color:#d4d4d4}.token.keyword{color:#569cd6}.token.keyword.module,.token.keyword.control-flow{color:#c586c0}.token.function,.token.function .token.maybe-class-name{color:#dcdcaa}.token.regex{color:#d16969}.token.important{color:#569cd6}.token.italic{font-style:italic}.token.constant{color:#9cdcfe}.token.class-name,.token.maybe-class-name{color:#4ec9b0}.token.console,.token.parameter,.token.interpolation{color:#9cdcfe}.token.punctuation.interpolation-punctuation,.token.boolean{color:#569cd6}.token.property,.token.variable,.token.imports .token.maybe-class-name,.token.exports .token.maybe-class-name{color:#9cdcfe}.token.selector,.token.escape{color:#d7ba7d}.token.tag{color:#569cd6}.token.tag .token.punctuation,.token.cdata{color:gray}.token.attr-name{color:#9cdcfe}.token.attr-value,.token.attr-value .token.punctuation{color:#ce9178}.token.attr-value .token.punctuation.attr-equals{color:#d4d4d4}.token.entity{color:#569cd6}.token.namespace{color:#4ec9b0}pre[class*=language-javascript],code[class*=language-javascript],pre[class*=language-jsx],code[class*=language-jsx],pre[class*=language-typescript],code[class*=language-typescript],pre[class*=language-tsx],code[class*=language-tsx]{color:#9cdcfe}pre[class*=language-css],code[class*=language-css]{color:#ce9178}pre[class*=language-html],code[class*=language-html]{color:#d4d4d4}.language-regex .token.anchor{color:#dcdcaa}.language-html .token.punctuation{color:gray}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight.line-highlight{background:#f7ebc6;box-shadow:inset 5px 0 #f7d87c;z-index:0}code:not([class]):not([id]){display:inline-block;background-color:#1a1a1a80;border-radius:.25em;padding:.1em .25em}.markdown h1{font-size:2em;margin:0 0 .5em}.markdown h2{font-size:1.5em;margin:.5em 0}.markdown h3{font-size:1.2em;margin:.5em 0}.markdown h4{font-size:1em;margin:.5em 0}.markdown h5{font-size:.9em;margin:.5em 0}.markdown h6{font-size:.8em;margin:.5em 0}.markdown p{margin:0 0 .25em}.demoLine{display:flex;justify-content:center;align-items:center;gap:1em;margin:1em 0;flex-wrap:wrap}#demos>.demoLine:nth-child(odd){flex-direction:row}#demos>.demoLine:nth-child(2n){flex-direction:row-reverse}.demoBox{position:relative;border-radius:.5em;box-shadow:0 0 .5em #0006;flex:0 1 533px;height:100%}.demoBox .headerBar{height:1.5em}.demoBox .headerBar .title{height:100%;display:flex;align-items:center;gap:1em}.demoBox .headerBar .title .info{height:16px}.demoBox .headerBar .title .info .infoIcon{position:relative;top:-2px}.demoBox .content{position:relative;display:flex;max-height:300px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:16 / 9;overflow:hidden;transition:max-height .25s}.demoBox .content canvas{width:100%;height:100%}.headerBar{display:flex;justify-content:space-between;align-items:center;padding:.5em 1em;border-radius:.5em .5em 0 0;background-color:#131313;-webkit-user-select:none;user-select:none}.collapseIcon{cursor:pointer;transition:transform .25s}.reloadIcon{cursor:pointer;animation:shrinkAndRotate linear .25s;transform:rotate(360deg);transition:transform .25s}.reloadIcon:active{animation:grow linear .25s;transform:rotate(0) scale(1.3);transition:none}.info{position:relative;display:inline-block}.collapsed.demoBox{border-radius:1em}.collapsed .content{max-height:0px!important}.collapsed .headerBar{border-radius:1em;transition:border-radius 1s}.info .infoTooltip{display:none;position:absolute;top:50%;left:100%;transform:translateY(-50%);padding:.5em;background-color:#34343480;border-radius:.5em;box-shadow:0 0 10px #0006;color:#fff;font-size:.8em;white-space:nowrap;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100}.info .infoTooltip *{margin:0}.info:hover .infoTooltip,.info:active .infoTooltip{display:block}.demoDescription{flex:1 1 30%}.codeSnippet{display:flex;flex-direction:column;justify-content:center;box-shadow:0 0 .5em #0006;border-radius:.5em;padding:1em;overflow:auto;max-width:calc(100% - 2em);flex:1 0 auto}pre[class*=language-]{background-color:transparent!important;margin:0!important;padding:0!important}.externalLink{position:relative;color:inherit!important;border-radius:.5em;box-shadow:-.3em .3em .3em #0000001a;text-align:left;padding:1px;display:flex;flex-direction:column;height:100%;text-wrap:break-word}.externalLink h2{position:relative;margin:0}.externalLink .projectDescription{color:#fffc}.externalLink .linkIcon{position:absolute;top:50%;transform:translateY(-50%);right:0;opacity:.8}.demoLine .externalLink{flex:1 1 501px}.borderSvgEffect{position:absolute;width:100%;height:100%}.borderHighlightSvg{position:absolute;z-index:5;width:100%;height:100%;margin:-1px 0 0 -1px;animation:pulse 1s infinite alternate ease-in-out}@keyframes pulse{0%{filter:drop-shadow(0 0 3px rgba(78,175,255,1)) drop-shadow(0 0 5px rgba(78,175,255,0)) drop-shadow(0 0 10px rgba(78,175,255,0))}to{filter:drop-shadow(0 0 3px rgba(78,175,255,1)) drop-shadow(0 0 5px rgba(78,175,255,.75)) drop-shadow(0 0 10px rgba(78,175,255,.5))}}.blurredBorderHighlightSvg{filter:blur(3px)}.externalLink .content{position:relative;z-index:2;display:flex;flex:1;flex-direction:column;gap:1em;padding:1em;border-radius:.45em;background-color:#1a1a1a4d;background-image:radial-gradient(circle at 0% 0%,rgb(35,35,35,1) 0%,transparent 70%)}.borderHighlight{content:"";position:fixed;top:0;left:0;width:200px;min-width:200px;min-height:200px;height:200px;border-radius:100%;background-color:#4eafff;transform:translate(-50%,-50%);filter:blur(30px)}.externalLink .content:after{position:absolute;top:-50%;left:-50%;width:200%;height:200%;filter:blur(1px)}.externalLink .holder{position:relative;display:flex;flex-direction:column;padding:1em;height:100%;text-wrap:break-word}.externalLink .holder h2{position:relative;margin:0}.externalLink .holder .projectDescription{color:#fffc}.externalLink .holder .linkIcon{position:absolute;top:50%;transform:translateY(-50%);right:0;opacity:.8}.externalLink .holder{position:relative;background-color:#5d5d5d33;box-shadow:0 .5em 1em #0003;text-align:left;padding:1px}.externalLink .holder .content{position:relative;z-index:2;display:flex;flex:1;flex-direction:column;gap:1em;padding:1em;border-radius:.45em;background-color:#1a1a1a28;background-image:radial-gradient(circle at 0% 0%,rgba(93,93,93,.15) 0%,transparent 90%)}.externalLink .holder .content:after{position:absolute;top:-50%;left:-50%;width:200%;height:200%;filter:blur(1px)}