body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}#__next,body,html{height:100%}a{color:inherit;text-decoration:none}*{box-sizing:border-box}.playground{width:100%;height:100%}.playground .panel-left{width:3.5em;padding:.2em;display:flex;flex-direction:column;border-right:.5px solid #2a2a2a}.playground .panel-left .logo{height:3em}.playground .panel-left .items .item,.playground .panel-left .logo{width:100%;text-align:center;display:grid;place-items:center;color:#fff;opacity:.7;cursor:pointer}.playground .panel-left .items .item:hover,.playground .panel-left .logo:hover{opacity:1}.playground .panel-left .items .item{padding:.4em 0;font-size:25px;border-left:2px solid transparent}.playground .panel-left .items .item.active{border-left-color:#ff7037}.playground .panel{background-color:#1f1f1f;width:100%;height:100%}.playground .panel .panel-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:space-between;align-items:center;padding:.5rem 1.5em;color:#e7e7e7;background-color:#1a1a1a;height:2.5rem;box-shadow:0 0 0 1px #2a2a2a}.playground .panel .panel-header .actions{display:flex;align-items:center;grid-gap:.5em;gap:.5em;color:#a1a1a1}.playground .panel .panel-header .actions svg{display:block;padding:.1em;height:1.2em;width:1.2em;cursor:pointer;transition:.15s ease-in-out}.playground .panel .panel-header .actions svg:hover{color:#fff}.playground .panel .panel-body{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding-bottom:5rem}.playground .panel .panel-body>span{overflow:hidden;margin-top:1em}.playground .panel .panel-body>span .loading{padding:.4rem 1.5em;margin:.4em;margin-inline:1em;width:auto;display:flex;right:0;left:0}.playground .panel .file{display:flex;grid-gap:.4em;gap:.4em;align-items:center;color:#e7e7e7;cursor:pointer;transition:.15s ease-in-out}.playground .panel .file summary{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;grid-gap:.4em;gap:.4em;align-items:center;padding:.5rem 1.5em}.playground .panel .file summary:focus,.playground .panel .file summary:hover{background-color:#2a2a2a}.playground .panel .file .more-files{margin-left:1em}.playground .panel .file .file-icon{width:1em;height:1em;border-radius:50%}.playground .panel .file .file-icon.directory svg{color:#f3a71a}.playground .panel .file .file-icon.file svg{color:#3ab5ca}.playground .browser-window,.playground .dev-area .dev-area-wrapper{height:100%;width:100%}.playground .browser-window .window-head{height:2.5rem;background-color:#1a1a1a;display:flex;align-items:center;padding:.5em;border-bottom:1px solid #2a2a2a}.playground .browser-window .window-head svg{color:#fff;cursor:pointer;font-size:1em}.playground .browser-window .window-head input{flex-grow:1;margin:.1em .4em;background-color:#fff;border:none;border-radius:2px;height:100%;padding:.1em .3em;cursor:text;color:#000}.playground .browser-window .window-body{height:100%;overflow:auto;background-color:#fff;border-bottom:1px solid #2a2a2a}.playground .browser-window .window-body iframe{width:100%;height:100%;border:none}.playground .dragger>div{background-color:#2a2a2a;cursor:e-resize;transition:.15s ease-in-out}.playground .dragger>div.y{cursor:n-resize}.playground .dragger>div:hover{background-color:#2fcaff}main{height:100vh}main,main .dev-area{overflow:hidden;display:flex}main .dev-area{flex-direction:column;width:100%}.app-editor{flex-grow:1;background-color:#1a1a1a}.app-editor,.main-editor{width:100%;height:100%}.dragger{background-color:transparent;width:.2em;cursor:e-resize;transition:.15s ease-in-out}.dragger.y{cursor:n-resize;width:100%;height:.2em}.dragger:hover{width:.3em;background-color:#2fcaff}.dragger.y:hover{width:100%;height:.3em}.dragger>div{visibility:hidden}.terminal-wrapper{height:100%}.terminal-wrapper .terminal-head{padding:.6em .8em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background-color:#181818;color:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-top:2px solid transparent}.terminal-wrapper .terminal-head.active,.terminal-wrapper .terminal-head:active{border-top-color:#ff7037}.terminal-container{z-index:4}.terminal-container:last-child{height:150px}#term{border-top:2px solid #2a2a2a;width:100%;background-color:#181818;padding:.4em;display:flex;height:100%}#term>*{flex:1 1}.editor-load{background-color:#1a1a1a;height:100%;width:100%;color:#a1a1a1}.editor-header{background-color:#1a1a1a;height:2.5rem;display:flex;overflow-x:auto;overflow-y:none;border-bottom:1px solid #2a2a2a}.editor-header .file-head{border:.5px solid #141414;padding:.1em .5em;display:flex;align-items:center;color:#dcdcdc;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.7;box-shadow:0 0 0 1px #2a2a2a}.editor-header .file-head.active{background-color:#1f1f1f;border-top-color:#ff7037;opacity:1}.editor-header .file-head:focus,.editor-header .file-head:hover{opacity:1}.editor-header .file-head .name{margin-left:.5em}.editor-header .file-head .save-reminder{margin-left:.5em;-webkit-animation:blink 1s ease-in-out infinite;animation:blink 1s ease-in-out infinite}.editor-header .file-head .close-btn{width:1.2em;height:1.2em;background-color:transparent;border-radius:50%;margin-left:.5em;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;color:#fff}.editor-header .file-head .close-btn:focus,.editor-header .file-head .close-btn:hover{background-color:#2a2a2a}.editor-header .file-head .close-btn:active{background-color:#525252}@-webkit-keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}body{background-color:#1f1f1f}section.home{display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:0 10vw;margin-top:2em}section.home a,section.home h1,section.home h2,section.home h3,section.home h4,section.home h5,section.home h6,section.home img,section.home li,section.home p,section.home ul{color:#fff;margin:0;padding:0}section.home .title{font-size:2.5em;font-weight:700;color:#fff;margin:2rem 0 1rem}section.home>.about{color:#d8d8d8;width:50%;text-align:center;line-height:1.5}section.home .selection{display:flex;flex-direction:column;margin-bottom:1rem;margin-top:5rem;overflow:hidden;width:100%}section.home .selection .subtitle{font-size:1.5em;font-weight:700;color:#fff;margin-bottom:.2em}section.home .selection .hint{font-size:1.2em;color:#a1a1a1;margin-bottom:1rem}section.home .selection .templates{display:flex;grid-gap:1em;gap:1em}section.home .selection .templates .template{max-width:50%;position:relative;cursor:pointer;overflow:hidden;aspect-ratio:16/9}section.home .selection .templates .template img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:.25s ease-in}section.home .selection .templates .template:focus .info,section.home .selection .templates .template:hover .info{background-color:rgba(0,0,0,.9)}section.home .selection .templates .template:focus img,section.home .selection .templates .template:hover img{transform:scale(1.1)}section.home .selection .templates .template .info{position:absolute;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,.8);padding:1em;transition:.15s ease-in-out}section.home .selection .templates .template .info .name{font-size:1.2em;font-weight:700;color:#fff;margin-bottom:.2em}section.home .selection .templates .template .info .description{font-size:1em;color:#b9b9b9;margin-bottom:.2em}.app-scroll::-webkit-scrollbar{width:.4em}.app-scroll-x::-webkit-scrollbar{width:100%;height:.4em}.app-scroll::-webkit-scrollbar-track{background-color:#1a1a1a}.app-scroll::-webkit-scrollbar-thumb{background-color:#353535;border-radius:.5em}@-webkit-keyframes react-loading-skeleton{to{transform:translateX(100%)}}@keyframes react-loading-skeleton{to{transform:translateX(100%)}}.react-loading-skeleton{--base-color:#ebebeb;--highlight-color:#f5f5f5;--animation-duration:1.5s;--animation-direction:normal;--pseudo-element-display:block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;overflow:hidden;z-index:1}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));transform:translateX(-100%);-webkit-animation-name:react-loading-skeleton;animation-name:react-loading-skeleton;-webkit-animation-direction:var(--animation-direction);animation-direction:var(--animation-direction);-webkit-animation-duration:var(--animation-duration);animation-duration:var(--animation-duration);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}