*{margin:0;padding:0}a{text-decoration:none}#page{display:block;width:794px;min-height:1120px;border:1px dashed #ddd}.main{display:flex;justify-content:space-around;padding:.5rem}.main .right{margin:0 1rem}.main .right .tips{padding:.5rem 0;color:#409eff;font-size:.8rem}.main #jsonEditor{width:calc(100vw - 900px);margin:0 auto;position:sticky;top:9rem}@media screen and (max-width:1200px){.main{display:flex;align-items:center;flex-direction:column;position:relative;padding:0}.main .right{position:absolute}.main #jsonEditor{width:auto}}.btns{text-align:center}.btns button{color:#409eff;background:#ecf5ff;margin:.5rem;border:none;padding:.5rem 1rem;border-radius:.5rem;outline:none}.btns button:hover{cursor:pointer;transition:all .5s;color:#fff;background-color:#409eff;border-color:#409eff}header{text-align:center;background-color:#24292e;padding:16px;margin-bottom:10px;position:relative}header #tips{display:none}header #open-menu{display:none;background-color:transparent;outline:none;border:none;width:20px;height:20px;cursor:pointer}header #open-menu span{display:block;border-bottom:2px solid #fff;margin-bottom:5px}header nav{display:block}header nav a{color:#fff;font-weight:700;margin:0 10px}header nav span{height:1;border-left:2px solid #fff}header nav a.active{color:#24292e;background-color:#fff;font-size:.8rem;padding:.2rem;border-radius:.2rem}@media screen and (max-width:900px){header #open-menu{display:block;float:left}header #tips{display:block;color:#fff;text-align:center}header nav{display:none;width:100%;position:absolute;left:0;z-index:1;background-color:#24292e}header nav span{width:80%;display:block;border:0;margin:0 auto;border-bottom:2px solid #fff}header nav a{display:block;margin:.5rem auto}}.right{position:relative}.right .input-area{position:sticky;top:0;z-index:1}#domContext{width:100%;margin:.5rem auto 0;padding:1rem;box-sizing:border-box;resize:none}#domContext:focus{box-shadow:0 0 20px #ff0;border:none}#domContext~div.tools{display:flex;justify-content:space-between}div.tools button{color:#fff;background-color:#409eff;border:#409eff;display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;padding:.6rem 1rem;border-radius:4px}div.tools button.disabled{color:#fff;background-color:#a0cfff;border-color:#a0cfff;cursor:not-allowed}div.tools button.success{color:#fff;background-color:#67c23a;border-color:#67c23a}div.tools button:hover{opacity:.8}@media screen and (max-width:1200px){#domContext{padding:.2rem}#domContext.focus{position:fixed;top:0;left:0;right:0;height:3rem;padding:.1rem .5rem;resize:vertical}#domContext.focus~div.tools{position:fixed;top:4rem;left:0;right:0}#domContext.focus~div.tools button{display:block;margin-top:.5rem;font-size:.5rem;padding:.3rem .5rem}}.toast{position:fixed;text-align:center;box-sizing:border-box;left:0;width:100%;top:10%}.toast span{padding:8px 20px;border-radius:6px;font-weight:700}.toast-success span{background-color:#f0f9eb;color:#67c23a}.toast-error span{background-color:#fef0f0;color:#f56c6c}.toast-warn span{background-color:#fdf6ec;color:#e6a23c}.toast-info span{background-color:#ecf5ff;color:#409eff}