.action-menu{display:flex;align-items:center;margin-top:5rem;padding:.5rem;background-color:#2a2f37;border-radius:2rem}.action-menu .menu-item{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;margin:0 .5rem;background-color:#404854;border-radius:50%;cursor:pointer;transition:opacity .2s}.action-menu .menu-item.disabled{cursor:default;opacity:.6}.configurator-scroll{width:20rem;height:100%}@media screen and (max-width: 976px){.configurator-scroll{background-color:#1f2329}}.configurator{width:100%;color:#a4b2c1}.configurator .wrapper-shape{display:flex;align-items:center}.configurator .wrapper-shape .wrapper-shape__item{padding:.4rem .5rem;cursor:pointer}.configurator .wrapper-shape .wrapper-shape__item .shape{display:inline-block;width:1.5rem;height:1.5rem;background-color:#a4b2c1;transition:background-color .2s}.configurator .wrapper-shape .wrapper-shape__item .shape.circle{border-radius:50%}.configurator .wrapper-shape .wrapper-shape__item .shape.squircle{border-radius:20%}.configurator .wrapper-shape .wrapper-shape__item .shape.active{background-color:#6967fe}.configurator .color-picker{margin:1rem 0 .5rem}.configurator .color-picker summary{color:#677f98;font-size:small;cursor:pointer;-webkit-user-select:none;user-select:none}.configurator .color-list{display:flex;flex-wrap:wrap;align-items:center}.configurator .color-list .color-list__item{position:relative;z-index:1;width:calc(100% / 7);padding:.6rem 0;cursor:pointer;transition:transform .2s}.configurator .color-list .color-list__item .bg-color{position:relative;box-sizing:content-box;width:1.3em;height:1.3em;margin:0 auto;font-size:16px;border-radius:50%;box-shadow:0 0 .05em .2em #1f2329}.configurator .color-list .color-list__item .bg-color.transparent{background:#fff!important}.configurator .color-list .color-list__item .bg-color.transparent:after{position:absolute;top:50%;left:50%;z-index:1;color:#ff4757;font-weight:700;font-size:1.8rem;transform:translate(-50%,-50%) scale(.5);opacity:1;content:"\\"}.configurator .color-list .color-list__item .bg-color:before{position:absolute;top:50%;left:50%;z-index:-1;width:100%;height:100%;background:inherit;border-radius:50%;transform:translate(-50%,-50%);opacity:.5;transition:width .15s,height .15s;content:""}.configurator .color-list .color-list__item .bg-color:after{position:absolute;top:50%;left:50%;z-index:1;color:#1f2329;font-size:1.5rem;transform:translate(-50%,-50%) scale(.5);opacity:0;transition:opacity .15s;content:"✔"}.configurator .color-list .color-list__item .bg-color.active:before{width:160%;height:160%}.configurator .color-list .color-list__item .bg-color.active:after{opacity:1}.configurator .widget-list{display:flex;flex-wrap:wrap}.configurator .widget-list .list-item{display:flex;align-items:center;justify-content:center;width:25%;height:5rem;padding:1rem;border-radius:.8rem;cursor:pointer;transition:background-color .2s}.configurator .widget-list .list-item.selected.selected{background-color:#2c323a}.configurator .widget-list .list-item:hover{background-color:#1f2329}.configurator .widget-list .list-item>svg{width:100%!important;height:100%!important}.configurator .widget-list .list-item>path{stroke:#a4b2c1!important}.avatar-background{position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color .1s}.react-color-avatar{position:relative;overflow:hidden}.react-color-avatar.circle{border-radius:50%}.react-color-avatar.squircle{border-radius:25px}.react-color-avatar .avatar-payload{position:relative;z-index:2;width:100%;height:100%}.setting-section{padding:1.8rem 1rem}.setting-section .section-title{margin-bottom:1.5rem;font-weight:700;line-height:23px}.container{height:100%;padding-right:20rem}.container.full{padding-right:0}@media screen and (max-width: 976px){.container{padding-right:0}}@media (prefers-reduced-motion: no-preference){.container{transition:padding-right .2s}}.footer{display:flex;align-items:center;justify-content:center;height:4rem;padding:.8rem 0;color:#a4b2c166;font-weight:700;font-size:.8rem}.footer .divider{padding:0 1rem}.footer .locale{cursor:pointer}.footer .link,.footer .locale{transition:color .2s}.footer .link:hover,.footer .locale:hover{color:#a4b2c1}.header{display:flex;align-items:center;height:6rem;padding:1rem 2rem}.header .site-title{margin-left:1rem;font-weight:700;font-size:1.9rem;cursor:default}@media screen and (max-width: 480px){.header .site-title{display:none}}.header .header-right{margin-left:auto}.header .header-right .github-button{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;width:9rem;height:2.6rem;overflow:hidden;color:#a4b2c1;font-weight:700;font-size:1.05rem;background-color:#1f2329;border-radius:.6rem;cursor:pointer;-webkit-user-select:none;user-select:none}.header .header-right .github-button:hover{background-color:#181b20}.header .header-right .github-button .text{margin-left:.5rem;letter-spacing:.03rem}.sider{position:fixed;top:0;right:0;z-index:200;height:100%}@media (prefers-reduced-motion: no-preference){.sider{transition:transform .2s;will-change:transform}}.sider .icon-right{transition:transform .2s}.sider.collapsed{transform:translate(100%)}.sider.collapsed .icon-right{transform:rotateY(-180deg)}.sider .trigger{position:absolute;top:50%;left:1px;display:flex;align-items:center;justify-content:center;width:1.2rem;height:4rem;background-color:#1f2329;border-radius:.4rem 0 0 .4rem;transform:translate(-100%,-50%);cursor:pointer;transition:width .2s,background-color .2s}.sider .trigger:hover{width:1.5rem;background-color:#2a2f37}.main{width:100%;height:100%;color:#a4b2c1;background-color:#14161a}.main .content-warpper{height:100%;transform:scale(1)}.main .content-warpper .content-view{position:relative;z-index:110;display:flex;flex-direction:column;height:100%;overflow-y:auto}.playground{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.playground .avatar-wrapper{display:flex;align-items:center;justify-content:center}.playground .action-group{display:flex;align-items:center;justify-content:center;margin-top:4rem;column-gap:1rem}@supports not (column-gap: 1rem){.playground .action-group .action-btn{margin:0 .5rem}}.playground .action-group .action-btn{min-width:6rem;height:2.5rem;padding:0 1rem;color:#a4b2c1;font-weight:700;background:hsl(216,14%,19%);border-radius:.6rem;cursor:pointer;transition:color .2s;-webkit-user-select:none;user-select:none}.playground .action-group .action-btn:hover{color:#c2ccd6}.playground .action-group .action-btn:disabled,.playground .action-group .action-btn[disabled]{color:#a4b2c180;cursor:default}@media screen and (max-width: 480px){.playground .action-group .action-multiple{display:none}}@supports (filter: blur(4rem)) or (-webkit-filter: blur(4rem)) or (-moz-filter: blur(4rem)){.gradient-bg{position:fixed;top:0;left:0;width:100%;height:100%}.gradient-bg .gradient-top{position:absolute;width:100vh;height:100vh;background-image:radial-gradient(rgba(133,233,244,.8) 20%,rgba(133,233,244,.6) 40%,rgba(133,233,244,.4) 60%,rgba(133,233,244,.2) 80%,transparent 100%);border-radius:50%;opacity:.2;filter:blur(4rem);top:-50%;right:-20%}.gradient-bg .gradient-bottom{position:absolute;width:100vh;height:100vh;background-image:radial-gradient(rgba(105,103,254,.8) 20%,rgba(105,103,254,.6) 40%,rgba(105,103,254,.4) 60%,rgba(105,103,254,.2) 80%,transparent 100%);border-radius:50%;opacity:.2;filter:blur(4rem);bottom:-50%;left:-20%}}/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:400;font-size:100%}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,video{max-width:100%;height:auto}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}a{color:inherit;text-decoration:none}button{padding:0;font-family:inherit;border:none}@font-face{font-family:Rubik;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/rubik/v30/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4i1UA.ttf) format("truetype")}@font-face{font-family:Ubuntu Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/ubuntumono/v18/KFOjCneDtsqEr0keqCMhbBc9.ttf) format("truetype")}.font-face{font-family:Fallback;src:local(system-ui),local(-apple-system),local(BlinkMacSystemFont),local(Segoe UI),local(Roboto),local(Ubuntu),local(Helvetica),local(Arial),local(sans-serif)}html,body{height:100%;margin:0;font-size:16px;font-family:Rubik,Fallback;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::selection{background:rgba(164,178,193,.15)}#root{width:100%;height:100%;overflow:hidden}