footer{background-size:cover;background-color:var(--background-lighter);position:relative;overflow:hidden}footer .links{gap:4rem;padding-bottom:2rem;display:flex}footer .links>div{flex:1}footer .links .links-list{flex-direction:column;gap:.2rem;display:flex}footer .links .links-list a{color:var(--foreground-secondary);margin:0;font-size:2.5rem;text-decoration:none}footer .links .links-list a:hover{color:var(--foreground)}footer .copyright{text-align:center;border-top:1px solid var(--background-superlight);justify-content:space-between;width:100%;padding-top:2.5rem;display:flex}footer .copyright span,footer .copyright a{color:var(--foreground-secondary);margin:0;font-size:.8rem}@media (max-width:768px){footer .links{flex-direction:column;gap:2rem;padding-top:.5rem}footer .links .logo{border-bottom:1px solid var(--background-superlight);padding-bottom:2.5rem}footer .links .logo p.name{margin-bottom:.5rem;font-size:1.8rem}}
a.CTA{color:var(--foreground);padding:.75rem 1.5rem;text-decoration:none;display:block;position:relative}a.CTA span,a.CTA i{z-index:1;text-wrap:nowrap;transition:all .2s;position:relative;left:0}a.CTA i{opacity:0;width:20px;height:20px;margin-left:-20px}a.CTA:after{content:"";corner-shape:superellipse(1.5);background:var(--background);border-radius:1rem;transition:all .25s cubic-bezier(.4,.2,0,1.6);position:absolute;inset:0}a.CTA:hover:after{scale:1.1}a.CTA:hover span{left:-13px}a.CTA:hover i{opacity:1;left:13px}
section#hero{color:#171717;text-align:center;background:#d3dad7;flex-direction:column;justify-content:center;align-items:center;width:100%;height:calc(100dvh - 1rem);display:flex;position:relative;overflow:hidden}section#hero h1,section#hero p{text-wrap:balance;width:60%;max-width:1200px}section#hero .CTA{position:absolute;bottom:2rem}section#hero .github-stars{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#000;z-index:1000;background:#ffffff80;border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem 1rem;text-decoration:none;display:flex;position:fixed;top:1rem;right:1rem}section#hero .github-stars:hover{background:#ffffffa0}@media (max-width:768px){section#hero h1,section#hero p{width:80%}}@media (max-width:480px){section#hero h1,section#hero p{width:90%}}
section#intro{background-size:cover;background-color:var(--background-lighter);position:relative;overflow:hidden}section#intro .content{padding:var(--card-padding) 0}
.playground{--RPP-BACKGROUND:#303030;--RPP-INPUT-BG:#3a3a3a;--RPP-INPUT-HOVER:#444;--RPP-INPUT-ACTIVE:#4e4e4e;--RPP-INPUT-FG:#e0e0e0;--RPP-INPUT-BORDER:#ffffff14;--RPP-BUTTON-BG:#444;--RPP-BUTTON-HOVER:#4e4e4e;--RPP-BUTTON-ACTIVE:#5a5a5a;--RPP-BUTTON-FG:#e0e0e0;--RPP-BUTTON-BORDER:#ffffff1c;--RPP-BORDER-RADIUS-S:7px;--RPP-BORDER-RADIUS-M:10px;--RPP-BORDER-RADIUS-L:16px;--RPP-BORDER:#3d3d3d;max-width:950px;margin:2rem auto}.playground-interactive .playground-header{gap:.25rem;width:100%;height:3rem;display:flex}.playground-interactive .playground-header .spacer{flex-grow:1}.playground-interactive .playground-content{border-radius:2rem;gap:.25rem;height:600px;margin-top:.25rem;display:flex;overflow:hidden}.playground-interactive .playground-content .playground-part{overflow:hidden}.playground-interactive .playground-content .playground-part.left{flex:1}.playground-interactive .playground-content .playground-part.right{border-radius:1rem;width:325px;margin:1rem 1rem 1rem 0;overflow:hidden;box-shadow:0 0 1rem #00000008}.playground-button{--theme:var(--background-lighter);box-sizing:border-box;background:var(--theme);text-wrap:nowrap;cursor:pointer;border-radius:2rem;justify-content:center;align-items:center;gap:.5rem;height:100%;padding:.5rem 1rem;display:flex}.playground-button[data-active=true]{--theme:var(--color)}.playground-button:hover{background:hsl(from var(--theme) h s calc(l + 7))}.playground-button:active{background:hsl(from var(--theme) h s calc(l + 14))}.playground-placeholder{background:var(--background-lighter);max-width:950px;height:600px;color:var(--foreground-secondary);text-align:center;border-radius:2rem;justify-content:center;align-items:center;margin:2rem auto;padding:2rem;display:flex}@media (max-width:830px){.playground-interactive{display:none}}@media (min-width:831px){.playground-placeholder{display:none}}
.text-editor-wrap{font-family:var(--font-mono);width:100%;height:100%;font-size:14px;line-height:1.6;position:relative}.text-editor-wrap ::-webkit-scrollbar{display:none}.text-editor-highlight{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;font:inherit;box-sizing:border-box;color:#fff;tab-size:4;margin:0;padding:2rem;position:absolute;inset:0;overflow:hidden}.text-editor{caret-color:#fff;width:100%;height:100%;font:inherit;box-sizing:border-box;resize:none;color:#0000;tab-size:4;background:0 0;border:none;outline:none;padding:2rem;position:absolute;inset:0}.tok-key{color:#d46262}.tok-str{color:#9ab669}.tok-num{color:#dd893a}.tok-bool,.tok-null{color:#965ad8}.tok-punct{color:#ccc}
section#json-playground[data-valid-json=false] .playground-content{background:#471414;outline:1px solid #db0808b0}section#json-playground .playground-content{background:var(--background-lighter);transition:background .3s}section#json-playground .playground-content .playground-part.right{--RPP-BACKGROUND:#303030;--RPP-INPUT-BG:#3a3a3a;--RPP-INPUT-HOVER:#444;--RPP-INPUT-ACTIVE:#4e4e4e;--RPP-INPUT-FG:#e0e0e0;--RPP-INPUT-BORDER:#ffffff14;--RPP-BUTTON-BG:#444;--RPP-BUTTON-HOVER:#4e4e4e;--RPP-BUTTON-ACTIVE:#5a5a5a;--RPP-BUTTON-FG:#e0e0e0;--RPP-BUTTON-BORDER:#ffffff1c;--RPP-BORDER-RADIUS-S:7px;--RPP-BORDER-RADIUS-M:10px;--RPP-BORDER-RADIUS-L:16px;--RPP-BORDER:#3d3d3d}section#json-playground .footnote{text-align:center}
section#json{background-color:var(--purple)}section#json h2{word-wrap:nowrap;white-space:nowrap}section#json p.caption{text-wrap:balance;max-width:750px;height:3rem;margin:0}section#json img{object-fit:contain;width:100%;height:auto;max-height:470px;margin-top:2rem;padding:1rem}@media (max-width:768px){section#json p.caption{height:5rem}section#json img{padding:0}}@media (max-width:480px){section#json p.caption{height:6rem}}
section#overview[data-tab="0"]{background-color:var(--red)}section#overview[data-tab="1"]{background-color:var(--yellow)}section#overview[data-tab="2"]{background-color:var(--blue)}section#overview[data-tab="3"]{background-color:var(--green)}section#overview{transition:background-color .5s ease-in-out}section#overview .titles-carousel{--gap:calc(var(--card-padding) / 2);padding:0 var(--card-padding);margin:0 calc(-1 * var(--card-padding));-webkit-mask-image:linear-gradient(to right, transparent, black var(--card-padding), black calc(100% - var(--card-padding)), transparent);mask-image:linear-gradient(to right, transparent, black var(--card-padding), black calc(100% - var(--card-padding)), transparent);display:flex;overflow-x:auto}section#overview .titles-carousel::-webkit-scrollbar{opacity:0;height:0;display:none}section#overview .titles-carousel h2{word-wrap:nowrap;white-space:nowrap;opacity:.4;cursor:pointer;margin-right:var(--gap)}section#overview .titles-carousel h2:hover{opacity:.6}section#overview .titles-carousel h2[data-active=true]{opacity:1}section#overview .titles-carousel .spacer{min-width:calc(100% - var(--last-element-width) - var(--gap));flex-shrink:0;display:inline}section#overview p.caption{text-wrap:balance;max-width:750px;height:3rem;margin:0}section#overview img{object-fit:contain;width:100%;height:550px;margin-top:2rem}@media (max-width:768px){section#overview p.caption{height:5rem}section#overview img{height:400px;margin-top:1rem}}@media (max-width:480px){section#overview p.caption{height:8rem}section#overview img{height:200px}}
section#styles{background-color:var(--orange);padding-bottom:0;position:relative;overflow:hidden}section#styles h2{word-wrap:nowrap;white-space:nowrap}section#styles p.caption{text-wrap:balance;max-width:750px;height:3rem;margin:0}section#styles img{width:100%;height:auto;margin-top:1rem;margin-bottom:-1rem}@media (max-width:768px){section#styles img.large{display:none}section#styles img.mobile{display:block}}@media (min-width:769px){section#styles img.large{display:block}section#styles img.mobile{display:none}}
.canvas{width:0;height:0;position:relative;top:50%;left:50%}.canvas .canvas-element{position:absolute}
.design-playground-box{width:var(--width);height:var(--height);margin-left:calc(var(--width) * -.5);margin-top:calc(var(--height) * -.5);rotate:var(--rotation);position:relative}.design-playground-box>div{position:absolute;inset:0}.design-playground-box:hover .overlay{outline-offset:-1px;outline:1px solid #07f}.design-playground-box.selected .overlay{outline-offset:-2px;outline:2px solid #07f}.design-playground-box .object{background-color:var(--backgroundColor);opacity:var(--opacity);outline:var(--outline);outline-offset:var(--outlineOffset)}.design-playground-box .object .shadow{position:absolute;inset:0}
.scene-playground .canvas-element:has(.selected):after{content:"";z-index:100;pointer-events:none;background:linear-gradient(135deg,#ff8019 0%,#ce620a 100%);border-radius:50%;width:6px;height:6px;margin-top:-3px;margin-left:-3px;position:absolute;top:0;left:0}.scene-playground .canvas-element .floor-line{width:0;height:var(--yPos);border-left:1px dashed #666;position:absolute;top:50%;left:50%}.scene-playground .canvas-element i{color:#666;font-size:20px;position:absolute;top:-10px;left:-10px}.scene-playground-light .area{outline-offset:20px;border-radius:50%;outline:1px solid #666;width:10px;height:10px;position:absolute;top:-5px;left:-5px}.scene-playground-light .glow{top:calc(var(--intensity) * -.5);left:calc(var(--intensity) * -.5);width:var(--intensity);height:var(--intensity);rotate:var(--rotation);opacity:.35;background:radial-gradient(circle, var(--color) 0%, #ff801900 70%);border-radius:50%;position:absolute}.scene-playground-light.Directional .glow{-webkit-mask:conic-gradient(from 140deg,#0000 0deg,#000 20deg 60deg,#0000 80deg 360deg);mask:conic-gradient(from 140deg,#0000 0deg,#000 20deg 60deg,#0000 80deg 360deg)}.scene-playground-light.selected .area{outline-color:#ff8019}.scene-playground-light.selected .floor-line{border-color:#ff8019}.scene-playground-light.selected i{color:#ff8019}.scene-playground-light .selection{border-radius:50%;width:40px;height:40px;position:absolute;top:-20px;left:-20px}.scene-playground-box{width:var(--width);height:var(--height);margin-left:calc(var(--width) * -.5);margin-top:calc(var(--height) * -.5);rotate:var(--rotation);background-color:#959796;outline:1px solid #000}.scene-playground-box.selected{outline-color:#ff8019}.scene-playground-camera{--color:#666}.scene-playground-camera.selected{--color:#ff8019}.scene-playground-camera.selected i{color:var(--color)}.scene-playground-camera .cone{transform:rotate(var(--angle))}.scene-playground-camera .cone .side{width:100%;height:var(--sideLen);border-left:1px solid var(--color);transform-origin:50% 0;position:absolute;top:0;left:0}.scene-playground-camera .cone .side1{transform:rotate(calc(var(--fov) / 2))}.scene-playground-camera .cone .side2{transform:rotate(calc(var(--fov) / -2))}.scene-playground-camera .cone .far{top:var(--far);left:calc(var(--farLen) * -1);width:calc(var(--farLen) * 2);border-bottom:1px solid var(--color);position:absolute}.scene-playground-camera .selection{border-radius:50%;width:40px;height:40px;position:absolute;top:-20px;left:-20px}
#chart{width:100%;height:100%;padding:80px 40px}#chart #chart-container{width:100%;height:100%;position:relative}#chart .layer{position:absolute;inset:0}#chart .bars{justify-content:space-around;align-items:flex-end;gap:4px;display:flex}#chart .bars .bar{flex:1}
section#usecases-playground h2{text-align:center}section#usecases-playground .playground-content{background:var(--background-lighter)}section#usecases-playground .playground-content .left{position:relative}section#usecases-playground .footnote{text-align:center;background:linear-gradient(to top, var(--background-lighter) 30%, transparent 100%);padding:30px 0 10px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}