.alert-box{position:fixed;bottom:0;left:0;text-align:center;padding:20px;width:100%;perspective:200px}.alert-box .alert{display:inline-block;padding:10px 15px;box-shadow:0 20px 30px -20px rgba(0,0,0,.5);border-radius:8px;border:1px solid rgba(0,0,0,.13);transform:rotateX(45deg) scale(.8);opacity:0;transition:all .3s ease;background:#fff}.alert *{vertical-align:top}.alert span{display:inline-block;margin-top:2px;margin-left:10px}.alert-box.show .alert{opacity:1;transform:rotateX(0deg) scale(1)}.comment-box-wrapper{position:absolute;perspective:200px;transform:translate(-50%,-60px)}.comment-box{transform:rotateX(20deg) scale(.9);background:#fff;padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,.13);box-shadow:0 20px 30px -20px rgba(0,0,0,.5);opacity:0;transition:all .3s ease}.comment-box-wrapper.show .comment-box{opacity:1;transform:rotateX(0deg) scale(1)}.comment-box>*{display:inline-block;vertical-align:top}.comment-box .avatar{width:28px;height:28px;border-radius:50%;background:#00f}.comment-box .comment{padding:5px 10px;width:300px;line-height:1.4}.comment-box [contenteditable]:empty:before{content:attr(data-placeholder);opacity:.5}.keyboard{display:inline-flex;height:500px;justify-content:center;align-content:center;padding:50px}#keyboardSVG{display:inline-block;vertical-align:top;width:600px}#keyboardSVG path,#keyboardSVG rect{transition:all .1s ease}#keyboardSVG .active rect,#keyboardSVG rect.active{stroke:#3d3d3d}#keyboardSVG .active path,#keyboardSVG path.active{fill:#3d3d3d}.sidebar-backdrop{background:rgba(0,0,0,.06);position:fixed;top:0;left:0;width:100vw;height:100vh;opacity:0;pointer-events:none;transition:all .3s ease}.sidebar-backdrop.show{opacity:1;pointer-events:all}#sidebar form{top:0;left:0;height:calc(100% - 80px);position:absolute;padding:40px;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:1;background:#fff;opacity:0;pointer-events:none;transition:all .3s ease}#sidebar form.show{opacity:1;pointer-events:all;transform:scale(1)}#sidebar form span{transform:scale(.8);transition:all .3s ease}#sidebar form.show span{transform:scale(1)}#sidebar form h2{font-weight:500;margin-left:5px;margin-top:20px;margin-bottom:20px}#sidebar form button{float:right;margin-right:5px;margin-top:5px;padding:15px 0;border-radius:8px;font-size:1.2em;background:transparent;color:#50b3ff;font-weight:500}#sidebar{width:100%;max-width:500px;height:100vh;overflow:auto;padding:20px;position:fixed;top:0;right:0;background:#fff;box-shadow:20px 0 50px -20px rgba(0,0,0,.25);border-left:1px solid #e1e1e1;opacity:0;pointer-events:none;transform:translateX(100%);transition:all .3s ease}#sidebar.show{opacity:1;transform:none;pointer-events:all}#sidebar header{text-align:center;border-bottom:1px solid #e1e1e1;margin-left:-20px;padding:0 20px 20px;width:calc(100% + 40px)}#sidebar header .close-arrow{float:left;width:30px;height:30px;padding:7px;border-radius:50%;transition:all .2s ease;cursor:pointer}#sidebar header .close-arrow:hover{background:#f1f1f1}#sidebar header .close-arrow:active{background:#e1e1e1}#sidebar header .avatar{float:right;width:30px;height:30px;background:#e1e1e1;border-radius:50%}#sidebar header h2{font-size:1.2em;display:inline-block;margin:3px 0 0;font-weight:500}#sidebar .notes{transition:all .3s ease;transition-delay:.3s;transform:translateX(0)}#sidebar .notes.hide{opacity:0;transform:translateX(20px)}#sidebar .notes .note{line-height:1.4;font-size:1.2em;padding:20px;border-radius:8px;border:1px solid #e1e1e1;margin:20px 0}#sidebar .notes section>:first-child{margin-top:0}#sidebar .note>:last-child,#sidebar .notes section>:last-child{margin-bottom:0}#sidebar .note section p{color:rgba(0,0,0,.25)}#sidebar .note section p span.range-selection{color:#000}#sidebar .note-comment{font-size:1rem;margin:20px 0}#sidebar .note-comment>*{display:inline-block;vertical-align:top}#sidebar .note-comment .avatar{width:40px;height:40px;background:#e1e1e1;border-radius:50px}#sidebar .note-comment-block{max-width:calc(100% - 40px);padding-left:10px}#sidebar .note-comment .author{font-weight:600}.popover-wrapper{width:100%;max-width:400px;position:absolute;opacity:0;pointer-events:none;transition:all .2s ease}.popover{background:#fff;border-radius:8px;padding:20px;border:1px solid #e1e1e1;box-shadow:0 20px 30px -20px rgba(0,0,0,.25);line-height:1.4}.popover-wrapper.show{opacity:1;pointer-events:all}.popover--top{transform:translate(-50%,calc(-100% + 10px)) scale(.9)}.popover--top.show{transform:translate(-50%,-100%)}.popover--bottom{transform:translate(-50%,-10px) scale(.9)}.popover--bottom.show{transform:translate(-50%)}.popover--right{transform:translate(-20px,-50%) scale(.9)}.popover--right.show{transform:translateY(-50%) scale(.9)}.popover--left{transform:translate(calc(-100% + 20px),-50%) scale(.9)}.popover--left.show{transform:translate(-100%,-50%)}.popover-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh}.popover .step-of{margin-top:24px;display:inline-block;opacity:.5}.popover .right{margin-top:20px;float:right}.popover button.ghost+span{display:inline-block;vertical-align:top;margin-top:4px;margin-left:-7px;margin-right:6px;opacity:.5}button,input,select,textarea{font-size:1.2em;color:inherit;-webkit-font-smoothing:antialiased;border:none;outline:none;background:transparent}button{cursor:pointer}form.form{position:relative;margin:-5px}form.form .input-box{display:inline-block;position:relative;margin:5px;vertical-align:top;font-family:Roboto Mono;font-size:.85em;height:60px;transition:all .3s ease;border:1px solid #e1e1e1;border-radius:8px;width:calc(100% - 10px)}form.form .input-box.input-box--div{height:auto}form.form .input-box.input-box--textarea{border:1px solid;height:auto;min-height:150px;margin-top:20px;margin-bottom:5px}.form.form .input-box.input-box--textarea .max-length{position:absolute;bottom:10px;left:0;font-size:.8em;opacity:.5;font-weight:400}.input-box .input,.input-box input{background:transparent;padding:22px 10px 15px 15px;transition:all .3s ease;font-weight:400}.input-box input{width:100%}.input:not(:empty):before{content:attr(data-before)}.input-box span{position:absolute;top:20px;left:15px;font-size:1.2em;font-weight:400;transition:all .3s ease;opacity:.5}.input-box--textarea div:empty+span,.input-box.input-box--tag-field span,.input-box .input:not(:empty)+span,.input-box input:not(:invalid)+span{font-family:var(--sans-serif);font-size:.85em;font-weight:600;top:14px;left:10px;opacity:1}.input-box.input-box--textarea div:empty,.input-box.input-box--textarea div:empty+span,.input-box.input-box--textarea div:not(:empty),.input-box.input-box--textarea div:not(:empty)+span{padding-left:10px}.input-box input:invalid+span:before{content:attr(data-placeholder)}.input-box input:invalid+span .label-content{display:none};.input-box input:not(:invalid)+span .label-content{display:block}.input-box--textarea .input,.input-box--textarea input,.input-box .input:not(:empty),.input-box input:not(:invalid){padding:29px 10px 11px}div[contenteditable=true]{outline:none}div[contenteditable=true]:empty:before{content:attr(data-placeholder);opacity:.5}.form .input-box.input-box--tag-field{height:auto}.form .tags{margin-top:30px}.form .tags .input,.form .tags .tag{display:inline-block;vertical-align:top;padding:3px 5px 4px;border:1px solid var(--border-color);margin:0 3px 5px;font-weight:400}.form .tags{margin-left:-3px}.form .tags .input{min-width:50px;border:1px solid transparent}.form .tags .tag:focus{border:1px solid var(--border-medium);outline:none}.form .part{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:all .5s ease}.form .part.animate-up{transform:translateY(-100%);opacity:0}.form .part.animate-down{transform:translateY(100%);opacity:0}form.form .input-box.range{position:relative;padding:25px 20px;height:auto}.range .range--track{position:relative;height:1px;background:#000;border-radius:4px}.range .range--fill-track{position:absolute;top:0;height:1px;border-radius:4px}.range .range--thumb{position:absolute;height:45px;width:45px;border-radius:50%;background:#000;transform:translateY(-50%);color:#fff;text-align:center}.range .range--thumb .range--value{position:absolute;font-family:var(--monospace);line-height:0;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;letter-spacing:1px}.range .range-labels{margin-bottom:30px;letter-spacing:1px}.range .range-labels>div{display:inline-block;vertical-align:top;text-transform:uppercase}.range .range-labels .right-label{float:right}.range .range--wrapper{display:inline-block;vertical-align:top;width:calc(100% - 80px)}form.form .input-box.range{border-bottom:none;margin:0}.range .range--action{display:inline-block;vertical-align:top;width:40px;font-size:1.2em;margin-top:-11px;text-align:center;font-weight:400;font-family:var(--sans-serif)}.range .action--left{padding-right:10px}.range .action--right{padding-left:10px}.range .label{display:block;position:static;text-align:center;margin-top:15px;opacity:1;text-transform:uppercase;font-size:1em;letter-spacing:1px}*{-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-sizing:border-box}body{margin:0}#root{max-width:1400px;margin:0 auto}.demo{height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:all .3s ease}.demo.hide{opacity:.3;transform:scale(.9)}#finishedScreen,#screenSizeTooSmall{width:100vw;height:100vh;position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;font-size:1.2em;transform:scale(.9);opacity:0;transition:all .3s ease;transition:.3s;pointer-events:none;z-index:2}#screenSizeTooSmall{background:#fff}#finishedScreen.show{transform:scale(1);opacity:1;pointer-events:all;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.demo-footer{width:400px}.demo-footer h1,.demo-header h1{font-size:1.4em;font-weight:500;text-align:center}.demo-footer h2,.demo-header h2{font-size:1.1em;line-height:1.4;font-weight:400;width:100%;text-align:center;opacity:.5}.demo-footer h2{position:relative;height:100px}.demo-footer h2 .step{position:absolute;transform:translateY(5px) scale(.9);width:100%;left:0;opacity:0;pointer-events:none;transition:all .2s ease}.demo-footer h2 .step.show{transform:translate(0) scale(1);opacity:1;pointer-events:all}article{line-height:1.4;font-size:1.5em;letter-spacing:.5px}a{color:#78beff}#textFragment{display:inline-flex;vertical-align:top;width:calc(100% - 700px);height:500px;padding:50px;justify-content:center;align-items:center}#textFragment p{transition:all .3s ease}#textFragment p.hidden{opacity:0;margin-bottom:-150px}.range-selection{background:#c4f4bd;cursor:pointer;transition:all .2s ease}.selection--active,.selection--active .range-selection{background:#8bec7e}::selection{background:rgba(80,224,58,.25)}[contenteditable]{outline:none}b{font-weight:600}button{background:#50b3ff;border-radius:5px;border:none;padding:5px 10px;color:#fff;font-family:inherit;font-size:inherit;vertical-align:bottom;cursor:pointer;outline:none;transition:all .2s ease}button:focus,button:hover{background:#3b9eeb}button.ghost{background:transparent;color:inherit}@media (max-width:1280px){#textFragment{width:calc(100% - 600px)}#keyboardSVG{width:500px}}@media (max-width:1024px){#screenSizeTooSmall{opacity:1;transform:scale(1);pointer-events:all}}@media (max-height:800px){article{font-size:1.2em}#textFragment,.keyboard{height:350px}}@media (max-height:650px){#screenSizeTooSmall{opacity:1;transform:scale(1);pointer-events:all}}
/*# sourceMappingURL=/main.c4462b13.css.map */