*{margin:0;padding:0;box-sizing:border-box}*:focus-visible{outline:2px solid #4A90E2;outline-offset:2px;border-radius:3px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--bg-dark: oklch(.15 0 0);--bg-dark-transparent: oklch(.15 0 0 / .5);--bg: oklch(.18 0 0);--bg-transparent: oklch(.18 0 0 / .5);--bg-light: oklch(.25 0 0);--bg-light-transparent: oklch(.25 0 0 / .5);--bg-highlight: oklch(.3 0 0);--bg-highlight-transparent: oklch(.3 0 0 / .5);--text: oklch(.9 0 0);--text-bright: oklch(.98 0 0);--text-dim: oklch(.8 0 0);--text-muted: oklch(.75 0 0);--primary: #4eafff;--primary-rgb: 78, 175, 255;--warning: hsl(55, 100%, 63%);--shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;--shadow-m: inset 0 2px 4px #ffffff30, 0 2px 4px #00000030, 0 4px 8px #00000015;--shadow-l: inset 0 4px 8px #ffffff30, 0 4px 8px #00000030, 0 8px 16px #00000015;--viewWidthPx: 1200;color-scheme:light dark;color:var(--text-dim);background-color:var(--bg-dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-size:1em 1em}a{text-decoration:inherit}ol{padding-left:2.5em}p{color:var(--text-muted)}img{display:block}body{margin:0;display:flex;flex-direction:column;place-items:center;width:100vw;min-height:100vh;max-width:100%}#chipZone{display:flex;perspective:2000px;perspective-origin:50% 50%}#app{position:relative;display:flex;flex-direction:column;align-items:stretch;max-width:1200px;width:100%;gap:5em;padding:2em 2em 0}h1{font-size:2.5em;line-height:1.1}h1,h2,h3,h4,h5,h6{color:var(--text)}.topicHeader{text-align:center}.subHeader{font-size:2em;text-align:center}#demos,#links,#repos{display:flex;flex-direction:column;align-items:stretch;gap:2em}#links>.content,#repos>.content{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1em}pre{margin:0;padding:0}.rotated{transform:rotate(180deg)}#bloomCanvas{position:absolute;z-index:0;filter:blur(5px)}#particlesCanvas{position:absolute;z-index:1}#chipZone{position:relative;padding:2em;height:100vh;display:flex;justify-content:center;align-items:center;align-self:stretch;overflow:hidden;max-width:100vw}.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}@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)}}#intro{--introHeight: min(102, var(--viewWidthPx) * .15);--ratio: calc(var(--introHeight) / 102);position:relative;display:flex;align-items:center;justify-content:space-between;gap:1em;height:calc(1px * var(--introHeight));padding:calc(var(--ratio) * 1em);background-color:var(--bg-transparent);border-radius:5em;box-shadow:var(--shadow-l);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#intro h2{font-size:calc(var(--ratio) * 2em);color:var(--text-bright);line-height:1.1}#yap{font-size:calc(var(--ratio) * 1em);color:var(--text-muted)}#me{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1em;color:var(--text-bright)}#nameAndYap{position:relative;display:flex;flex-direction:column;gap:2px}#pfpImg{position:relative;border-radius:50%;height:calc((1px * var(--introHeight)) - (var(--ratio) * 2em));border:2px solid rgba(255,255,255,.1);box-sizing:content-box}#socials{display:flex;position:relative}#socials a{position:relative;height:max-content}#socials img{position:relative;height:calc((1px * var(--introHeight)) - (var(--ratio) * 2em));filter:grayscale(100%) brightness(70%);transition:filter .3s}#socials img:hover{filter:grayscale(0%) brightness(90%)}#intro pre{text-wrap:wrap}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;border-radius:.25em;padding:.1em .25em;background-color:#28282880}.markdown{color:var(--text)}.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}.hoverGrid{position:fixed;top:0;left:0;z-index:-100;filter:drop-shadow(0 0 3px rgba(78,175,255,1))}.demoLine{display:flex;justify-content:center;align-items:center;gap:1em;flex-wrap:wrap}#demos>.demoLine:nth-child(2n){flex-direction:row}#demos>.demoLine:nth-child(odd){flex-direction:row-reverse}.demoBox{position:relative;border-radius:.5em;box-shadow:0 0 .5em #0006;flex:0 1 533px;height:100%;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:var(--text);box-shadow:var(--shadow-s)}.demoBox .headerBar{height:2.5em;z-index:-10;background-color:var(--bg);box-shadow:var(--shadow-s)}.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}.demoBox .content{position:relative;display:flex;max-height:300px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:16 / 9;overflow:hidden;width:100%;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;transition:max-height .25s}.demoBox .content canvas{position:absolute;top:0;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:#0d0d0d;-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,.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:calc(100% + .5em);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);pointer-events:none;z-index:100}.info .infoTooltip *{margin:0}.info:hover .infoTooltip,.info:active .infoTooltip,.info:focus .infoTooltip{display:block}.info:focus .infoIcon{opacity:.8}.demoDescription{flex:1 1 30%;padding:1em}.codeSnippet{display:flex;flex-direction:column;justify-content:center;box-shadow:0 0 .5em #0006;border-radius:.5em;padding:1em;overflow:auto;max-width:100%;flex:1 0 auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:var(--shadow-s)}pre[class*=language-]{background-color:transparent!important;margin:0!important;padding:0!important}.externalLink{position:relative;color:inherit!important;border-radius:.5em;box-shadow:var(--shadow-s);text-align:left;display:flex;flex-direction:column;height:100%;text-wrap:break-word;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.externalLink h2{position:relative;margin:0}.externalLink .projectDescription{color:var(--text-muted)}.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%;pointer-events:none}.borderHighlightSvg{position:absolute;z-index:5;width:100%;height:100%;filter:drop-shadow(0 0 3px rgba(var(--primary-rgb),1)) drop-shadow(0 0 3px rgba(var(--primary-rgb),.75)) drop-shadow(0 0 5px rgba(var(--primary-rgb),.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-image:radial-gradient(circle at 0% 0%,var(--bg) 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)}.repo{position:relative;display:flex;flex-direction:column;background-color:var(--bg-transparent);box-shadow:var(--shadow-s);border-radius:.5em;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.repo .content{flex:1;display:flex;flex-direction:column;justify-content:space-between;position:relative;padding:1em;gap:1em}.repo .info{display:flex;flex-direction:column;gap:.5em}.repo .content p{color:var(--text-muted)}.repo a{position:relative;bottom:0;align-self:start;text-decoration:none;color:var(--text);font-weight:700;background-color:var(--bg-light-transparent);box-shadow:var(--shadow-s);border-radius:.5em;padding:.5em 1em;transition:background-color .15s,box-shadow .15s}.repo a:hover{background-color:var(--bg-highlight-transparent);box-shadow:var(--shadow-m)}.repo .linkIcon{position:absolute;top:50%;transform:translateY(-50%);right:0;opacity:.8}.repo h2{position:relative;margin:0}.chip{transform-style:preserve-3d;transform-origin:center;will-change:transform;aspect-ratio:1 / 1;max-width:min(200px,50%)}@-moz-document url-prefix(){}.chip{position:relative;border-radius:.5em;text-align:left;padding:1px}.chip .content{position:relative;z-index:2;display:flex;flex-direction:column;gap:1em;width:200px;padding:min(1em,20%);border-radius:.45em;background-color:#080808f2;transition:transform .6s cubic-bezier(.25,.8,.25,1),box-shadow .6s;box-shadow:0 .5em 1em #0003;max-width:min(200px,100%);aspect-ratio:1 / 1}.chip .content:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background-image:radial-gradient(circle,rgba(255,255,255,.05) 2px,transparent 2px);background-size:10% 10%;transform:scale(.5)}.chip .borderSvgEffect{position:absolute;width:100%;height:100%;transition:transform .6s cubic-bezier(.25,.8,.25,1);z-index:10}.chip .borderHighlightSvg{position:absolute;z-index:5;width:100%;height:100%;margin:-1px 0 0 -1px;filter:drop-shadow(0 0 3px rgba(78,175,255,1)) drop-shadow(0 0 3px rgba(78,175,255,.75)) drop-shadow(0 0 5px rgba(78,175,255,.5))}.chip .wires{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200%;height:200%;color:#28f7f8;color:#4eafff;transition:transform .6s cubic-bezier(.25,.8,.25,1)}.chip .effectBackground{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:.5em;overflow:hidden}.chip .effectBackground svg{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#eb38ff;filter:blur(30px);opacity:.95;color:purple}