*{box-sizing:border-box;margin:0;padding:0}html,body{color:#fff;background:#2d3035;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;overflow:hidden}body{display:flex}#sidebar{background:#191b1d;border-right:1px solid #444;width:300px;height:100vh;padding:15px;overflow-y:auto}.logo{margin-bottom:18px}.logo h1{margin-bottom:3px;font-size:25px;font-weight:600}.logo p{color:#888;font-size:11px}.panel{background:#202224;border:1px solid #3b3d40;border-radius:4px;margin-bottom:12px;padding:10px}.panel h3{color:#ddd;margin-bottom:10px;font-size:13px;font-weight:600}#profileCanvas{cursor:crosshair;background:#111;border:1px solid #383838;border-radius:2px;width:100%;height:330px;display:block}.field{margin-bottom:13px;display:block}.field label{color:#aaa;margin-bottom:5px;font-size:12px;display:block}.field input{width:100%}.field input[type=checkbox]{cursor:pointer;width:auto;margin:0}.field span{color:#ddd;margin-top:4px;font-size:11px;display:block}.field input[type=range]{appearance:none;background:#555;border-radius:2px;height:3px}.field input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#ddd;border-radius:50%;width:11px;height:11px}.info{display:block}.info p{color:#999;justify-content:space-between;margin-bottom:7px;font-size:11px;display:flex}.good{color:#6bc46b;font-weight:700}button{color:#eee;cursor:pointer;background:#292b2e;border:1px solid #555;border-radius:3px;width:100%;margin-bottom:7px;padding:9px;font-size:12px}button:hover{background:#35383b}button:disabled{color:#888;cursor:not-allowed;background:#444}#viewer{flex:1;position:relative}#bg{width:100%;height:100%;display:block}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#555}::-webkit-scrollbar-track{background:#1b1c1e}